@charset "utf-8";

/* ----- intro ----- */
.intro_box{
  text-align: center;
}
.txt_big_01{
  color: #A6C3DB;
}
.txt_big_02{
  color: #6A9BC3;
}


/* ----- item ----- */
/* ----- tab ----- */
.item{
  overflow: hidden;
}
.item .item_box{
  width: 50%;
  margin: 200px auto 300px auto;
}
.item_box{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 1.5rem;
}
.item_box_agv{
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: '. agv01 agv02 agv03 .';
}
.item_box a{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.agv01{
  grid-area: agv01;
}
.agv02{
  grid-area: agv02;
}
.agv03{
  grid-area: agv03;
}
.item_box a img{
  width: 100%;
  min-width: 100px;
  max-width: 150px;
  border-radius: 100%;
  transition: 0.3s;
  filter: brightness(0.7);
}
.item_box a:hover img, .item_box a.active img{
  filter: brightness(1);
}
.item_box a span{
  margin-top: 1rem;
  color: #A6C3DB;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  word-wrap: break-word;
  transition: 0.3s;
}
.item_box a:hover span, .item_box a.active span{
  color: #ffffff;
}
@media (max-width: 1400px){
  .item .item_box{
    width: 60%;
  }
}
@media (max-width: 1100px){
  .item .item_box{
    width: 70%;
  }
  .item_box a span{
    font-size: 1rem;
  }
}
@media (max-width: 1000px){
  .item .item_box{
    width: 80%;
  }
}
@media (max-width: 1000px){
  .item_box{
    grid-template-columns: repeat(3, 1fr);
  }
  .item_box_agv{
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'agv01 agv02 agv03';
  }
}
@media (max-width: 500px){
  .item_box{
    grid-column-gap: 0.5rem;
    grid-row-gap: 1.1rem;
  }
  .item_box a img{
    min-width: 70px;
  }
  .item_box a span{
    width: 70px;
    margin-top: 0.8rem;
    font-size: 0.8rem;
  }
}


/* ----- detail_box ----- */
.detail_title, .detail_video, .detail_list, .detail_name, .detail_spec{
  margin-bottom: 400px;
}

/* detail_title */
.title_box_row{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.title_box_row .title_img_box{
  width: 75%;
  margin: 150px 0 80px 0;
  display: flex;
  justify-content: end;
}
.title_box_row .title_img_box img{
  width: 49%;
}

.title_box_column{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.title_box_column .column{
  width: 48%;
}
.title_box_column .column01{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: first baseline;
}
.title_box_column .column_txt{
  display: flex;
  align-items: end;
}
.title_box_column .column_txt .txt_big{
  margin-top: auto;
}
.title_box_column .column .title_img_box{
  width: 75%;
}
.title_box_column .column01 .title_img_box{
  margin-left: auto;
}
.title_box_column .column .title_img_box img{
  width: 100%;
}

.detail_box h1{
  line-height: 1;
  font-size: 5rem;
  font-weight: 800;
}
.detail_title .txt_big{
  width: 50%;
  margin-left: auto;
  color: #6A9BC3;
}
.detail_title .column .txt_big{
  width: 100%;
}

.detail_title_txtonly{
  text-align: center;
}
.detail_title_txtonly .txt_big{
  width: 100%;
  margin: 2rem auto 3rem auto;
}

@media (max-width: 1400px){
  .title_box_row{
    flex-direction: column;
    justify-content: space-between;
  }
  .title_box_row .title_img_box{
    width: 100%;
    margin: 100px 0 80px 0;
  }
  .title_box_column .column .title_img_box{
    width: 85%;
  }
  .detail_box h1{
    font-size: 4rem;
  }
  .detail_title .txt_big{
    width: 60%; 
  }
}
@media (max-width: 1100px){
  .title_box_row .title_img_box{
    margin: 80px 0 50px 0;
  }
  .detail_box h1{
    font-size: 3.5rem;
  }
}
@media (max-width: 900px){
  .title_box_row .title_img_box{
    margin: 50px 0;
  }
  .title_box_column{
    flex-direction: column;
    align-items: center;
  }
  .title_box_column .column{
    width: 100%;
  }
  .title_box_column .column01{
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .title_box_column .column .title_img_box{
    width: 80%;
    margin: 0 auto;
  }
  .title_box_column .column01 .title_img_box{
    margin: 2rem auto 0 auto;
  }
  .detail_box h1{
    line-height: 1.2;
    font-size: 3rem;
    text-align: center;
  }
  .detail_title .txt_big{
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 600px){
  .detail_title_txtonly .txt_small{
    width: 70%;
    margin: auto;
  }
}

/* detail_image */
.detail_image{
  width: 70%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.detail_image .image_box{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.detail_image .image_box img{
  width: 90%;
}
.detail_image .txt_big{
  text-align: center;
}
@media (max-width: 1100px){
  .detail_image{
    width: 80%;
  }
}
@media (max-width: 900px){
  .detail_image{
    width: 100%;
  }
}
@media (max-width: 600px){
  .detail_image{
    width: 80%;
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 3rem;
  }
}

/* detail_video */
.detail_video video{
  width: 100%;
  min-height: 100%;
  height: auto;
  filter: brightness(0.5);
  z-index: 0;
}

/* detail_list */
.detail_story{
  margin: 300px 0;
}
.detail_list p{
  text-align: center;
}
.detail_list .txt_big{
  margin-bottom: 1.1rem;
}
.detail_story_agv .txt_big{
  margin-bottom: 0;
}

.chat_img_box{
  width: 100%;
  display: flex;
  justify-content: center;
}
.chat_img_box img{
  width: 30%;
  margin: 3rem auto auto auto;
}
@media (max-width: 1100px){
  .chat_img_box img{
    width: 50%;
  }
}
@media (max-width: 700px){
  .chat_img_box img{
    width: 70%;
  }
}
@media (max-width: 300px){
  .chat_img_box img{
    width: 90%;
  }
}

/* detail_name */
.detail_part{
  width: 100%;
  height: auto;
}
.img_part_box{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: 'right front back left';
}
.detail_part02 .img_part_box{
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 'front back left';
}
.img_part_box img{
  width: 100%;
}
.img_part_right{
  grid-area: right;
}
.img_part_front{
  grid-area: front;
}
.img_part_back{
  grid-area: back;
}
.img_part_left{
  grid-area: left;
}
@media (max-width: 1100px){
  .img_part_box{
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 'front back'
                          'right left';
  }
  .detail_part02 .img_part_box{
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 'front back' 'left .';
  }
}
@media (max-width: 500px){
  .img_part_box{
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 'front' 'back'
                          'right' 'left';
  }
  .detail_part02 .img_part_box{
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 'front' 'back' 'left';
  }
}

/* detail_skill */
.detail_skill{
  margin: 400px auto;
}
.detail_skill .txt_big{
  text-align: center;
}
.detail_skill .skill_story{
  margin: 150px auto;
}
.skill_title{
  margin-bottom: 3rem;
  color: #6A9BC3;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}
.detail_skill .skill_box{
  width: 700px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}
.detail_skill .skill_box > div{
  width: 100%;
  height: 100%;
  padding: 1.6rem 2rem;
  border-radius: 1.5rem;
  background-color: #A6C3DB;
}
.detail_skill .skill_box .skill_blue{
  background-color: #6A9BC3;
}
.detail_skill .skill_box .txt_small{
  margin-bottom: 0.5rem;
  background-color: transparent;
  font-weight: 700;
}
.detail_skill .skill_sky .txt_small{
  color: #1E2930;
}
.detail_skill .skill_blue .txt_small{
  color: #ffffff;
}
.detail_skill .skill_box .txt_tiny{
  background-color: transparent;
  font-size: 0.8rem;
}
.detail_skill .skill_sky .txt_tiny{
  color: #1E2930;
}
@media (max-width: 1100px){
  .detail_skill .skill_box{
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px){
  .detail_skill .skill_box{
    width: 70%;
    grid-template-columns: repeat(1, 1fr);
  }
}

/* detail_spec */
.detail_spec{
  display: flex;
  align-items: end;
}
.detail_spec .spec_ul{
  width: 40%;
}
.detail_spec .spec_ul li{
  line-height: 3;
}
.detail_spec .spec_ul li p{
  color: #6A9BC3;
  font-weight: 700;
}
.detail_spec .spec_ul li span{
  margin-right: 1rem;
  font-weight: 700;
  display: inline-block;
}
.detail_spec .spec_ul li.spec_space{
  height: 3rem;
}
@media (max-width: 1400px){
  .detail_spec .spec_ul{
    width: 50%;
  }
}
@media (max-width: 900px){
  .detail_spec{
    flex-direction: column;
    align-items: start;
  }
  .detail_spec .spec_ul{
    width: 100%;
  }
}

/* detail_software */
.detail_software{
  width: 60%;
  padding-top:300px;
  margin: 5rem auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  border-top: 1px solid #6A9BC3;
  position: relative;
}
.detail_software::after{
  content: '';
  width: 1px;
  background-color: #6A9BC3;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: footer_ani 5s infinite linear;
}
@keyframes footer_ani{
  0%{
    height: 50px;
  }
  70%{
    height: 80px;
  }
  100%{
    height: 50px;
  }
}
.amrsw_hw, .amrsw_sw, .amrsw_amr{
  width: 12rem;
  height: 12rem;
  padding: 2rem;
  margin: auto;
  border: 2px solid #A6C3DB;
  border-radius: 100%;
}
.amrsw_sw{
  border: none;
  background-color: #A6C3DB;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.amrsw_hw span, .amrsw_sw span, .amrsw_amr span{
  width: fit-content;
  margin: 0 auto;
  color: #A6C3DB;
  background-color: transparent;
  font-weight: 700;
  text-align: center;
  display: flex;
}
.amrsw_sw span{
  color: #fff;
}
.amrsw_hw img, .amrsw_amr img{
  width: 60%;
  margin: 1rem auto;
  display: flex;
}
.amrsw_sw_box{
  width: fit-content;
  height: inherit;
  margin: auto 0;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
}
.amrsw_sw_box span{
  width: 2.8rem;
  height: 2.8rem;
  line-height: 1.1;
  margin: auto 5px auto auto;
  background-color: #fff;
  border-radius: 100%;
  color: #A6C3DB;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.amrsw_sw_box span:last-child{
  margin: auto 0 auto auto;
}
.amrsw_arrow{
  width: 1rem;
  height: 1rem;
  margin: auto;
  position: relative;
}
.amrsw_arrow02{
  height: 0.6rem;
}
.amrsw_arrow::before, .amrsw_arrow::after{
  content: '';
  background-color: #A6C3DB;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.amrsw_arrow01::before{
  width: 3px;
  height: 100%;
}
.amrsw_arrow01::after,
.amrsw_arrow02::before, .amrsw_arrow02::after{
  width: 100%;
  height: 3px;
}
.amrsw_arrow02::before{
  top: 0;
}
.amrsw_arrow02::after{
  top: 100%;
}
.txt_small_sw{
  padding-bottom: 200px;
  text-align: center;
}

@media (max-width: 1700px){
  .detail_software{
    width: 70%;
  }
}
@media (max-width: 1500px){
  .amrsw_hw, .amrsw_sw, .amrsw_amr{
    width: 10rem;
    height: 10rem;
    padding: 1.5rem;
  }
  .amrsw_hw img, .amrsw_amr img{
    margin: 0.8rem auto;
  }
}
@media (max-width: 1300px){
  .detail_software{
    width: 80%;
  }
}
@media (max-width: 1100px){
  .detail_software{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: "hw arrow1"
                        "sw sw"
                        "arrow2 application";
    grid-row-gap: 1rem;
    align-items: center;
  }
  .amrsw_hw{grid-area: hw;}
  .amrsw_arrow01{grid-area: arrow1;}
  .amrsw_sw{grid-area: sw;}
  .amrsw_arrow02{grid-area: arrow2;}
  .amrsw_amr{grid-area: application;}
  .amrsw_robot em, .agv_skill_title{
    font-size: 1.5rem;
  }
}
@media (max-width: 700px){
  .detail_software{
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 1fr 0.4fr 1fr 0.4fr 1fr;
    grid-template-areas: "hw" "arrow1"
                        "sw" "arrow2"" application";
  }
}