@charset "UTF-8";
/* CSS Document */

/* manufacturing
-----------------------------------------------*/
#manufacturing #project .imgFlow {
  margin-top: 32px;
  border-radius: 16px;
  overflow: hidden;
}
#manufacturing #factory .ttl h2{
  font-size: 36px;
  font-weight: bold;
}
#manufacturing #support .ttl h2,
#manufacturing #rule .ttl h2,
#manufacturing #project .ttl h2{
  font-size: 32px;
  font-weight: bold;
}
#manufacturing #rule .checkColBox01 .col::before,
#manufacturing #project .checkColBox01 .col::before{
  display: none;
}
@media only screen and (max-width:767px) {
  #manufacturing #factory .ttl h2{
    font-size: 26px;
  }
#manufacturing #support .ttl h2,  
#manufacturing #rule .ttl h2,  
  #manufacturing #project .ttl h2{
    font-size: 20px;
  }
}

/* main
-----------------------------------------------*/
#main {
  background: #01305D;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 212px;
  height: 100%;
  padding: 8px 40px 0;
  color: #fff;
}
#main p {
  font-family: "Poppins", sans-serif;
  font-size: 45px;
  line-height: 1;
  font-weight: bold;
}
#main h1 {
  font-family: "Poppins", sans-serif;
  font-size: 45px;
  line-height: 1;
  font-weight: bold;
}
@media only screen and (max-width:767px) {
  #main {
    min-height: 114px;
    padding: 0 20px 20px;
  }
  #main p {
    font-size: 32px;
  }
  #main h1 {
    font-size: 14px;
    margin-top: 8px;
  }
}


/* mainIndex
-----------------------------------------------*/
#mainIndex {
  position: relative;
  background: #01305D;
  padding: 0 40px 0;
  color: #fff;
}
#mainIndex::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  background: #F6F7FA;
}
#mainIndex .inner {
  position: relative;
  z-index: 2;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 212px;
  padding-top: 8px;
}
#mainIndex p {
  font-family: "Poppins", sans-serif;
  font-size: 45px;
  line-height: 1;
  font-weight: bold;
}
#mainIndex h1 {
  font-family: "Poppins", sans-serif;
  font-size: 45px;
  line-height: 1;
  font-weight: bold;
}
#mainIndex .img {
  overflow: hidden;
  position: relative;
  z-index: 2;
  max-width: 1352px;
  margin: 0 auto;
  border-radius: 20px;
  height: 442px;
}
#mainIndex .img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width:767px) {
  #mainIndex {
    padding: 0 24px;
  }
  #mainIndex::before {
    height: 34px;
  }
  #mainIndex .inner {
    height: 114px;
    padding: 0 0 20px;
  }
  #mainIndex p {
    font-size: 32px;
  }
  #mainIndex h1 {
    font-size: 14px;
    margin-top: 8px;
  }
  #mainIndex .img {
    height: 272px;
  }
}


/* lead
-----------------------------------------------*/
#lead p {
  text-align: center;
  font-size: 22px;
  font-weight: normal;
  line-height: 160%;
}
@media only screen and (max-width:767px) {
  #lead p {
    font-size: 18px;
  }
}


/* section
-----------------------------------------------*/
section {
  overflow: hidden;
  position: relative;
  padding: 80px 40px;
}
section::before {
  position: absolute;
  content: "";
  width: 1352px;
  height: 1px;
  background: #CCCCCC;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
#main + section::before,
#mainIndex + section::before {
  display: none;
}
section .inner {
  position: relative;
  max-width: 1024px;
  padding: 0;
  margin: 0 auto;
}
section .ttl h2,
section .ttl h3 {
  font-size: 36px;
  font-weight: bold;
}
section .ttl h2 span,
section .ttl h3 span {
  display: block;
  color: #B01A2E;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 8px;
}
section .ttl p {
  font-size: 16px;
  line-height: 160%;
  margin-top: 40px;
}
@media only screen and (max-width:767px) {
  section {
    padding: 48px 24px 48px;
  }
section .ttl h2,
section .ttl h3 {
  font-size: 26px;
}
}



/* ttlLine
-----------------------------------------------*/
.ttlLine:not(:first-child) {
  margin-top: 80px;
}
.ttlLine::before {
  display: none;
}
.ttlLine h2,
.ttlLine h3 {
  font-size: 32px;
  font-weight: bold;
  line-height: 160%;
  margin-top: 40px;
}
.ttlLine h2 span,
.ttlLine h3 span {
  display: block;
  font-family: Poppins;
  font-size: 12px;
  line-height: 120%;
  letter-spacing: 1.08px;
  color: #B01A2E;
}
.ttlLine p {
  font-size: 16px;
  line-height: 160%;
  margin-top: 16px;
}
@media only screen and (max-width:767px) {
  .ttlLine:not(:first-child) {
    margin-top: 60px;
  }
  .ttlLine h2,
  .ttlLine h3 {
    font-size: 22px;
    margin-top: 32px;
  }
}


