@charset "utf-8";

@media print, screen and (min-width: 769px) {
  .main-content {
    background-image: url(../../images/process/main_bg.jpg);
    background-position: right calc(50% - 400px) bottom 500px;
    background-repeat: no-repeat;
    background-size: auto;
  }
}

.title-type-tag span {
  display: inline-block;
  font-size: 1.1rem;
  padding-top: 8px;
  line-height: 1.4;
}

@media print, screen and (min-width: 769px) {
  .title-type-tag span {
    display: block;
    font-size: 1.2rem;
  }
}

/*------------------------------------------------
process
------------------------------------------------*/

/* .process-list {} */
.process-item {
  margin-bottom: 80px;
}

/* .process-item-name {} */

.can-making .title-type-tag {
  background-color: #e0f1f4;
  border-left: 35px solid #0f62b6;
}
.can-making .title-type-horizon {
  color: #0f62b6;
}
.casting .title-type-tag {
  background-color: #e8f4db;
  border-left: 35px solid #3e4e34;
}
.casting .title-type-horizon {
  color: #3e4e34;
}
.inspection .title-type-tag {
  background-color: #efd7a5;
  border-left: 35px solid #6d3b20;
}

.transport .title-type-tag {
  background-color: #f0e5f5;
  border-left: 35px solid #523460;
}

.process-item-text {
  margin: 25px 0;
}

@media print, screen and (min-width: 769px) {
  .process-item-name {
    width: 500px;
    margin: auto;
  }
  .process-item-text {
    text-align: center;
    margin: 30px 0;
  }
}

/*製造フロー*/

.flow-box {
  padding: 40px;
}

.can-making .flow-box {
  background-color: #e0f1f4;
}
.casting .flow-box {
  background-color: #e8f4db;
}


.flow-pic {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.flow-pic > img {
  width: 49%;
  height: auto;
}

.flow-item {
  margin-bottom: 50px;
}

/*▼タイトル*/
.flow-item-title {
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 207px;
  height: 144px;
}
.flow-item-title::after {
  content: "";
  position: absolute;
  width: 147px;
  height: 147px;
  /* 図形のCSS */
  top: -74px;
  left: 30px;
  transform: scaleY(1.4) rotate(45deg);
}

.can-making .flow-item-title::after {
  background: linear-gradient(135deg, #28a7e1, #28a7e1 40%, #1d2389);
}
.casting .flow-item-title::after {
  background: linear-gradient(135deg, #85cbbf, #85cbbf 40%, #005256);
}

.flow-item-title span {/* 前面の文字エリア */
  position: absolute;
  display: inline-block;
  top: 40px;
  left: 50%;
  color: #fff;
  transform:translate(-50%,-50%);
  text-align: center;
  font-size: 2rem;
  line-height: 1;
  border-radius: 5px;
  z-index: 10;
  white-space: nowrap;
}

.flow-item.last {
  margin-bottom: 0;
}

.flow-item.last .flow-item-title {
  width: 147px;
  height: 147px;
  border-radius: 50%;
}
.flow-item.last .flow-item-title::after {
  top:0;
  left: 0;
}
.flow-item.last .flow-item-title span {
  top: 50%;
}

.flow-item-text {
  margin-top: -30px;
  padding: 45px 30px;
  /* text-align: justify; */
}

.can-making .flow-item-text {
  background:linear-gradient(to bottom,rgba(46, 167, 224, 0.8), rgba(46, 167, 224, 0.4) 15%, rgba(46, 167, 224, 0) 100%);
}

.casting .flow-item-text {
  background:linear-gradient(to bottom,rgba(133, 203, 191, 0.8), rgba(133, 203, 191, 0.4) 15%, rgba(133, 203, 191, 0) 100%);
}

.can-making .flow-item.last .flow-item-text,
.casting .flow-item.last .flow-item-text {
  background: none;
  font-weight: bold;
  padding: 45px 0 0;
}


.flow-item-pic {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

.flow-item-pic > img {
  width: 100%;
}

@media print, screen and (min-width: 769px) {
  .flow-box {
    padding: 50px;
  }
  .flow-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .flow-pic > img {
    width: 47%;
  }
  .flow-item-title {
    margin: 0;
  }
  .flow-item-text {
    width: 480px;
    height: 144px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: inherit;
    margin-left: -102px;
    padding: 0 0 0 104px;
    line-height: 1.7;
    font-size: 1.45rem;
  }
  .can-making .flow-item-text {
    background:linear-gradient(to right,rgba(46, 167, 224, 1), rgba(46, 167, 224, 0.5) 20%, rgba(46, 167, 224, 0) 70%);
  }

  .casting .flow-item-text {
    background:linear-gradient(to right,rgba(133, 203, 191, 1), rgba(133, 203, 191, 0.4) 20%, rgba(133, 203, 191, 0) 70%);
  }
  .flow-item.last .flow-item-title {
    width: 208px;
    height: 208px;
    border-radius: 50%;
  }
  .flow-item.last .flow-item-title::after {
    width: 208px;
    height: 208px;
  }
  .can-making .flow-item.last  .flow-item-text,
  .casting .flow-item.last  .flow-item-text {
    width: calc(100% - 208px);
    padding: 0 0 0 65px;
    font-size: 2rem;
  }
}


/*------------------------------------------------
facility
------------------------------------------------*/

#facility {
  margin-top: -50px;
  padding-top: 50px;
}

.facility-base-title {
  color: #3fa2db;
  font-size: 2.4rem;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 25px;
}

/* .facility-list {} */

.facility-item {
  margin-bottom: 50px;
}

.facility-item-name {
  margin-bottom: 25px;
}

.detail-list {
  width: 100%;
}

.detail-list th {
  text-align: left;
  font-weight: normal;
  /* font-size: 1.6rem; */
  font-size: 1.4rem;
  padding: 8px 8px 8px 0;
}
.detail-list td {
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
  padding: 8px 0;
}

.detail-list .specification {
  display: block;
  font-size: 1.1rem;
  line-height: 1.3;
}

@media print, screen and (min-width: 769px) {
  #facility {
    padding-top: 0;
    margin-top: 0;
  }
  .facility-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    padding: 30px 110px;
  }
  .facility-item {
    width: 350px;
  }
  .facility-item:nth-of-type(3) {
    margin: auto;
  }
}