@charset "UTF-8";
/*===================================================
メイン画像
===================================================*/
#mainImg {
  position: relative;
  height: calc(100vw * 55 / 120);
  max-height: 600px;
  min-height: 300px;
  background: url(../images/top_mainimg.jpg) no-repeat center / cover;
  padding-top: 60px;
}
#mainImg::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25px;
  background: url(../images/wave01.svg) repeat-x center / 300px 25px;
}

#mainImg>div {
  position: relative;
  width: calc(100vw - 100px);
  max-width: 1100px;
  margin: 0 auto;
}
#mainImg>div::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/mainimg_name.svg) repeat-x center / contain;
  opacity: .4;
}

#mainImg>div h1 {
  position: relative;
  width: 80%;
  max-width: 876px;
  margin: 0 auto;
  z-index: 2;
}
#mainImg>div h1 span {
  display: block;
  width: 100%;
  height: 0;
  text-indent: 101%;
  white-space: nowrap;
  overflow: hidden;
  background: url(../images/mainimg_slogan.svg) no-repeat center / contain;
  padding-top: calc(100% * 120 / 840);
}

@media screen and (max-width: 834px) {
#mainImg {
  min-height: 200px;
  padding-top: clamp(20px, 6vw, 50px);
}
#mainImg::after {
  height: 10px;
  background-size: 120px 10px;
}

#mainImg>div {
  width: calc(100vw - 20px);
}

#mainImg>div h1 {
  width: 100%;
  max-width: 700px;
}
#mainImg>div h1 span {
  background-image: url(../images/mainimg_slogan_sp.svg);
  padding-top: calc(100% * 120 / 730);
}
}



/*===================================================
会社案内
===================================================*/
#company h2 {
  background: url(../images/wave02.svg) no-repeat center / 3000px 80px;
}

#company h2+p {
  font-size: 1.2em;
  line-height: 2;
  text-align: center;
}

#company .el_btm a span::after {
  transform: translateY(-40%);
}

@media screen and (max-width: 834px) {
#company h2 {
  background-size: 1875px 50px;
}

#company h2+p {
  font-size: 1em;
  font-weight: 700;
  text-align: justify;
}
#company h2+p br {
  display: none;
}
}


/*===================================================
私たちの想い
===================================================*/
#aboutus {
  overflow: hidden;
}

#aboutus .ly_conBox {
  max-width: 1200px;
}

#aboutusBox {
  position: relative;
  padding: 50px;
}
#aboutusBox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-color: #eaf1f8;
  border-radius: 30px;
}
#aboutusBox>div {
  position: relative;
  z-index: 2;
}

#aboutus h2+p {
  font-size: 1.2em;
  line-height: 2;
  text-align: center;
}

#aboutusIconBox {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
}
#aboutusIconBox>div {
  width: calc((100% - clamp(100px, 10vw, 150px)) / 3);
}
#aboutusIconBox>div+div {
  margin-left: clamp(50px, 5vw, 75px);
}

#aboutusIconBox>div>div {
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
}
#aboutusIconBox>div>div>div {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
  background-color: #fff;
  border-radius: 50%;
}
#aboutusIconBox>div>div>div img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: auto;
  transform: translate(-50%,-50%);
}

#aboutusIconBox>div>p {
  text-align: center;
}
#aboutusIconBox>div>p b {
  display: block;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1;
  color: #3071b9;
  margin: 30px 0 15px;
}
#aboutusIconBox>div>p span {
  display: inline-block;
}

@media screen and (max-width: 1150px) {
#aboutusIconBox>div>p {
  text-align: justify;
}
#aboutusIconBox>div>p b {
  text-align: center;
}
#aboutusIconBox>div>p span {
  display: inline;
}
}

@media screen and (min-width: 835px) {
#aboutus h2+p span {
  display: inline-block;
}
}

@media screen and (max-width: 834px) {
#aboutusBox {
  padding: 30px 15px;
}
#aboutusBox::after {
  border-radius: 15px;
}
#aboutusBox>div {
  max-width: 520px;
  margin: 0 auto;
}

#aboutus h2+p {
  font-size: 1em;
  font-weight: 700;
  text-align: justify;
}
#aboutus h2+p br {
  display: none;
}

#aboutusIconBox {
  flex-direction: column;
  margin-top: 30px;
}
#aboutusIconBox>div {
  width: 100%;
}
#aboutusIconBox>div+div {
  margin: 30px 0 0;
}

#aboutusIconBox>div>div {
  width: 60%;
}

#aboutusIconBox>div>p br {
  display: none;
}
#aboutusIconBox>div>p b {
  font-size: 1.2em;
  margin: 15px 0 10px;
}
}


/*===================================================
村田運輸の強み
===================================================*/
#strength .ly_conBox>div:nth-of-type(odd) {
  padding-right: 100px;
}
#strength .ly_conBox>div:nth-of-type(even) {
  padding-left: 100px;
}
#strength .ly_conBox>div+div {
  margin-top: 50px;
}

#strength .ly_conBox h3 {
  margin-bottom: 10px;
}

#strength .ly_conBox>div>dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#strength .ly_conBox>div>dl>dt {
  order: 2;
  width: 35%;
}

#strength .ly_conBox>div>dl>dd {
  order: 1;
  width: calc(65% - 30px);
  margin-right: 30px;
}

#strength .ly_conBox>div>dl>dd h3+p {
  text-align: justify;
}

@media screen and (max-width: 834px) {
#strength .ly_conBox>div {
  padding: 0 !important;
}
#strength .ly_conBox>div+div {
  margin-top: 30px;
}

#strength .ly_conBox>div>dl>dt {
  order: 1;
  width: 100%;
}

#strength .ly_conBox>div>dl>dd {
  order: 2;
  width: 100%;
  margin: 15px 0 0;
}
}


/*===================================================
採用情報
===================================================*/
#recruit {
  overflow: hidden;
}

#recruit .ly_conBox {
  max-width: 1200px;
}

#recruitBox {
  position: relative;
  padding: 50px;
}
#recruitBox::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100%;
  background-color: #eaeaea;
  border-radius: 30px;
}
#recruitBox>div {
  position: relative;
  z-index: 2;
}

#recruitBox>div>dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#recruitBox>div>dl>dt {
  width: 45%;
}

#recruitBox>div>dl>dd {
  width: calc(55% - 30px);
  margin-left: 30px;
}
#recruitBox>div>dl>dd p {
  text-align: justify;
}
#recruitBox>div>dl>dd .el_btm {
  margin: 15px auto 0 0;
}

@media screen and (max-width: 834px) {
#recruitBox {
  padding: 30px 15px;
}
#recruitBox::after {
  border-radius: 15px;
}
#recruitBox>div {
  max-width: 520px;
  margin: 0 auto;
}

#recruitBox>div>dl>dt {
  width: 100%;
}
#recruitBox>div>dl>dd {
  width: 100%;
  margin: 15px 0 0;
}
#recruitBox>div>dl>dd .el_btm {
  margin: 10px auto 0;
}
}