/* cardColBox01
-----------------------------------------------*/
.cardColBox01:not(:first-child){
  margin-top: 40px;
}
.cardColBox02 {
  margin-top: 80px;
  margin-bottom: 20px;
}
#policy .cardColBox01 .col{
  align-items: flex-end;
}
.cardColBox01 .col,
.cardColBox02 .col {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.cardColBox01 .col:not(:first-child){
  margin-top: 56px;
}
.cardColBox01 .col .img {
  width: 50%;
  overflow: hidden;
  border-radius: 16px;
  max-width: 395px;
  margin: 0 auto;
}
.cardColBox01 .col .video video,
.cardColBox02 .col .video video{
  position: absolute;
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: 0;
}
.cardColBox01 .col .video,
.cardColBox02 .col .video{
  padding-top: 29.3%;
  position: relative;
}
.cardColBox02 .col .video,
.cardColBox01 .col .video,
.cardColBox02 .col .img {
  width: 48.05%;
  overflow: hidden;
  border-radius: 16px;
  max-width: 492px;
  margin: 0 auto;
}
#robotics .cardColBox01 .col .video {
  max-width: 395px;
  padding-top: 23.54%;
}
.cardColBox01 .col.colHalf .img {
  max-width: 492px;
}
.cardColBox01 .col .txt {
  width: 50%;
  flex: 1;
}
.cardColBox02 .col .txt {
  width: 51.95%;
  flex: 1;
}
.cardColBox02 .col .txt h3 {
  font-weight: bold;
}
.cardColBox02 .col .txt h3,
.cardColBox02 .col .txt p {
  font-size: 16px;
  line-height: 160%;
}
.cardColBox02 .col .txt p {
  margin-bottom: 24px;
}
.cardColBox01 .col .txt p {
  font-size: 16px;
  line-height: 230%;
}
.cardColBox01 .col .txt p span {
  font-weight: bold;
}
.cardColBox01 .col .txt p:not(:first-child) {
  margin-top: 24px;
}
#robotics .cardColBox01 .col .txt p:not(:first-child) {
  padding-bottom: 90px;
}
@media only screen and (max-width:767px) {
#robotics .cardColBox01 .col .txt p:not(:first-child) {
  padding-bottom: 0;
}
.cardColBox01 .col .video,
#robotics .cardColBox01 .col .video,
.cardColBox02 .col .video{
  padding-top: 60%;
}
  .cardColBox01 .col {
    flex-direction: column;
    gap: 32px;
  }
  .cardColBox01 .col .img {
    width: 100%;
    max-width: 100%;
    order: 1;
  }
  .cardColBox01 .col.colHalf .img {
    max-width: 100%;
  }
  .cardColBox01 .col .txt {
    width: 100%;
    order: 2;
  }
  .cardColBox02 .col {
    gap: 32px;
    flex-wrap: wrap;
  }
.cardColBox01 .col .video,
.cardColBox02 .col .video,
  .cardColBox02 .col .txt,
  .cardColBox02 .col .img {
    width: 100%;
    max-width: 100%;
  }
}


/* thumbList01
-----------------------------------------------*/
.thumbList01 {
  margin-top: 36px;
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr 1fr 1fr;
}
.thumbList01 .col .img {
  overflow: hidden;
  border-radius: 16px;
}
.thumbList01.colHalf {
  grid-template-columns: 1fr 1fr;
}
.thumbList01 .col .img img {
  width: 100%;
}
.thumbList01 .col h3 {
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0.8px;
  margin-top: 24px;
  text-align: center;
}
.thumbList01 .col p {
  font-size: 14px;
  line-height: 160%;
  margin-top: 16px;
  color: #314557;
}
@media only screen and (max-width:767px) {
  .thumbList01 {
    gap: 24px;
    grid-template-columns: 1fr;
  }
  .thumbList01.colHalf {
    grid-template-columns: 1fr;
  }
}


/* thumbList02
-----------------------------------------------*/
.thumbList02 {
  margin-top: 48px;
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr 1fr 1fr;
}
.thumbList02 .col .img {
  overflow: hidden;
  border-radius: 16px;
}
.thumbList02 .col .img img {
  width: 100%;
}
.thumbList02 .col h3 {
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0.8px;
  margin-top: 8px;
}
.thumbList02 .col p {
  font-size: 14px;
  line-height: 160%;
  margin-top: 4px;
  color: #314557;
}
@media only screen and (max-width:767px) {
  .thumbList02 {
    gap: 24px;
    grid-template-columns: 1fr;
  }
}


