@charset 'utf-8';

/**************************
  MV
 **************************/

#mv {
  position: relative;
  padding-top: 26.692307692307693%;
  overflow: hidden;
}

#mv::before {
  position: absolute;
  display: block;
  content: "";
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/rd/carbon/images/mv.jpg) center center no-repeat;
  background-size: cover;
  animation: zoomImg 12s ease-in-out forwards;
}

#mv h1 {
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 88.46153846153845vw;
  width: 100%;
}

#mv img {
  max-width: 35.84615384615385vw;
  height: auto;
}

@keyframes zoomImg {
  100% {
    transform: scale(1.1)
  }
}

@media screen and (max-width: 768px) {
  #mv {
    padding-top: 46.266666666666666%;
  }

  #mv::before {
    background-image: url(/rd/carbon/images/mv_sp.jpg);
  }

  #mv img {
    max-width: 71.73333333333333vw;
  }
}

/**************************
  column
 **************************/

#column {
  background: url(/rd/carbon/images/column_bg.jpg) center center no-repeat;
  background-size: cover;
}

.decoration .column {
  max-width: 40.92307692307692vw;
  height: auto;
}

.carbon-title {
  font-size: 3.8461538461538463vw;
}

@media screen and (min-width: 1300px) {
  .carbon-title {
    font-size: 50px;
  }
}

.carbon-title span {
  font-size: 0.66em;
}

.article {
  margin-top: 3.769230769230769vw;
}

.article ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.article ul li {
  width: 26.153846153846157vw;
  box-shadow: 1.44px 1.39px 9px rgba(75, 75, 75, 29%);
}

.article ul li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: transform 0.3s ease 0s;
}

.article ul li a:hover {
  transform: scale(1.06);
}

.article-image {
  position: relative;
  padding-top: 59.411764705882355%;
  background: center center no-repeat;
  background-size: cover;
}

.article-image.article01 {
  background-image: url(/rd/carbon/column/images/img_article01.jpg);
}

.article-image.article02 {
  background-image: url(/rd/carbon/column/images/img_article02.jpg);
}

.article-image.article03 {
  background-image: url(/rd/carbon/column/images/img_article03.jpg);
}
.article-image.article04 {
  background-image: url(/rd/carbon/column/images/img_article04.jpg);
}
.article-image.article05 {
  background-image: url(/rd/carbon/column/images/img_article05.jpg);
}
.article-image.article06 {
  background-image: url(/rd/carbon/column/images/img_article06.jpg);
}
.article-image.article07 {
  background-image: url(/rd/carbon/column/images/img_article07.jpg);
}
.article-image.article08 {
  background-image: url(/rd/carbon/column/images/img_article08.jpg);
}
.article-image.article09 {
  background-image: url(/rd/carbon/column/images/img_article09.jpg);
}
.article-image.article10 {
  background-image: url(/rd/carbon/column/images/img_article10.jpg);
}

.article-image span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 32px;
  line-height: 32px;
  font-size: 1.125em;
  text-align: center;
  color: #fff;
  background: #171717;
}

.article-text {
  line-height: 1.8333333333333333;
  padding: 29px 50px 50px 36px;
  background: #fff;
  font-size: 1.39vw;
  font-weight: 500;
}

@media screen and (min-width: 1300px) {
  .article-text {
    font-size: 1.125em;
  }
}

.article-text p {
  position: relative;
  width: 92.5%;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #B2B2B2;
  font-weight: 500;
}

.article-text::before {
  display: block;
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  width: 3.85vw;
  height: 3.85vw;
  background: url(/rd/carbon/shared/images/arrow.svg) center center no-repeat #861D3C;
  background-size: 24px;
}

@media screen and (min-width: 1300px) {
  .article-text::before {
    width: 50px;
    height: 50px;
  }
}

.article-text p::before {
  position: absolute;
  display: block;
  content: "";
  bottom: -2px;
  left: 0;
  width: 21.7%;
  height: 2px;
  background: #7c1b3a;
}

.article-btn {
  text-align: center;
  padding: 3.4vw 0 5.3vw;
}

@media screen and (max-width: 768px) {

  #column {
    background-image: url(/rd/carbon/images/column_bg_sp.jpg);
  }

  .decoration .column {
    max-width: 71vw;
  }

  .carbon-title {
    font-size: 1.625em;
  }

  .article ul {
    flex-direction: column;
    align-items: center;
  }

  .article ul li {
    width: 70vw;
  }

  .article ul li+li {
    margin-top: 28px;
  }

  .article-text {
    padding: 20px 35px 35px 27px;
    font-size: 1em;
  }

  .article-text::before {
    width: 35px;
    height: 35px;
    background-size: 18px;
  }

  .article-text p {
    font-size: 0.9375em;
  }

  .article-btn {
    text-align: center;
    padding: 6.1vw 0 9vw;
  }
}

/**************************
  vision
 **************************/

