@charset "utf-8";
/* CSS Document */
*, *::before, *::after {
  box-sizing: border-box;
}
/*ここからリセットCSS*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
  text-align: left;
  zoom: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
table {
  border-collapse: collapse;
  font-family: inherit;
}
h1, h2, h3, h4, h5 {
  font-size: 100%;
  font-weight: normal;
  line-height: 1;
}
input, textarea, select {
  font-family: inherit;
  font-size: 16px;
}
input[type="button"], input[type="text"], input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
textarea {
  resize: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
th, td {
  border-collapse: collapse;
}
table th, table td {
  white-space: nowrap;
}
ul, ol {
  list-style-type: none;
}
img {
  vertical-align: text-bottom;
  vertical-align: -webkit-baseline-middle;
  max-width: 100%;
  height: auto;
  width /***/ : auto;
}
/*ここまでリセットCSS*/
/*ここから全体設定＋共通設定*/
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.container {
  width: 100%;
}
.br-mobile {
  display: none;
}
@media (max-width: 768px) {
  .container {
    width: 100%;
    max-width: 992px;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
  }
  .br-mobile {
    display: inline;
  }
}
/*ここからファーストビューのCSS*/
.agv_top {
  clear: both;
  position: relative;
  /* width: 100%;*/
  overflow: hidden;
  background: url("../images/AGV_top.png") center/cover no-repeat;
}
/* 背景をぼかす層（擬似要素） */
.agv_top::before {
  content: "";
  position: absolute;
  inset: -30px; /* ぼかしのはみ出し対策 */
  background: url("../images/AGV_top.png") center/cover no-repeat;
  filter: blur(15px);
  transform: scale(1.15); /* ぼかしで端が薄くなるのを防ぐ */
  opacity: 0.9; /* 濃さ調整 */
  z-index: 0;
}
/* 上に載る本体画像 */
.agv_topPicture {
  position: relative;
  z-index: 1;
}
.agv_topPicture img {
  display: block;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
/*ここまでファーストビューのCSS*/
/*ここから「その搬送、まだ人がやりますか？」のCSS*/
/*セクション全体の背景グラデーション */
.feature-section {
  background: linear-gradient(to bottom, #f5f7f9 0%, #fcfdfd 100%);
}
.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
}
.hero-content {
  padding: 40px 0 0 5%;
}
.hero-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  color: #547ba8;
  margin: 0 0 20px;
}
.hero-text {
  font-size: 1rem;
  line-height: 1.7;
}
.hero-image {
  text-align: center;
  width: 90%;
}
.hero-image img {
  width: 100%;
  display: inline-block;
  max-width: 640px;
}
/* レスポンシブ */
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    gap: 24px;
    padding-inline: 16px;
  }
  .hero-title {
    text-align: left;
  }
  .hero-text {
    text-align: left;
  }
}
/*ここまで「その搬送、まだ人がやりますか？」のCSS*/
/*ここから「実は多くの企業がこんな課題を抱えています」のCSS*/
/* セクション全体 */
.problem-section {
  padding: 80px 0 0;
  text-align: center;
}
.problem-section h3 {
  margin: 0 0 30px;
  font-size: 1.5rem;
  line-height: 1.8;
  font-weight: 500;
  color: #547ba8;
  text-align: center;
}
.problem-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.problem-item {
  background: #ffffff;
  border-radius: 5px;
  padding: 15px 20px 15px;
  box-shadow:
    0 2px 6px rgba(183, 227, 240, 0.4), /* 上の塗り #b7e3f0 / 40% */ 0 5px 12px rgba(173, 191, 216, 0.08); /* 下の塗り #adbfd8 / 8% */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 290px;
}
.problem-item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 6px;
}
.problem-item p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}
.problem-item p span {
  color: #547ba8;
}
/* レスポンシブ */
@media (max-width: 768px) {
  .problem-section {
    padding: 60px 5% 10px;
  }
  .problem-list {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .problem-item {
    max-width: 100%;
  }
}
/*ここまで「実は多くの企業がこんな課題を抱えています」のCSS*/
/*ここから導入後フォローセクションのCSS*/
.support-section {
  padding: 60px 5%;
  text-align: center;
}
.support-section h3 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2;
  margin: 0 0 30px;
  position: relative;
  display: inline-block;
  text-align: center;
}
/* 逆三角形 */
.support-section h3::before {
  content: "";
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 35.6px;
  height: 20px;
  background: linear-gradient(180deg, #a8d7e8 16.6211%, #8da3c4 78.4887%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.support-card-wrap {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.support-card-wrap::before {
  content: "";
  position: absolute;
  inset: -1px; /* 外側だけ光らせる */
  background: linear-gradient(-45deg, rgba(84, 123, 168, 0.5), rgba(65, 156, 192, 0.3));
  filter: blur(6px);
  z-index: 0;
}
.support-card {
  position: relative;
  background: #ffffff;
  padding: 28px 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  z-index: 1;
  max-width: 1000px;
}
.support-card img {
  width: 38%;
  height: auto;
  flex-shrink: 0;
  object-fit: cover;
}
.support-card-body {
  text-align: left;
}
.support-card-body h4 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  line-height: 1.8;
  font-weight: 700;
  background: linear-gradient(90deg, #547ba8, #89bcd6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.support-card-body p {
  font-size: 1rem;
  line-height: 1.6;
}
/* レスポンシブ */
@media (max-width: 768px) {
  .support-section {
    padding: 60px 5% 40px;
  }
  .support-section h3 {
    font-size: 1.3rem;
  }
  .support-card {
    flex-direction: column;
    padding: 24px 20px 28px;
  }
  .support-card img {
    width: 100%;
  }
  .support-card-body {
    text-align: left;
  }
  .support-card-body h4 {
    font-size: 1.3rem;
  }
}
/*ここまで導入後フォローセクションのCSS*/
/*ここからAGVソリューションが選ばれる理由のCSS*/
/* ▼ セクション全体 */
.reason-section {
  background: #f5f7f9;
  padding: 80px 5% 100px;
  text-align: center;
}
.reason-section h3 {
  text-align: center;
  margin: 0 0 40px;
  font-size: 1.2rem;
  line-height: 1.8;
  font-weight: 500;
  position: relative;
}
.reason-section h3 span {
  color: #547ba8;
  font-weight: 700;
  font-size: 1.8rem;
}
/* 下線 */
.reason-section h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  width: 100px;
  height: 1.2px;
  background: #547ba8;
}
/* ふわっとした白いカード */
.panel-softshadow {
  background: #ffffff;
  box-shadow:
    0 2px 6px rgba(183, 227, 240, 0.4), /* 上の塗り #b7e3f0 / 40% */ 0 5px 12px rgba(173, 191, 216, 0.08); /* 下の塗り #adbfd8 / 8% */
}
/* REASON リスト */
.reason-list {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.reason-card {
  display: flex;
  justify-content: center;
  gap: 35px;
  padding: 30px 32px;
  align-items: center;
}
/* 左右反転用（2,4個目） */
.reason-card--reverse {
  flex-direction: row-reverse;
  align-items: center;
}
.reason-card__body {
  flex: 1;
}
.reason-card__image {
  flex: 0 0 45%;
}
.reason-card__image img {
  width: 100%;
  object-fit: cover;
}
/* REASONラベル */
.reason-label {
  display: inline-block;
  position: relative;
  padding: 0 5px;
  font-size: 0.65rem;
  line-height: 0.75;
  font-weight: 500;
  text-transform: uppercase;
  color: #547ba8 !important;
  background: #ffff;
  z-index: 0;
}
.reason-label span {
  background: linear-gradient(90deg, #547ba8, #a8d7e8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.reason-label::before {
  content: "";
  position: absolute;
  inset: 0; /* ラベルと同じ大きさ */
  padding: 1px; /* 枠の太さ*/
  background: linear-gradient(90deg, #547ba8, #a8d7e8);
  -webkit-mask:
    linear-gradient(#ffff 0 0) content-box, linear-gradient(#ffff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.reason-card__body h5 {
  margin: 8px 0;
  font-size: 1.4rem;
  line-height: 1.7;
  font-weight: 500;
}
.reason-card__body p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .reason-section {
    padding: 40px 5%;
  }
  .reason-card, .reason-card--reverse {
    flex-direction: column;
    padding: 20px 18px 24px;
  }
  .reason-card__image {
    flex-basis: auto;
  }
}
/*ここまでAGVソリューションが選ばれる理由のCSS*/
/*ここから活用シーンのCSS*/
/* セクション全体 */
.utilization-section {
  padding: 80px 5%;
  text-align: center;
}
.utilization-section h3 {
  margin: 0 0 24px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #547ba8;
  position: relative;
  text-align: center;
}
.utilization-section h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 100px;
  height: 1.2px;
  background: #547ba8;
}
.utilization-section > p {
  margin: 35px 0 40px;
  font-size: 1rem;
  text-align: center;
}
.utilization {
  align-items: stretch;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.utilization1, .utilization2 {
  display: flex;
  flex: 1 1 300px;
  padding: 15px;
  flex-direction: column;
  border-radius: 5px;
  background: #ffffff;
  text-align: center;
  position: relative;
  align-items: center;
  justify-content: center;
  max-width: 426px;
  box-shadow:
    0 2px 6px rgba(183, 227, 240, 0.4), 0 5px 12px rgba(173, 191, 216, 0.08), 0 16px 30px rgba(173, 191, 216, 0.14), 0 -6px 16px rgba(183, 227, 240, 0.18);
}
.utilization1 img {
  width: 35%;
  margin-bottom: 18px;
}
.utilization2 img {
  width: 20%;
  margin-bottom: 18px;
}
.utilization1 h6, .utilization2 h6 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #547ba8;
  text-align: center;
}
.utilization1 p, .utilization2 p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}
/* レスポンシブ */
@media (max-width: 768px) {
  .utilization-section {
    padding: 50px 5%;
  }
  .utilization {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .utilization1, .utilization2 {
    flex: 1 1 320px;
    max-width: 380px;
    box-sizing: border-box;
    min-height: 320px;
    width: min(380px, 100%);
    padding: 25px;
  }
}
/*ここまで活用シーンのCSS*/
/*ここから導入事例のCSS*/
/* 導入事例セクション全体 */
.case-section {
  background: #f5f7f9;
  padding: 80px 5% 40px;
}
.case-top {
  display: flex;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.case-title {
  flex: 1;
}
.case-section h3 {
  position: relative;
  margin: 0 0 50px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #547ba8;
  text-align: center;
}
.case-section h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 100px;
  height: 1.2px;
  background: #547ba8;
}
/* EXAMPLEラベル */
.case-label {
  display: inline-block;
  padding: 3px 15px 3px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  /* 右上だけカットする（平行四辺形） */
  clip-path: polygon(0% 0%, /* 左上 */ 90% 0%, /* ←右上を少し左へ */ 100% 100%, /* 右下 */ 0% 100% /* 左下 */
    );
  background: linear-gradient(90deg, #8da3c4, #a8d7e8);
  color: #ffffff !important;
}
.case-section h4 {
  margin: 12px 0;
  font-size: 2.1rem;
  line-height: 1.8;
  font-weight: 800;
  background: linear-gradient(90deg, #547ba8, #419cc0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.case-section > p {
  font-size: 1rem;
  line-height: 1.6;
}
.case-image {
  flex: 1;
  text-align: right;
}
.case-image img {
  width: 100%;
  max-width: 500px;
}
.case-assignment {
  padding: 5px 25px;
  margin: 30px auto 0;
  max-width: 1000px;
}
.case-solution {
  padding: 5px 25px 35px;
  margin: 30px auto;
  max-width: 1000px;
}
.case-assignment p {
  font-size: 1rem;
  line-height: 1.6;
}
.case-section h5 {
  position: relative;
  padding-left: 14px;
  font-size: 1.5rem !important;
  font-weight: 600;
  color: #547ba8;
}
/* 左側のバー */
.case-section h5::before {
  content: "";
  position: absolute;
  left: 0;
  width: 8px;
  height: 1.7rem;
  background: #547ba8;
}
/*点線*/
.dotted-line {
  border-bottom: 2px dotted #547ba8;
  width: 100%;
  margin: 20px 0;
}
.case-section h6 {
  position: relative;
  padding-left: 38px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #547ba8;
  margin: 10px 0 12px;
}
/* 導入の目的（チェックリストアイコン） */
.case-section h6.purpose::before {
  content: "";
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  background: url("../images/icon_checklist.png") no-repeat center / contain;
}
/* 導入効果（電球アイコン） */
.case-section h6.effect::before {
  content: "";
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  background: url("../images/icon_light-bulb.png") no-repeat center / contain;
}
.case-section h5, .case-section h6 {
  margin: 22px 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #547ba8;
}
/* リスト（チェックアイコン付き）*/
.case-list {
  margin: 0 0 24px;
  padding-left: 0;
  list-style: none;
}
.case-list li {
  position: relative;
  padding-left: 26px;
  font-size: 1rem;
  line-height: 1.8;
}
.case-list li span {
  color: #547ba8;
}
.case-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;
  background: url("../images/icon_check.png") no-repeat center / contain;
}
.diagram {
  max-width: 966px;
  margin: 0 auto;
}
.diagram p {
  color: #547ba8;
  font-weight: 500;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .case-top {
    flex-direction: column;
    align-items: stretch;
  }
  .case-section {
    padding: 60px 5% 40px;
  }
  .case-section h4 {
    font-size: 1.8rem;
  }
  .case-title {
    margin-bottom: 20px;
    text-align: left;
    width: 100%;
  }
  .case-image img {
    max-width: none;
    display: block;
  }
}
/*ここまで導入事例のCSS*/
/*ここからお問い合わせのCSS*/
/* お問い合わせセクション全体 */
.contact-section {
  text-align: center;
  padding: 70px 16px;
}
.contact-section h3 {
  margin: 0 0 25px;
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 500;
  color: #547ba8;
  text-align: center;
}
.contact-section > p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 40px;
  text-align: center;
}
.contact-box-wrap {
  align-items: stretch;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.contact-box {
  display: flex;
  flex: 1 1 300px;
  padding: 15px;
  flex-direction: column;
  border-radius: 5px;
  background: #ffffff;
  text-align: center;
  position: relative;
  align-items: center;
  justify-content: center;
  max-width: 426px;
  box-shadow:
    0 2px 6px rgba(183, 227, 240, 0.4), 0 5px 12px rgba(173, 191, 216, 0.08), 0 16px 30px rgba(173, 191, 216, 0.14), 0 -6px 16px rgba(183, 227, 240, 0.18);
}
.contact-box > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 100%;
  color: inherit;
}
.contact-box img {
  width: 50px;
  height: auto;
  margin-bottom: 16px;
}
.contact-box h4 {
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
}
.contact-box p {
  margin: 4px 0;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  color: black !important;
}
.contact-box a {
  text-decoration: none;
  transition: opacity .3s;
  color: inherit;
}
.contact-box:hover a {
  opacity: 0.6;
}
.tel {
  color: #547ba8;
  font-weight: 600;
}
.telNo a {
  color: #547ba8 !important;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 600;
}
/*  スマホレイアウト */
@media (max-width: 768px) {
  .contact-section {
    padding: 60px 5%;
  }
  .contact-box-wrap {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  .contact-box {
    flex-basis: 100%;
    max-width: 350px;
    box-sizing: border-box;
    min-height: 200px;
    width: min(300px, 100%);
    padding: 25px;
  }
}
/*ここまでお問い合わせのCSS*/