/* thumbList03
-----------------------------------------------*/
.thumbList03 {
  margin-top: 36px;
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.thumbList03 .col .img {
  overflow: hidden;
  border-radius: 16px;
}
.thumbList03 .col .img img {
  width: 100%;
}
.thumbList03 .col h3 {
  font-size: 20px;
  line-height: 140%;
  font-weight: normal;
  margin-top: 8px;
}
@media only screen and (max-width:767px) {
  .thumbList03 {
    gap: 24px;
    grid-template-columns: 1fr;
  }
}


/* thumbList04
-----------------------------------------------*/
.thumbList04 {
  margin-top: 36px;
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: baseline;
}
.thumbList04 .col {
  display: flex;
  flex-direction: column;
}
.thumbList04 .col .img {
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 15 / 11;
}
.thumbList04 .col .img img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.thumbList04 .col h3 {
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0.8px;
  margin-top: 8px;
  flex: 1;
}
.thumbList04 .col p {
  font-size: 14px;
  line-height: 160%;
  margin-top: 4px;
  color: #314557;
}
@media only screen and (max-width:767px) {
  .thumbList04 {
    gap: 24px;
    grid-template-columns: 1fr;
  }
}


/* thumbTagList
-----------------------------------------------*/
.thumbTagList {
  margin-top: 36px;
  display: grid;
  gap: 48px 26px;
  grid-template-columns: 1fr 1fr 1fr;
}
.thumbTagList .col .img {
  overflow: hidden;
  border-radius: 16px;
}
.thumbTagList .col .img img {
  width: 100%;
}
.thumbTagList .col .tag {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 5px 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.thumbTagList .col .tag li {
  font-size: 13px;
  line-height: 100%;
  letter-spacing: 0.65px;
}
.thumbTagList .col .tag li strong {
  border-radius: 40px;
  background: #90A5B9;
  color: #FFF;
  font-weight: normal;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.6px;
  display: flex;
  padding: 2px 10px 3px 10px;
  align-items: flex-start;
}
.thumbTagList .col h3 {
  color: #01305D;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0.9px;
  margin-top: 4px;
}
.thumbTagList .col p {
  font-size: 14px;
  line-height: 160%;
  margin-top: 4px;
}
@media only screen and (max-width:767px) {
  .thumbTagList {
    gap: 24px;
    grid-template-columns: 1fr;
  }
}


/* imgFull
-----------------------------------------------*/
.imgFull {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  margin-top: 40px;
}
.imgFull img {
  margin: 0 auto;
}
@media only screen and (max-width:767px) {
  .imgFull {
    padding: 12px;
  }
}


/* checkColBox01
-----------------------------------------------*/
.checkColBox01 {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 80px);
  left: -40px;
  gap: 40px 0;
  position: relative;
}
.checkColBox01:not(:first-child) {
  margin-top: 40px;
}
.checkColBox01 .col {
  width: 33.333%;
  padding: 0 40px;
  border-right: 1px solid transparent;
  border-image: linear-gradient(180deg, #1B1464 10px, #DEDEDE calc(0px), #DEDEDE calc(100% - 10px), #1B1464 10px) 1;
  display: flex;
  flex-direction: column;
}
.checkColBox01 .col.colHalf {
  width: 50%;
}
.checkColBox01 .col:nth-child(3n),
.checkColBox01 .col:last-child {
  border-right: none;
}
.checkColBox01 .col::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  background: url("/img/common/icon-check-circle.svg");
}
.checkColBox01 .col h3,
.checkColBox01 .col h4 {
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0.8px;
  margin-top: 12px;
}
.checkColBox01 .col p {
  font-size: 14px;
  line-height: 160%;
  margin-top: 12px;
  flex: 1;
}
.checkColBox01 .col ul {
  margin-top: 16px;
  list-style: circle;
}
.checkColBox01 .col ul li {
  font-size: 16px;
  line-height: 160%;
  margin-left: 1em;
  text-indent: -1em;
}
.checkColBox01 .col ul li::before {
  content: "・";
}
@media only screen and (max-width:767px) {
  .checkColBox01 {
    flex-direction: column;
    width: 100%;
    left: 0;
    gap: 0;
  }
  .checkColBox01:first-child .col:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
  .checkColBox01 .col {
    width: 100%;
    padding: 40px 0;
    border-top: 1px solid transparent;
    border-right: none;
    border-image: linear-gradient(90deg, #1B1464 10px, #DEDEDE calc(0px), #DEDEDE calc(100% - 10px), #1B1464 10px) 1;
  }
  .checkColBox01 .col.colHalf {
    width: 100%;
  }
  .checkColBox01 .col:last-child {
    padding-bottom: 0;
  }
}


/* checkColBox02
-----------------------------------------------*/
.checkColBox02 {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.checkColBox02:not(:first-child) {
  margin-top: 40px;
}
.checkColBox02 .col {
}
.checkColBox02 .col::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  background: url("/img/common/icon-check-circle.svg");
}
.checkColBox02 .col h3,
.checkColBox02 .col h4 {
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0.8px;
  margin-top: 12px;
}
.checkColBox02 .col p {
  font-size: 14px;
  line-height: 160%;
  margin-top: 12px;
  flex: 1;
}
.checkColBox02 .col ul {
  margin-top: 16px;
  list-style: circle;
}
.checkColBox02 .col ul li {
  font-size: 16px;
  line-height: 160%;
  margin-left: 1em;
  text-indent: -1em;
}
.checkColBox02 .col ul li::before {
  content: "・";
}
@media only screen and (max-width:767px) {
  .checkColBox02 {
    flex-direction: column;
    width: 100%;
    left: 0;
    gap: 0;
  }
  .checkColBox02:first-child .col:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
  .checkColBox02 .col {
    width: 100%;
    padding: 40px 0;
    border-top: 1px solid transparent;
    border-right: none;
    border-image: linear-gradient(90deg, #1B1464 10px, #DEDEDE calc(0px), #DEDEDE calc(100% - 10px), #1B1464 10px) 1;
  }
  .checkColBox02 .col.colHalf {
    width: 100%;
  }
  .checkColBox02 .col:last-child {
    padding-bottom: 0;
  }
}


/* molding
-----------------------------------------------*/
#molding #quality .box {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin-top: 40px;
}
#molding #quality .ttl h2 {
  font-size: 32px;
}
#molding #quality .box .img {
  overflow: hidden;
  border-radius: 16px;
  width: 36.76%;
  max-width: 340px;
}
#molding #quality .box .img img {
  height: 100%;
  width: 100%;
}
#molding #quality .box .listCol {
  width: 95.26%;
  display: flex;
  gap: 24px;
}
#molding #quality .box .txt {
  width: 60.54%;
  max-width: 560px;
}
#molding #quality .box .list {
  width: 100%;
  margin-top: 24px;
}
#molding #quality .box .list >  p {
  font-size: 24px;
  font-weight: 700;
  line-height: 100%;
}
#molding #quality .box .list >  p:not(:first-child) {
  margin-top: 40px;
}
#molding #quality .box .list ul {
  display: flex;
  flex-direction: column;
  gap: 40px;
  border-left: 1px solid #01305D;
  padding-left: 24px;
  margin-top: 16px;
}
#molding #quality .box .list ul li {
  display: flex;
  gap: 24px;
}
#molding #quality .box .list ul li span {
  min-width: 22px;
}
#molding #quality .box .list ul li .txt h3 {
  font-size: 16px;
  line-height: 130%;
  margin-bottom: 8px;
}
#molding #quality .box .list ul li .txt p {
  font-size: 16px;
  line-height: 160%;
  margin-top: 4px;
}
#molding #quality .box .list ul li .txt p span {
  font-weight: bold;
}
#molding #quality .thumbList01 {
  margin-top: 80px;
}
#molding #quality .imgFull {
  padding: 40px 70px;
}
@media only screen and (max-width:767px) {
#molding #quality .ttl h2 {
  font-size: 20px;
}
  #molding #quality .box {
    flex-direction: column;
    gap: 40px;
  }
  #molding #quality .box .img {
    width: 100%;
  }
  #molding #quality .box .list {
    width: 100%;
  }