#vision {
  background: url(/rd/carbon/images/vision_bg.jpg) center center no-repeat #fff;
  background-size: cover;
  padding-bottom: 3.39vw;
  overflow: hidden;
}

.decoration .vision {
  max-width: 32.30769230769231vw;
}

.vision-content {
  display: flex;
  margin: 2.4vw 0 0 5.8vw;
}

.vision-content picture img {
  width: 29vw;
  height: auto;
}

.vision-text {
  margin: 2.3vw 0 0 3.8vw;
}

.vision-content .skew p:first-child {
  position: relative;
  width: 204px;
  height: 46px;
  line-height: 44px;
  margin: 0 0 20px;
  text-align: center;
  background: #fff;
  border: 1px solid #141414;
  font-weight: bold;
}

.vision-content .skew p:first-child::before {
  position: absolute;
  display: block;
  z-index: -1;
  right: -5px;
  bottom: -6px;
  content: "";
  width: 100%;
  height: 100%;
  background: #363636;
}

.vision-content .skew p:last-child {
  transform: skew(202deg);
  margin-left: 80px;
  border-left: 1px solid #141414;
  border-bottom: 1px solid #141414;
}

.vision-content .skew.concept p:last-child {
  margin-left: 118px;
}

.vision-content .skew.message p:last-child span {
  display: block;
  transform: skew(-202deg);
  padding: 0 0 20px 33px;
  font-size: 1.5em;
  font-weight: bold;
}

.vision-content .skew.concept p:last-child span {
  display: block;
  transform: skew(-202deg);
  padding: 0 0 20px 32px;
  line-height: 1.5;
  font-size: 1rem;
  font-weight: bold;
}

@media screen and (max-width: 768px) {

  #vision {
    background-image: url(/rd/carbon/images/vision_bg_sp.jpg);
  }

  .decoration .vision {
    max-width: 56vw;
  }

  .vision-content {
    flex-direction: column;
    margin: 0;
  }

  .vision-content .skew p:first-child {
    width: 141px;
    height: 32px;
    line-height: 32px;
  }

  .vision-content .skew p:first-child::before {
    right: -4px;
    bottom: -4px;
  }

  .vision-content .skew p:last-child {
    margin-left: 40px;
  }

  .vision-content .skew.message {
    margin-right: 62px;
    margin-left: 3px;
  }

  .vision-content .skew.message p:last-child span {
    font-size: 0.9375em;
    padding: 0 0 14px 36px;
  }

  .vision-content .skew.concept {
    margin-right: 41px;
    margin-left: 10px;
  }

  .vision-content .skew.concept p:last-child {
    margin-left: 70px;
  }

  .vision-content .skew.concept p:last-child span {
    font-size: 0.625em;
    padding: 0 0 12px 24px;
  }

  .vision-content picture img {
    width: 100%;
    max-width: initial;
  }

  .vision-text {
    margin: 6.4vw 0 0;
  }

}

/**************************
  solution
 **************************/

#solution {
  position: relative;
  z-index: 5;
  background: url(/rd/carbon/images/solution_bg.jpg) center center no-repeat #fff;
  background-size: cover;
  color: #fff;
  overflow: visible;
}

#solution .solution {
  max-width: 43.46153846153846vw;
  height: auto;
}

.solution-content {
  display: flex;
}

.solution-text p {
  line-height: 1.6666666666666667;
  font-size: 1.125em;
  font-weight: 500;
}

.solution-image {
  position: relative;
  margin-left: 4vw;
}

.solution-image picture img {
  position: relative;
  max-width: 36.61538461538461vw;
  height: auto;
  top: 25px;
}

