@charset "UTF-8";


main {
  background: transparent;
  padding-bottom: 0;
}


h1 {
  padding: 0;
  color: #000;
  font-size: 18px;
  background-color: transparent;
}

h2 {
  border: none;
  padding: 0;
  background-color: transparent;
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
}

/* 概要 */
.top_catch {
  margin: 70px 0 80px 0;
  overflow: hidden;
}
.top_catch p {
  font-weight: 700;
  margin: 0;
  text-align: right;
  color: #333;
  line-height: 1.4;
  font-size: min(5vw, 1.2rem);
  padding-right: 5vw;
}

.top_catch p:last-child {
  margin-top: 5vw;
  margin-right: 1.5vw;
}
/* 三重から始まる、信頼運送の力 */
.top_catch .main_text {
  color: var(--main_font);
  font-size: min(11.5vw, 5rem);
  margin-bottom: 0.5rem;
  line-height: 1.3;
  color: transparent;
}
 /* 「、」の空き調整 */
.top_catch .main_text:first-child {
  margin-right: -7vw;

}

.main_text span {
  opacity: 0;
  color: #ffc123;
}

/* スライダー */

.slide_area {
  width: 100vw;
  overflow: hidden;
  
}

.inner_slidebox {
  position: relative;
  padding-bottom: 8vw;
}

.inner_slidebox div {
  width: 66.5vw;
  right: -100vw;
  padding-right: 5vw;
  position: absolute;
  bottom: 0;
  transition: opacity 0.15s ease;
}

.inner_slidebox div img {
  margin-bottom: 0;
  object-fit: cover;
}

.inner_slidebox div.first_img {
  position: static;
}

.inner_slidebox div.second_img {
  right: -33.5vw;
}

.slide_effect {
  opacity: 0.7;
}




/* KANAZAWA LOGISTICS SERVICES */

.flow_text {
  width: 100vw;
  overflow: hidden;
  padding-top: 4.3vw;
  
}

.flow_text p {
  width: 150vw;
  display: flex;
  font-family: "Special Gothic Expanded One","Helvetica Neue", sans-serif;
  margin: 0;
  margin-bottom: -1px;
  font-size: 15vw;
  white-space: nowrap;
  line-height: 1;
 color: var(--main_color);
}

.flow_text p img {
  width: 100%;
  height: auto;
  will-change: transform;
  backface-visibility: hidden;
  margin-bottom: 0;
 
  
}

/* === 拠点 ============= */

.kyoten {
  padding-top: 10vw;
  background: linear-gradient(170deg, var(--main_color) 20%, var(--main_sub_color) 70%);
}

/* 日本地図 */
.map_area {
  position: relative;
  padding: 10%;
}

.map_area img {
  margin: 0;
}

.map_area .japan {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 15px #052d83);
}

.iga_point,
.kantou_point,
.iga,
.kantou {
  position: absolute;
}

.iga_point,
.kantou_point {
  transform: translate(-50%, -50%);
  width: 3%;
  height: 3%;
}

/* 伊賀の地点 */
.iga_point {
  top: 72%;
  left: 42.5%;
}
/* 関東の地点 */
.kantou_point {
  top: 65%;
  left: 61%;
}

/* 線 */
.map_area svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* 地名 */
.iga,
.kantou {
  transform: translate(0, -50%);
  list-style: none;
  color: #fff;
  font-size: min(4vw, 1.3rem);
  white-space: nowrap;
  margin: 0;
}

.iga li,
.kantou li {
  margin: 0;
  letter-spacing: 0.05em;
}

.iga li::before,
.kantou li::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin: -1.2vw 2vw auto 0;
}

.iga {
  top: 52%;
  left: 5%;
}

.kantou {
  top: 68%;
  left: 70%;
}

/* 拠点 animation */

.kyoten h2 {
  opacity: 0;
  transform: translateY(50px);
}

.kyoten.start_anime h2 {
  animation: kyoten_h2 0.5s ease both;
}