#molding #quality .imgFull {
  padding: 10px;
}
  #molding #quality .box .list > p {
    font-size: 20px;
}
#molding #quality .box .listCol {
  width: 100%;
    flex-wrap: wrap;
      gap: 10px;
}
  #molding #quality .box .list ul{
    padding-left: 10px;
  }
  #molding #quality .box .list ul li{
    gap:10px;
  }
  #molding #quality .box .txt {
    width: 100%;
    max-width: 100%;
}
}




/* contact
-----------------------------------------------*/
#contact .info {
  margin-top: 48px;
  display: flex;
}
#contact .info .col {
  display: block;
  position: relative;
  padding: 0 3.91%;
  width: 33.33%;
  box-sizing: content-box;
}
#contact .info .col:first-child {
  padding-left: 0;
  border-right: 1px solid transparent;
  border-image: linear-gradient(180deg, #1B1464 10px, #DEDEDE calc(0px), #DEDEDE calc(100% - 10px), #1B1464 10px) 1;
}
#contact .info .col:last-child {
  padding-right: 0;
  border-left: 1px solid transparent;
  border-image: linear-gradient(180deg, #1B1464 10px, #DEDEDE calc(0px), #DEDEDE calc(100% - 10px), #1B1464 10px) 1;
}
#contact .info h3 {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
}
#contact .info p {
  margin-top: 16px;
  display: inline-block;
  font-size: 16px;
  line-height: 1.6;
}
#contact .info a {
  color: #01305D;
}
#contact .map {
  margin-top: 20px;
  width: 100%;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
}
#contact .map iframe {
  width: 100%;
  height: 100%;
}
@media only screen and (max-width:767px) {
  #contact .info {
    display: block;
  }
  #contact .info .col {
    width: 100%;
    padding: 24px 0 0 0;
    margin-top: 24px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, #1B1464 10px, #DEDEDE calc(0px), #DEDEDE calc(100% - 10px), #1B1464 10px) 1!important;
  }
  #contact .info .col:first-child {
    border-right: none;
  }
  #contact .info .col:last-child {
    border-left: none;
  }
  #contact .info h3 {
    margin-top: 8px;
  }
  #contact .info p {
    margin-top: 8px;
  }
}


