/* arguments inittial */
/* font style */
/* site style */
/* [ background-image ]
-------------------------------------------------*/
/* [ writing-mode ]
-------------------------------------------------*/
/* [ easy breakpoint ]
-------------------------------------------------*/
@media (min-width: 768px) {
  .development-story .sec01 {
    padding: 187px 0 63px;
  }
}

@media (max-width: 767px) {
  .development-story .sec01 {
    padding: 57px 0 74px;
  }
}

.development-story .sec01 .item-sec01 {
  display: block;
  position: relative;
  border-bottom: 1px solid #0000001a;
}

.development-story .sec01 .item-sec01 .link-all {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.development-story .sec01 .item-sec01::after {
  position: absolute;
  content: '';
  background: #000;
  width: 79px;
  height: 1px;
  bottom: -1px;
  left: 0;
  z-index: 1;
}

@media (min-width: 768px) {
  .development-story .sec01 .item-sec01 {
    padding-bottom: 37px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .development-story .sec01 .item-sec01 {
    padding-bottom: 32px;
  }
}

@media (min-width: 768px) {
  .development-story .sec01 .item-sec01:not(:first-child) {
    padding-top: 115px;
  }
}

@media (max-width: 767px) {
  .development-story .sec01 .item-sec01:not(:first-child) {
    padding-top: 27px;
  }
}

@media (min-width: 768px) {
  .development-story .sec01 .item-sec01:last-child {
    border-bottom: none;
  }
  .development-story .sec01 .item-sec01:last-child::after {
    display: none;
  }
}

.development-story .sec01 .item-sec01:nth-child(even) {
  flex-direction: row-reverse;
}

@media (min-width: 768px) {
  .development-story .sec01 .item-sec01:nth-child(even) .img:after {
    top: -56px;
    left: 29%;
  }
  .development-story .sec01 .item-sec01:nth-child(even) .img .note {
    margin-top: 18px;
  }
}

@media (min-width: 768px) {
  .development-story .sec01 .item-sec01:nth-child(3) .img:after {
    top: -57px;
    left: -42%;
  }
  .development-story .sec01 .item-sec01:nth-child(3) .note {
    margin-top: 18px;
  }
}

.development-story .sec01-ttl {
  font-size: 34px;
  font-size: 3.4rem;
  line-height: 1.47059em;
  letter-spacing: 0.05em;
  font-weight: bold;
}

@media (min-width: 768px) {
  .development-story .sec01-ttl {
    margin-bottom: 21px;
    margin-top: -8px;
  }
}

@media only screen and (max-width: 992px) {
  .development-story .sec01-ttl {
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1.5em;
  }
}

@media (max-width: 767px) {
  .development-story .sec01-ttl {
    margin-bottom: 37px;
  }
}

.development-story .sec01-ttl em {
  font-style: normal;
  color: #13429b;
}

.development-story .sec01-desc {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 2.11111em;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-bottom: 21px;
}

@media (max-width: 767px) {
  .development-story .sec01-desc {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .development-story .sec01 .content {
    width: 48%;
  }
}

.development-story .sec01 .img {
  position: relative;
  cursor: pointer;
}

.development-story .sec01 .img.thumb01::after {
  background: url("/assets/img/recruit/development-story/icon-text01.svg") no-repeat center;
  background-size: contain;
}

.development-story .sec01 .img.thumb02::after {
  background: url("/assets/img/recruit/development-story/icon-text02.svg") no-repeat center;
  background-size: contain;
}

.development-story .sec01 .img.thumb03::after {
  background: url("/assets/img/recruit/development-story/icon-text03.svg") no-repeat center;
  background-size: contain;
}

.development-story .sec01 .img::after {
  position: absolute;
  top: -65px;
  left: 12%;
  right: 0;
  margin: auto;
  content: '';
  width: 115px;
  height: 113px;
  z-index: 1;
  transition: 0.3s;
}

@media (max-width: 767px) {
  .development-story .sec01 .img::after {
    width: 86px;
    height: 86px;
    top: -30px;
    left: inherit;
    right: 5%;
  }
}

@media (min-width: 768px) {
  .development-story .sec01 .img {
    width: 47.265%;
  }
}

@media (max-width: 767px) {
  .development-story .sec01 .img {
    margin-bottom: 13px;
  }
}

@media only screen and (min-width: 1025px) {
  .development-story .sec01 .img:hover {
    opacity: 1;
  }
  .development-story .sec01 .img:hover a {
    opacity: 1;
  }
  .development-story .sec01 .img:hover .img-thumb img {
    transform: scale(1.04);
  }
  .development-story .sec01 .img:hover::after {
    transform: rotate(90deg);
  }
}

.development-story .sec01 .img img {
  width: 100%;
  display: block;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  -ms-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}

.development-story .sec01 .img .note {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.61111em;
  letter-spacing: 0.05em;
  font-weight: bold;
  color: #000;
  position: relative;
  padding-left: 18px;
  margin-top: 23px;
}

.development-story .sec01 .img .note::before {
  position: absolute;
  top: 11px;
  left: 0;
  width: 6px;
  height: 6px;
  content: '';
  background: #13429b;
  border-radius: 50%;
}

@media (max-width: 767px) {
  .development-story .sec01 .img .note {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.625em;
    margin-top: 17px;
  }
  .development-story .sec01 .img .note::before {
    top: 9px;
  }
}

.development-story .sec01 .img .img-thumb {
  transform: translateZ(0);
}

@media (min-width: 768px) {
  .development-story .sec01 .img .img-thumb {
    position: relative;
    border-radius: 27px;
  }
  .development-story .sec01 .img .img-thumb:before {
    display: block;
    content: " ";
    width: 100%;
    padding-top: 59.13201%;
  }
  .development-story .sec01 .img .img-thumb > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 767px) {
  .development-story .sec01 .img .img-thumb {
    position: relative;
    border-radius: 16px;
  }
  .development-story .sec01 .img .img-thumb:before {
    display: block;
    content: " ";
    width: 100%;
    padding-top: 59.32722%;
  }
  .development-story .sec01 .img .img-thumb > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}