@keyframes kyoten_h2 {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.iga_point,
.kantou_point {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.kyoten.start_anime .iga_point,
.kyoten.start_anime .kantou_point {
  animation: fade_point 0.2s ease 0.5s both;
}

.kyoten.start_anime .kantou_point {
  animation-delay: 2.1s;
}

@keyframes fade_point {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.iga_line,
.kantou_line {
  stroke-dasharray: 400 400;
  stroke-dashoffset: 400;
}

.kyoten.start_anime .iga_line,
.kyoten.start_anime .kantou_line {
  animation: flow_line 2s ease 0.8s both;
}

.kyoten.start_anime .kantou_line {
  animation-delay: 2.2s;
}

@keyframes flow_line {
  0% {
    stroke-dashoffset: 400;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.iga li,
.kantou li {
  opacity: 0;
}


.kyoten.start_anime .iga li,
.kyoten.start_anime .kantou li {
  animation: fade_location 0.5s ease 1.3s both;
}

.kyoten.start_anime .iga li:last-child {
  animation-delay: 1.5s;
}

.kyoten.start_anime .kantou li {
  animation-delay: 2.5s;
  animation-duration: 0.7s;
}


@keyframes fade_location {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}






/* === 輸送と倉庫 ============= */

.annai div:has(p) {
  padding: 0 15px;
}

.annai h2 {
  font-size: 2rem;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  color: var(--main_color);
}

.annai img {
  margin-bottom: 0;
}


/* === ボタン =============== */

.btn {
  margin-top: 30px;
  text-align: center;
}




/* KANAZAWA LOGISTICS SERVICES */
/* .top_catch_e {
  margin: 100px 0 60px 0;
  text-align: center;
  color: #fff;
  line-height: 1.2;
  font-size: 5vw;
} */

/* === ニュース =============== */

.news {
  background-color: var(--accent_color);
  padding: 30px 0 0;
}

.news .btn {
  margin-bottom: 0;
}

.news .btn a {
  border: #333 1px solid;
  background-color: #fff;
  color: #000;
}

.news .btn a::after {
  background-image: url(images/link_arrow03.svg);
}

.news h2 {
  font-family: "Special Gothic Expanded One","Helvetica Neue", sans-serif;
  font-size: min(12vw, 3rem);
  line-height: 1;
  margin: 0;
  margin-bottom: 1.5rem;
}

.date {
  color: #888;
}

.news .container>div {
  background-color: #fff;
  padding: 0 20px 2rem;
}

.news_container:first-child {
  margin-top: 0;
}

.news_container:not(:last-child) {
  border-bottom: 1px solid var(--accent_color);
}

.news_container {
  line-height: 1.6;
}

.news_container .white_link a:link,
.news_container .white_link a:visited {
  color: 333;
}
.news_container .white_link a:hover,
.news_container .white_link a:active {
  color: #333;
}

/* === 求人情報 ============ */
.recruit {
  text-align: center;
  background-color: var(--accent_color);

}

.recruit .container {
  padding: 30px 0 50px;
  margin: 0 15px;
}

.recruit p {
  color: #fff;
}
.recruit .catch {
  font-size: 8vw;
  margin-top: 2rem;
  font-weight: 700;
}

.recruit .btn a {
  background-color: #fff;
}

.recruit .btn a::after {
  background-image: url(images/link_arrow03.svg);
}

.recruit .btn a:link,
.recruit .btn a:visited {
  color: #333;
}

@media (min-width:750px) {

  main {
    padding-bottom: 0;
  }

  /* 概要 */

  .top_catch {
    margin: 7vw 0 12vw 0;
  }
  .top_catch p { 
    font-size: 2vw;
    padding-right: 6vw;
    letter-spacing: 0.05em;
  }

  .top_catch p:last-child {
    margin-top: 4vw;
  }
/* 三重から始まる、信頼運送の力 */
  .top_catch .main_text {
    font-size: 9vw;
    margin-bottom: 0.5rem;
  }

  /* 「、」の空き調整 */
  .top_catch .main_text:first-child {
    margin-right: -6vw;
  }
  
  /* KANAZAWA LOGISTICS SERVICES */
.flow_text p {
  width: 170vw;
}
 

/* === 拠点 ============= */

.kyoten {
  position: relative;
  padding: 0;
}

.kyoten h2 {
  text-align: left;
  position: absolute;
  top: 3.5vw;
  left: 8vw;
  font-size: 3.6vw;
}

/* 日本地図 */
.map_area {
  width: 65vw;
  height: 65vw;
  margin-left: auto;
  padding: 5vw;
}

/* 地名 */
.iga,
.kantou {
  font-size: 1.7vw;
}

.iga li::before,
.kantou li::before {
  width: 1vw;
  height: 1vw;
  margin: -1.5vw 1.5vw auto 0;
}

.iga {
  top: 53%;
}

.kantou {
  top: 71%;
  left: 77.5%;
}

  /* === 輸送と倉庫 ============= */

  .annai h2 {
  margin-top: 1.5rem;
  font-size: 2.3rem;
  margin-bottom: 0.5rem;
}

  .annai {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .annai div:has(p) {
    align-self: center;
    padding: 0 20px;
  }

  .annai div:nth-child(3) {
    grid-column: 2 / 3;
  }

  .annai div:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .annai img {
    height: 100%;
   object-position: center;
    object-fit: cover;
  }

  /* === ニュース =============== */

  .news {
    padding: 55px 0;
  }

  .news .container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    
  }

  .news .container>div {
    padding: 5px 30px 2rem;
    width: 70%;
  }

  .news_container {
    padding: 25px 0;
  }

  .data_container {
margin-bottom: 0;
  }
  

  /* === 求人情報 ============ */

  .recruit .container {
    border-top: 2px solid #fff;
    padding: 0 0 45px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .recruit p {
    text-align: left;
    margin-bottom: 0;
  }

  .recruit .catch {
    font-size: 2.5rem;
    grid-column: 1 / 3;
    margin-bottom: 0.5rem;
  }
  .recruit .btn {
    margin-top: 0;
  }
}

@media (min-width:1025px) {



  /* === 輸送と倉庫 ============= */
  .annai h2 {
    margin-top: 3vw;
    margin-bottom: 2vw;
    font-size: min(3.5vw, 2.6rem);
  }
  .annai div:has(p) {
    padding: 0 7vw;
  }

  .annai p {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
  }

    /* === ニュース =============== */

    .news h2 {
      font-size: 4rem;
    }
  
  /* === 求人情報 ============ */

  .recruit .container {
    width: calc(100% - 30px);

  }


  

}

@media (min-width:1055px) {
  main .container {
    padding: 0 15px;
  }

    /* === ニュース =============== */
  .news .container {
    padding: 0;
  }

  /* === 求人情報 ============ */

  .recruit .container {
    width: 1025px;
    margin: 0 auto;
  }

}

@media (min-width:1200px) {
/* === 輸送と倉庫 ============= */


}