/* index
-----------------------------------------------*/
/* lead */
#index #lead .inner {
  max-width: 1352px;
}
/* message */
#index #message .box {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
#index #message .box::before {
  content: "";
  position: absolute;
  left: -310px;
  bottom: -165px;
  z-index: -1;
  background-image: url("/img/business/index/item-message.svg");
  width: 672px;
  height: 582px;
  pointer-events: none;
}
#index #message .box .img {
  width: 50%;
  overflow: hidden;
  border-radius: 16px;
  max-width: 460px;
  margin: 0 auto;
}
#index #message .box .txt {
  width: 50%;
}
#index #message .box .txt h2 {
  font-size: 36px;
  line-height: 120%;
  font-weight: bold;
}
#index #message .box .txt h3 {
  font-size: 32px;
  line-height: 120%;
  font-weight: bold;
  margin-top: 37px;
}
#index #message .box .txt p {
  font-size: 16px;
  line-height: 230%;
  margin-top: 40px;
}
#index #message .bgBox {
  background: #fff;
  padding: 64px 24px 48px;
  border-radius: 16px;
  text-align: center;
  margin-top: 80px;
}
#index #message .bgBox .logo {
  width: 284px;
  margin: 0 auto;
}
#index #message .bgBox h2 {
  font-size: 26px;
  line-height: 160%;
  margin-top: 32px;
}
#index #message .bgBox h3 {
  font-size: 18px;
  line-height: 160%;
  letter-spacing: 0.9px;
  margin-top: 32px;
}
#index #message .bgBox p {
  font-size: 16px;
  line-height: 230%;
  margin-top: 24px;
}
#index #message .flow {
  margin-top: 40px;
}
#index #message .flow h3 {
  font-size: 26px;
  font-weight: normal;
  line-height: 160%;
}
#index #message .flow .img {
  margin-top: 20px;
}
@media only screen and (max-width:767px) {
#index #message .box .txt h2 {
  font-size: 26px;
}
#index #message .box .txt h3 {
  font-size: 20px;
  margin-top: 20px;
}
#index #message .box .txt p {
  margin-top: 20px;
}
  #index #message .box {
    flex-direction: column;
    gap: 32px;
  }
  #index #message .box::before {
    display: none;
  }
  #index #message .box .img {
    width: 100%;
    max-width: 100%;
    order: 1;
  }
  #index #message .box .txt {
    width: 100%;
    order: 2;
  }
  #index #message .bgBox {
    margin-top: 40px;
  }
  #index #message .bgBox .logo {
    width: 200px;
  }
  #index #message .bgBox h2 {
    font-size: 22px;
  }
  #index #message .bgBox p {
    text-align: left;
  }
#index #message .flow h3 {
  font-size: 20px;
}
}
/* value */
#index #value .ttl h2 {
  font-size: 24px;
}
#index #value .ttlLine h2 {
  font-size: 24px;
}
#index #value .colLineBox {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  position: relative;
  width: calc(100% + 60px);
  left: -30px;
}
#index #value .colLineBox:not(:first-child) {
  margin-top: 40px;
}
#index #value .colLineBox .col {
  position: relative;
  padding: 0 30px;
}
#index #value .colLineBox .col::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  background: url("/img/common/icon-check-circle.svg");
  margin: 0 auto;
}
#index #value .colLineBox .col:not(:last-child)::after {
  position: absolute;
  right: -5px;
  top: 0;
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: #01305D;
  transform: skew(-12deg);
}
#index #value .colLineBox .col h3 {
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0.8px;
  margin-top: 16px;
  text-align: center;
}
#index #value .colLineBox .col p {
  font-size: 14px;
  line-height: 160%;
  margin-top: 16px;
  color: #314557;
}
#index #value .imgFull {
  padding: 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}
