@charset "utf-8";


/*===============================================
	mainImg
===============================================*/
.mainImg {
	overflow: hidden;
}
.mainImg::after {
  position: absolute;
  content: "世界を、未来を、物流でつなぐ。";
  top: 20%;
  left: 50%;
  transform: translate(-50%, 20px); /* 下からふわっと */
  -webkit-transform: translate(-50%, 20px);
  -ms-transform: translate(-50%, 20px);
  opacity: 0; /* 最初は透明 */
  transition: opacity 1s ease, transform 1s ease;

  color: var(--main-bg1);
  font-size: 3.2rem;
  white-space: nowrap;
  font-weight: 600;
}

/* 表示させたいとき（JavaScriptで付けるなど） */
.mainImg.show::after {
  opacity: 1;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
}
@media screen and (min-width:901px){
.mainImg div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
}
.mainImg div.main01 {
  background-image: url("../images/top/main01_pc.webp");
}
.mainImg div.main02 {
  background-image: url("../images/top/main02_pc.webp");
}
.mainImg div.main03 {
  background-image: url("../images/top/main03_pc.webp");
}
.mainImg div.main04 {
  background-image: url("../images/top/main04_pc.webp");
}
.mainImg div.main05 {
  background-image: url("../images/top/main05_pc.webp");
}
.mainImg.spIn {
		display: none;
}
}
.slick-dotted.slick-slider {
    margin-bottom:0 !important;
}
.mainImg .slick-dots {
    bottom: 2%;
}

.custom-dot {
  display: block;
  width: 12px;
  height: 12px;
  background: #aaa;
  border-radius: 50%;
}
.slick-dots li.slick-active .custom-dot {
  background: #333;
}

@media screen and (max-width:900px){
.mainImg::after {
  content: "世界を、未来を、物流でつなぐ。";
    white-space: pre;
    top: 25%;
    padding:5px 10px;
    font-size:1.2rem;
		/*     background-color: rgba(255, 255, 255, 0.3); */
}
.mainImg.spIn {
		display: block;
}
/*.mainImg div.main01 {
  background-image: url("../images/top/main01_sp.webp");
}
.mainImg div.main02 {
  background-image: url("../images/top/main02_sp.webp");
}
.mainImg div.main03 {
  background-image: url("../images/top/main03_sp.webp");
}
.mainImg div.main04 {
  background-image: url("../images/top/main04_sp.webp");
}
.mainImg div.main05 {
  background-image: url("../images/top/main05_sp.webp");
}*/
}

/*===============================================
	topCom
===============================================*/
#topCom .img {
    margin: 0 0 45px;
}
#topCom .txt {
    max-width: 960px;
    margin: 0 auto 85px;
    font-size:1.8rem;
    font-weight: 600;
    line-height: 1.6;
}

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

#topCom .txt {
    margin: 0 5% 65px;
    font-size:1.2rem;
}
}

/*===============================================
	news
===============================================*/
#news {
    max-width: 960px;
    margin: 0 auto 85px;
	display: flex;
	justify-content:space-between;
}
#news h2 {
	width:150px;
}
#news .newsWrap {
	width:calc(100% - 230px);
	padding:0 0 0 40px;
	border-left: 2px solid var(--main-bg1);
}
#news .newsWrap dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 1em;
}

#news .newsWrap dt {
	padding:5px 0;
	font-weight: 600;
}
#news .newsWrap dt.new::after {
	content: "NEW";
	margin-left: 5px;
	padding:0px 2px;
	font-size:0.8rem;
	color:var(--main-bg2);
	background-color:var(--main-bg1);
}
#news .newsWrap dd {
	padding:5px 0;
	line-height: 1.6;
}
@media screen and (max-width:900px){
#news {
    margin: 0 5% 65px;
	display: block;
}
#news h2 {
	width:220px;
	margin: 0 0 25px;
}
#news .newsWrap {
	width:calc(100% - 20px);
	padding:0 0 0 20px;
}
#news .newsWrap dl {
  display:block;
  grid-template-columns: 150px 1fr;
  column-gap: 1em;
}

#news .newsWrap dt {
	padding:0 0 5px;
}
#news .newsWrap dd {
	padding:0 0 15px;
	line-height: 1.6;
	font-size: 0.9rem;
}
}

/*===============================================
	service
===============================================*/
#service {
    padding:80px 0 60px;
background-image:
  url("../images/top/bg.svg"),
  linear-gradient(to bottom right, #5faec6, #004487);

background-size: 756px 354px, cover;
background-repeat: no-repeat, no-repeat;
background-position:top left;
}