.solution-image p {
  position: absolute;
  top: 50%;
  left: -22.615384615384617vw;
  transform: skew(-222deg);
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.solution-image p span {
  display: block;
  transform: skew(222deg);
  padding: 0 2vw 2vw 0;
  margin-left: -18px;
  font-size: 1.38vw;
  font-weight: bold;
}

.obj {
  position: absolute;
  z-index: -1;
  background: center center no-repeat;
  background-size: cover;
}

.obj01 {
  top: 16vw;
  right: 14vw;
  width: 80px;
  height: 80px;
  background-image: url(/rd/carbon/images/obj01.png);
}

.obj02 {
  top: 12vw;
  right: 25vw;
  width: 50px;
  height: 50px;
  background-image: url(/rd/carbon/images/obj02.png);
}

.obj03 {
  top: 33vw;
  right: 16vw;
  width: 70px;
  height: 70px;
  background-image: url(/rd/carbon/images/obj03.png);
}

.obj04 {
  top: 36vw;
  right: 20vw;
  width: 70px;
  height: 70px;
  background-image: url(/rd/carbon/images/obj04.png);
}

.obj05 {
  top: 30vw;
  right: 37vw;
  width: 42px;
  height: 42px;
  background-image: url(/rd/carbon/images/obj05.png);
}

.obj06 {
  top: 23vw;
  right: 56vw;
  width: 50px;
  height: 50px;
  background-image: url(/rd/carbon/images/obj06.png);
}

.obj07 {
  bottom: 6vw;
  left: 43vw;
  width: 42px;
  height: 42px;
  background-image: url(/rd/carbon/images/obj07.png);
}

@media screen and (min-width: 1300px) {
  .solution-image p {
    left: -320px;
  }

  .solution-images p span {
    font-size: 1.125em;
    padding: 0 26px 26px 0;
  }
}

@media screen and (max-width: 768px) {

  #solution {
    overflow: hidden;
    background-image: url(/rd/carbon/images/solution_bg_sp.jpg);
  }

  #solution .solution {
    max-width: 75.33333333333333vw;
  }

  .solution-content {
    flex-direction: column;
  }

  .solution-text p {
    font-size: 0.9375em;
  }

  .solution-image {
    margin: 0 -16px;
    padding-bottom: 37vw;
  }

  .solution-image picture img {
    max-width: 93vw;
    top: 0;
    right: -9.8vw;
  }

  .solution-image p {
    transform: skew(0);
    top: 38.4vw;
    left: 0;
    width: 266px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: none;
    background: #121212;
  }

  .solution-image p span {
    transform: skew(0);
    padding: 0;
    margin-left: 0;
    font-size: 0.9375em;
  }

  .obj01 {
    top: 66vw;
    right: 0vw;
    width: 60px;
    height: 60px;
  }

  .obj02 {
    top: 63vw;
    right: 25vw;
    width: 40px;
    height: 40px;
  }

  .obj03 {
    top: initial;
    bottom: 55vw;
    right: 17vw;
    width: 40px;
    height: 40px;
  }

  .obj04 {
    top: initial;
    bottom: 66vw;
    right: 40vw;
    width: 30px;
    height: 30px;
  }

  .obj05 {
    top: 82vw;
    left: 4vw;
    right: initial;
    width: 42px;
    height: 42px;
  }

  .obj06 {
    bottom: 42vw;
    left: 2vw;
    top: initial;
    right: initial;
    width: 30px;
    height: 30px;
  }

  .obj07 {
    display: none;
    bottom: 6vw;
    left: 43vw;
    width: 42px;
    height: 42px;
  }
}


/**************************
  attempt
 **************************/

#attempt {
  background: url(/rd/carbon/images/attempt_bg.jpg) center center no-repeat #fff;
  background-size: cover;
  color: #fff;
  overflow: hidden;
  padding-bottom: 9vw;
}

.common-block.attempt {
  z-index: 4;
}

.wrap.wide {
  max-width: none;
  margin-left: 5.769230769230769vw;
}

#attempt .attempt {
  max-width: 24.076923076923077vw;
  height: auto;
}

.attempt-content {
  display: flex;
  justify-content: space-between;
}

.attempt-text p {
  line-height: 1.6666666666666667;
  font-size: 1.125em;
  font-weight: 500;
}

.attempt-image {
  position: relative;
  margin-top: -15.615384615384615vw;
}

.attempt-image picture {
  display: flex;
  justify-content: right;
}

.attempt-image picture img {
  width: 20%;
  height: auto;
  margin-left: -0.01vw;
  text-align: right;
}

.attempt-image picture img.bottom {
  position: relative;
  top: 9vw;
}

.attempt-image p {
  position: absolute;
  bottom: -8vw;
  left: -1.7vw;
  transform: skew(-222deg);
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.attempt-image p span {
  display: block;
  transform: skew(222deg);
  padding: 0 2vw 2vw 0;
  margin-left: -18px;
  /* font-size: 1.125em; */
  font-size: 1.4vw;
  font-weight: bold;
}

@media screen and (min-width: 1300px) {
  .attempt-image p span {
    padding: 0 26px 26px 0;
  }
}

@media screen and (max-width: 1000px) {
  .attempt-image p {
    bottom: -9vw;
    left: 2.3vw;
  }
}

@media screen and (max-width: 768px) {

  #attempt {
    background-image: url(/rd/carbon/images/attempt_bg_sp.jpg);
    top: -1px;
  }

  .wrap.wide {
    margin-left: 0;
  }

  .attempt-content {
    flex-direction: column;
  }

  #attempt .attempt {
    max-width: 41.733333333333334vw;
  }

  .attempt-text {}

  .attempt-text p {
    font-size: 0.9375em;
  }

  .attempt-image {
    margin: 8vw -16px 0;
    margin-top: 8vw;
    padding-bottom: 31.6vw;
  }

  .attempt-image picture img {
    max-width: initial;
    width: 25%;
    margin-left: 0;
  }

  .attempt-image picture img.bottom {
    top: 21vw;
  }

  .attempt-image p {
    transform: skew(0);
    top: initial;
    left: initial;
    right: 0;
    bottom: -8vw;
    width: 266px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: none;
    background: #121212;
  }

  .attempt-image p span {
    transform: skew(0);
    padding: 0;
    margin-left: 0;
    font-size: 0.9375em;
  }

  #attempt .btn.for-sp {
    display: block;
    margin: 0 auto;
  }
}