@media only screen and (max-width:767px) {
  #index #value .colLineBox {
    grid-template-columns: 1fr;
    width: 100%;
    left: 0;
  }
  #index #value .colLineBox .col {
    padding: 0;
  }
  #index #value .colLineBox .col {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #01305D;
  }
  #index #value .colLineBox .col:first-child {
    margin-top: 0;
  }
  #index #value .colLineBox .col:not(:last-child)::after {
    display: none;
  }
}
/* standard */
#index #standard .box {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
#index #standard .box .txt {
  width: 50%;
}
#index #standard .box .txt p {
  font-size: 16px;
  line-height: 230%;
  margin-top: 40px;
}
#index #standard .box .img {
  width: 50%;
  position: relative;
  max-width: 460px;
  outline: #DEDEDE solid 1px;
  outline-offset: -1px;
}
#index #standard .box .img img {
  margin: 0 auto;
}
#index #standard .box .img::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  --x-gradient: linear-gradient(90deg, #1B1464 0 8px, transparent 0 calc(100% - 8px), #1B1464 calc(100% - 8px));
  --y-gradient: linear-gradient(#1B1464 0 8px, transparent 0 calc(100% - 8px), #1B1464 calc(100% - 8px));
  background-image: var(--x-gradient), var(--y-gradient), var(--x-gradient), var(--y-gradient);
  background-repeat: no-repeat;
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top, right, bottom, left;
  z-index: 1;
}
#index #standard .thumbList01 {
  margin-top: 80px;
}
#index #standard .bg{
  margin: 160px calc(50% - 50vw) 0;
  width: 100vw;
  height: 460px;
}
#index #standard .bg img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width:767px) {
  #index #standard .box {
    flex-direction: column;
  }
  #index #standard .box .txt {
    width: 100%;
  }
  #index #standard .box .img {
    width: 100%;
    max-width: 100%;
  }
}
/* origin */
#index #origin .inner .box .ttl h2 {
  font-size: 36px;
}
#index #origin::before {
  display: none;
}
#index #origin .box {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 48px;
}
#index #origin .box .txt {
  width: 50%;
}
#index #origin .box .txt > p {
  font-size: 16px;
  line-height: 230%;
}
#index #origin .box .role  p {
 margin-top: 24px;
}
#index #origin .box .video {
  width: 50%;
  overflow: hidden;
  border-radius: 16px;
  max-width: 492px;
  margin: 0 auto;
  padding-top: 29.3%;
  position: relative;
}
#index #origin .box .video video {
  position: absolute;
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: 0;
}
#index #origin .box .img {
  width: 50%;
  overflow: hidden;
  border-radius: 16px;
}
#index #origin .box .list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 32px;
  margin-top: 32px;
}
#index #origin .box .list .col {
  position: relative;
  z-index: 1;
}
#index #origin .box .list .col::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: right 50px top;
}
#index #origin .box .list .col:nth-child(1)::after {
  background-image: url("/img/business/index/item-origin-01.svg");
}
#index #origin .box .list .col:nth-child(2)::after {
  background-image: url("/img/business/index/item-origin-02.svg");
}
#index #origin .box .list .col:nth-child(3)::after {
  background-image: url("/img/business/index/item-origin-03.svg");
}
#index #origin .box .list .col:nth-child(4)::after {
  background-image: url("/img/business/index/item-origin-04.svg");
}
#index #origin .box .list .col::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  background: url("/img/common/icon-check-circle.svg");
}
#index #origin .box .list .col h3 {
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0.8px;
  margin-top: 16px;
}
#index #origin .box .list .col p {
  font-size: 14px;
  line-height: 160%;
  margin-top: 16px;
  color: #314557;
}
#index #origin .figBox {
  margin-top: 120px;
}
#index #origin .figBox h3 {
  font-size: 26px;
  font-weight: normal;
  line-height: 160%;
  text-align: center;
}
#index #origin .figBox .img {
  position: relative;
  padding: 38px 24px;
  outline: #DEDEDE solid 1px;
  outline-offset: -1px;
  margin-top: 32px;
}
#index #origin .figBox .img img {
  margin: 0 auto;
}
#index #origin .figBox .img::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  --x-gradient: linear-gradient(90deg, #1B1464 0 20px, transparent 0 calc(100% - 20px), #1B1464 calc(100% - 20px));
  --y-gradient: linear-gradient(#1B1464 0 20px, transparent 0 calc(100% - 20px), #1B1464 calc(100% - 20px));
  background-image: var(--x-gradient), var(--y-gradient), var(--x-gradient), var(--y-gradient);
  background-repeat: no-repeat;
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
  background-position: top, right, bottom, left;
  z-index: 1;
}
#index #origin .colFullBox {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: calc(100% + 80px);
  left: -40px;
  position: relative;
  margin-top: 80px;
  min-height: 310px;
}
#index #origin .colFullBox .col {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 48px;
}
#index #origin .colFullBox .col .txt {
  width: 50%;
}
#index #origin .colFullBox .col .txt .txtInner {
  position: relative;
  z-index: 1;
  max-width: 528px;
  padding: 0 40px 0 0;
}
#index #origin .colFullBox .col .txt .txtInner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 190px;
}
#index #origin .colFullBox .col:nth-child(1) .txt .txtInner::after {
  background-image: url("/img/business/index/item-origin-01.svg");
}
#index #origin .colFullBox .col:nth-child(2) .txt .txtInner::after {
  background-image: url("/img/business/index/item-origin-02.svg");
}
#index #origin .colFullBox .col:nth-child(3) .txt .txtInner::after {
  background-image: url("/img/business/index/item-origin-03.svg");
}
#index #origin .colFullBox .col:nth-child(4) .txt .txtInner::after {
  background-image: url("/img/business/index/item-origin-04.svg");
}
#index #origin .colFullBox .col .txt:first-child .txtInner {
  margin: 0 0 0 auto;
  padding: 0 0 0 40px;
}
#index #origin .colFullBox .col .txt p {
  font-size: 14px;
  line-height: 160%;
  margin-top: 24px;
}
#index #origin .colFullBox .col .txt .btn {
  margin-top: 24px;
}
#index #origin .colFullBox .col .txt .btn a {
  display: inline-flex;
  height: 56px;
  padding: 0px 40px 0px 8px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  text-align: center;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #01305D;
  transition: all .4s;
  opacity: 1;
}
#index #origin .colFullBox .col .txt .btn a:hover {
  gap: 12px;
  background: #245E95;
}
#index #origin .colFullBox .col .txt .btn a::before {
  content: "";
  width: 40px;
  height: 40px;
  background: url(/img/common/icon-arrow-wht.svg) no-repeat left top / 100%;
}
#index #origin .colFullBox .col .txt .btn a span {
  color: #fff;
  font-size: 16px;
  line-height: 130%;
  flex: 1 0 0;
}
#index #origin .colFullBox .col .img {
  width: 50%;
  overflow: hidden;
  border-radius: 16px 0 0 16px;
  height: 310px;
}
#index #origin .colFullBox .col .img:first-child {
  border-radius: 0 16px 16px 0
}
#index #origin .colFullBox .col .img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
}
@media only screen and (max-width:767px) {
#index #origin .inner .box .ttl h2 {
  font-size: 26px;
}
  #index #origin .box {
    flex-direction: column;
    gap: 40px;
    margin-top: 48px;
  }
  #index #origin .box .txt {
    width: 100%;
  }
  #index #origin .box .list {
    gap: 0;
  }
  #index #origin .box .list .col {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #01305D;
  }
  #index #origin .box .list .col:first-child {
    margin-top: 0;
  }
  #index #origin .box .list .col::after {
    background-repeat: no-repeat;
    background-position: right 0 top 20px;
  }
  #index #origin .box .list .col::before {
    margin: 0 auto;
  }
  #index #origin .box .list .col h3 {
    text-align: center;
  }
  #index #origin .box .img {
    width: 100%;
  }
  #index #origin .box .list {
    display: grid;
    grid-template-columns: 1fr;
  }
  #index #origin .colFullBox {
    gap: 40px;
    width: 100%;
    left: 0;
    min-height: 0;
  }
  #index #origin .figBox {
    margin-top: 60px;
  }
  #index #origin .figBox h3 {
    font-size: 20px;
  }
  #index #origin .colFullBox .col {
    flex-direction: column;
    gap: 24px;
  }
  #index #origin .colFullBox .col .txt {
    width: 100%;
    order: 2;
  }
  #index #origin .colFullBox .col .txt .txtInner {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  #index #origin .colFullBox .col .txt:first-child .txtInner {
    padding: 0;
  }
  #index #origin .colFullBox .col .txt .txtInner::after {
    bottom: 0;
    background-size: auto 120px;
  }
  #index #origin .colFullBox .col .img {
    width: 100%;
    border-radius: 16px;
    height: auto;
    order: 1;
  }
  #index #origin .colFullBox .col .img:first-child {
    border-radius: 16px;
  }