#service h2 {
    max-width: 960px;
    margin: 0 auto 65px;
    text-align: left;
}
#service h2 img {
    max-width: 695px;
}
#service #serviceWrap {
    margin: 0 auto;
}
#service #serviceWrap .box {
	position: relative;
    max-width: 1000px;
    margin-bottom: 65px;
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
}
#service #serviceWrap .box:nth-child(odd) {
    margin-left: auto;
}
#service #serviceWrap .box:nth-child(even) {
    margin-right: auto;
}
#service #serviceWrap .box h3 {
    width:65px;
}
#service #serviceWrap .box .img {
    max-width: 900px;
}
#service #serviceWrap .service01 .ic {
    position: absolute;
	left: -150px;
	bottom: 0;
	width:180px;
}
#service #serviceWrap .service02 .ic {
    position: absolute;
	right: -200px;
	bottom: 0;
	width:190px;
}
#service #serviceWrap .service03 .ic {
    position: absolute;
	left: -70px;
	bottom: 0;
	width:140px;
}

@media screen and (max-width:900px){
#service {
    padding:60px 0 10px;
background-size: 300px 140px, cover;

}

#service h2 {
    max-width:none;
    width: 70%;
    margin: 0 5% 45px;
}
#service #serviceWrap .box {
    max-width:none;
    width: 90%;
    margin-bottom: 75px;
}
#service #serviceWrap .box h3 {
    width:25px;
}
#service #serviceWrap .box .img {
    max-width:calc(100% - 35px);
}
#service #serviceWrap .service01 .ic {


    left:30px;
	bottom: -40px;
	width:100px;
}
#service #serviceWrap .service02 .ic {


    right: 40px;
	bottom: -30px;
	width:110px;
}
#service #serviceWrap .service03 .ic {


    left: -30px;
	bottom: -50px;
	width:80px;
}
}

/*===============================================
	topContact
===============================================*/
#topContact {
	max-width: 900px;
	margin: 85px auto 85px;
}
#topContact h2 {
	width: 360px;
	margin: 0 0 75px;
}
#topContact .txt {
	margin: 0 0 30px;
	font-size:1.5rem;
	font-weight: 500;
}
#topContact .contactWrap {
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
}

#topContact .contactWrap .inquiry {
	width:calc(48% - 10%);
	padding:25px 5%;
	background-color: #eeeeee;
	text-align: center;
	
}
#topContact .contactWrap .inquiry h3 {
	margin: 0 0 15px;
	padding:3px 0;
	color:var(--main-bg2);
	font-size:1.4rem;
	font-weight: 500;
	background-color: var(--main-bg1);
	border-radius: 30px;
}
#topContact .contactWrap .inquiry .tel {
	margin-bottom: 10px;
	font-size:1.4rem;
}
#topContact .contactWrap .inquiry .part {
    line-height: 1.6;
    font-size: 0.9rem;
}
@media screen and (max-width:900px){
#topContact {
	margin: 65px 5% 55px;
}
#topContact h2 {
	width:70%;
	margin: 0 0 45px;
}
#topContact .txt {
	margin: 0 0 20px;
	font-size:1.2rem;
}

#topContact .contactWrap .inquiry {
	width:calc(100% - 10%);
	margin-bottom: 15px;
	
	
}
}
	
	
/*===============================================
	slidein2
===============================================*/
.slidein2 {
  opacity: 0;
  transform: translateX(0);
  transition: transform 1s cubic-bezier(0.75, 0, 0.25, 1), opacity 1s ease;
}

/* 左寄せ用 */
.slidein_left2 {
  margin: 0 auto 0 0; /* 左寄せ */
}
.slide_left2 {
  transform: translateX(-100%);
}

/* 右寄せ用 */
.slidein_right2 {
  margin: 0 0 0 auto; /* 右寄せ */
}
.slide_right2 {
  transform: translateX(100%);
}

/* 表示時に元の位置に */
.slidein2.show2 {
  transform: translateX(0);
  opacity: 1;
}

/* slidein3：右上 → 元位置 */
.slidein3 {
  opacity: 0;
  /* 50vw右／50vh上 からスタート */
  transform: translate3d(50vw, -50vh, 0);
  transition: transform 1s cubic-bezier(0.75, 0, 0.25, 1) 0.5s,
              opacity   1s ease 0.5s;
}

.slidein3.show3 {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.slick-arrow:before{
	content:""!important;
}
.slick-arrow:before{
    content:""!important;
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0;
}