#index #origin .box .video {
  width: 100%;
  padding-top: 60%;
}
}






/* slideArea
-----------------------------------------------*/
.slideArea .slide {
  margin-top: 48px;
  position: relative;
}
.slick-list {
  overflow: visible;
  max-width: 720px;
}
.slideArea .slide .slick-item {
  padding-right: 40px;
}
.slideArea .slide .slick-item .img {
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 68 / 37;
}
.slideArea .slide .slick-item .img img {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;
}
.thumb-item-nav {
  display: flex;
  align-items: center;
  margin-top: 54px;
}
.thumb-item-nav > div {
  position: relative;
  padding: 0;
}
.thumb-item-nav .slick-slide {
  position: relative;
  display: inline-block;
  margin: 0 8px 0 0!important;
  height: 8px;
  width: 8px !important;
  padding: 3px 0;
  cursor: pointer;
}
.thumb-item-nav .slick-current {
  width: 40px !important;
}
.thumb-item-nav li::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0  ;
  height: 8px;
  border-radius: 50px;
  z-index: 1;
  width: 100%;
  background-color: #01305D;
}
.thumb-item-nav .slick-track {
  transform: none!important;
}
.slick-next, 
.slick-prev {
  position: absolute;
  display: block;
  content: "";
  bottom: -82px;
  width: 48px;
  height: 48px;
  font-size: 0;
  cursor: pointer;
  transition: opacity .2s;
  z-index: 2;
}
.slick-next:hover, 
.slick-prev:hover {
  opacity: .7;
}
.slick-prev {
  right: 64px;
  background: url("/img/overview/index/icon-arrow-01.svg")no-repeat;
  background-size: contain;
}
.slick-next {
  right: 0;
  background: url("/img/overview/index/icon-arrow-02.svg")no-repeat;
  background-size: contain;
}
@media only screen and (max-width:767px) {
  .thumbLink,
  .col4 {
    grid-template-columns: 1fr 1fr;
  }
  .slideArea .slide .slick-item {
    padding-right: 20px;
  }
  .slick-next, 
  .slick-prev{
    bottom: -55px;
    width: 40px;
    height: 40px;
  }
  .thumb-item-nav {
    margin-top: 32px;
  }
  .slick-prev {
    right: 50px;
  }
}



/* robotics
-----------------------------------------------*/
#robotics .item .col {
  display: flex;
  gap: 40px;
}
#robotics .item .col .txt,
#robotics .item .col .img,
#robotics .item .col .video {
  width: 50%;
}
#robotics .item .col .img,
#robotics .item .col .video {
  border-radius: 16px;
  overflow: hidden;
}
#robotics .item .col .video{
  padding-top: 29.3%;
  position: relative;
  overflow: hidden;
  max-height: 300px;
}
#robotics .item .col .video video{
  position: absolute;
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: 0;
}
#robotics .item .col .txt h2 {
  font-size: 32px;
  font-weight: bold;
}
#robotics .item .col .txt p {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 24px;
}
#robotics .item .col .txt p span {
  font-weight: bold;
  display: block;
}
#robotics #sec05  {
  padding-bottom: 200px;
}
#robotics #sec05 p {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 20px;
}
#robotics #sec05 ul {
  display: flex;
  gap: 48px;
  margin-top: 32px;
}
#robotics #sec05 li {
  border-radius: 16px;
  overflow: hidden;
}
#robotics #sec06 .ttl h2,
#robotics #sec07 .ttl h2 {
  font-size: 32px;
}
#robotics #sec06 p {
  line-height: 2.3!important;
}
#robotics #sec06 .cardColBox02 {
  margin-top: 40px;
}
#robotics #sec07 p {
  font-size: 16px;
  line-height: 2.3;
  margin-top: 40px;
}
@media only screen and (max-width:767px) {
#robotics #sec06 .ttl h2, 
  #robotics #sec07 .ttl h2 {
  font-size: 20px;
}
#robotics .item .col .txt h2 {
  font-size: 20px;
  font-weight: bold;
}
#robotics .item .col .video{
  padding-top: 60%;
}
  #robotics .item .col {
    flex-wrap: wrap;
    gap: 24px;
  }
  #robotics #sec01 .col,
  #robotics #sec03 .col {
    flex-direction: column-reverse;
  }
  #robotics .item .col .txt,
  #robotics .item .col .img,
#robotics .item .col .video {
    width: 100%;
  }
  #robotics .item .col .txt p {
    margin-top: 20px;
  }
  #robotics #sec05 {
    padding-bottom: 60px;
  }
  #robotics #sec05 ul {
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
  }
  #robotics #sec06 .cardColBox02 {
    margin-top:24px;
  }
  #robotics #sec06 .cardColBox02 .col {
    gap: 0;
  }
  #robotics #sec07 p {
    margin-top: 24px;
  }
}


/* rd
-----------------------------------------------*/
#rd #sec02 .cardColBox01 .col .txt h2,
#rd #sec03 .cardColBox01 .col .txt h2{
  font-size: 32px;
}
#rd #sec02::before,
#rd #sec04::before{
  display: none;
}
@media only screen and (max-width:767px) {
#rd #sec02 .cardColBox01 .col .txt h2,
#rd #sec03 .cardColBox01 .col .txt h2{
  font-size: 20px;
}
}

/* contactForm
-----------------------------------------------*/
#contactForm .ttl{
  margin-bottom: 24px;
}
@media only screen and (max-width:767px) {
  #contactForm .ttl{
    padding: 0 24px;
  }
}
/* support
-----------------------------------------------*/
#support .txt p{
	font-size: 16px;
	margin-top: 48px;
  line-height: 2;
}
@media only screen and (max-width:767px) {
#support .txt p{
	font-size: 14px;
	margin-top: 24px;
  line-height: 1.7;
}
}


/* flow
-----------------------------------------------*/
#flow .ttl h2 {
  font-size: 32px;
  font-weight: bold;
}
#flow .imgFull {
  padding: 0 30px 40px;
}
@media only screen and (max-width:767px) {
#flow .ttl h2 {
  font-size: 20px;
}
#flow .imgFull {
  padding: 0 12px 12px;
}
}