@charset 'utf-8';

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

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

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

.carbon-title {
  font-size: 50px;
}

@media screen and (max-width: 1300px) {
  .carbon-title {
    font-size: 3.8461538461538463vw;
  }
}

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

.article {
  margin-top: 3.769230769230769vw;
}

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

.article ul li:first-child {
  width: 100%;
}

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

.article ul li:nth-child(n+2) {
  margin-top: 4.8vw;
}

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

.article ul li a article {
  display: flex;
}

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

.article ul li:first-child .article-image {
  width: 50%;
  padding-top: 29.565217391304348%;
}

.article ul li:first-child .article-text {
  width: 50%;
  padding: 91px 240px 43px 45px;
}

.article ul li:first-child .article-text::before {
  display: none;
}

.article ul li:first-child .article-text::after {
  width: 13.9vw;
  height: 9.07vw;
}

.article ul li:first-child .article-text span {
  width: 96px;
  height: 48px;
  line-height: 46px;
  font-size: 1.4375em;
}

.article ul li:first-child .article-text p {
  position: relative;
  margin: 0 0 10px 0;
  font-size: 1.875em;
  border-bottom: 4px solid #B2B2B2;
}

.article ul li:first-child .article-text p::before {
  position: absolute;
  display: block;
  content: "";
  bottom: -3px;
  left: 0;
  width: 24%;
  height: 3px;
  background: #7c1b3a;
}

.article ul li:first-child .article-text time {
  font-size: 1.125em;
}

.article ul li:first-child .article-text > .column-big {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 46px;
  line-height: 46px;
  padding: 0 4px 0 0;
  margin: 0;
  background: url(/rd/carbon/shared/images/arrow.svg) center right  12.5px no-repeat #861D3C;
  background-size: 24px;
  text-align: center;
  color: #fff;
  border: none;
  font-size: 1.125em;
}

.article ul li:first-child .article-text > .column-big::before {
  display: none;
}

.article-image {
  position: relative;
  width: 55.6%;
  padding-top: 32.96296296296296%;
  background: center top no-repeat;
  background-size: contain;
}

@media screen and (min-width: 1300px) {
  .article-image {
    background: center center no-repeat;
    background-size: cover;
  }
}

.article-image span {
  display: none;
}

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

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

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

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

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

.article-text {
  position: relative;
  width: calc(100% - 55.6%);
  padding: 40px 50px 50px 24px;
}

.article-text 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 p {
  position: relative;
  width: 100%;
  margin: 0 0 3px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #B2B2B2;
  font-weight: 500;
  line-height: 2;
}

.article-text::before,
.article-text::after {
  display: block;
  position: absolute;
  content: "";
}

.article-text::before {
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background: url(/rd/carbon/shared/images/arrow.svg) center center no-repeat #861D3C;
  background-size: 24px;
}

.article-text::after {
  top: 0;
  right: 0;
  width: 6.92vw;
  height: 4.54vw;
  background: center center no-repeat;
  background-size: contain;
}

.article-text.number_01::after {
  background-image: url(/rd/carbon/column/images/img_number_01.png);
}

.article-text.number_02::after {
  background-image: url(/rd/carbon/column/images/img_number_02.png);
}

.article-text.number_03::after {
  background-image: url(/rd/carbon/column/images/img_number_03.png);
}

.article-text.number_04::after {
  background-image: url(/rd/carbon/column/images/img_number_04.png);
}

.article-text.number_05::after {
  background-image: url(/rd/carbon/column/images/img_number_05.png);
}

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

.article-text time {
  color: #5E5E5E;
  font-size: 0.875em;
}

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

  .decoration {
    left: 16px;
  }

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

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

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

  #column .article ul li {
    width: 70vw;
  }

  #column .article-image {
    width: 100%;
    padding-top: 59.411764705882355%;
  }

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

  #column .article ul li a article {
    flex-direction: column;
  }

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

  #column .article-text {
    width: 100%;
    padding: 20px 35px 35px 27px;
    font-size: 1em;
  }

  #column .article-text span {
    display: none;
  }

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

  #column .article-text::after {
    width: 68px;
    height: 44px;
  }

  #column .article-text p {
    font-size: 0.9375em;
    line-height: 1.7;
    border-bottom: 2px solid #B2B2B2;
  }

  #column .article-text p::before {
    bottom: -2px;
    left: 0;
    width: 21.7%;
    height: 2px;
  }

  .article ul li:first-child .article-text > .column-big {
    display: none;
  }

  #column .article-text time {
    font-size: 0.875em;
  }
}


/******************
  column 下層
*******************/

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

.column-content {
  width: 50vw;
  margin: 27px auto 0;
}

.column-title {
  position: relative;
  padding-bottom: 17px;
  font-size: 1.875em;
  line-height: 1.7;
  border-bottom: 4px solid #B2B2B2;
}

.column-title::before {
  position: absolute;
  display: block;
  content: "";
  bottom: -3px;
  left: 0;
  width: 12%;
  height: 3px;
  background: #7c1b3a;
}

.column-title::after {
  position: absolute;
  display: block;
  content: "";
  top: -23px;
  right: -32px;
  width: 13.9vw;
  height: 9.07vw;
  background: center center no-repeat;
  background-size: contain;
}

.column-title.number_01::after {
  background-image: url(/rd/carbon/column/images/img_number_01.png);
}

.column-title.number_02::after {
  background-image: url(/rd/carbon/column/images/img_number_02.png) ;
}

.column-title.number_03::after {
  background-image: url(/rd/carbon/column/images/img_number_03.png);
}

.column-title.number_04::after {
  background-image: url(/rd/carbon/column/images/img_number_04.png) ;
}
.column-title.number_05::after {
  background-image: url(/rd/carbon/column/images/img_number_05.png);
}


@media screen and (min-width: 1300px) {
  .column-title::after {
    width: 181px;
    height: 118px;
  }
}

.column-time {
  display: block;
  margin: 18px 0;
  color: #5E5E5E;
  font-size: 1.125em;
}

.column-content figure {
  position: relative;
}

.column-content .has-margin {
  margin-top: 2vw;
}

.column-content figure img {
  width: 100%;
  height: auto;
}

.column-content figure .is-person {
  width: auto;
  height: auto;
}

.column-content > p {
  margin: 18px 0 0;
  line-height: 1.8;
}

.column-block {
  margin: 41px 0 0;
}

.column-content p > a {
  color: #861D3C;
}

.column-content p > a:hover {
  text-decoration: underline;
  text-decoration-color: #861D3C;
}

.column-block h3 {
  padding: 5px 0 5px 22px;
  border-left: 4px solid #7c1b3a;
  line-height: 1.7;
}

.column-block ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  line-height: 1.8;
}

.column-block ul li p {
  margin: 0;
}

.column-block ul li + li {
  margin-top: 10px;
}

.bold {
  font-weight: bold;
}

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

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

  }

  .column-content {
    width: 100%;
    margin: -8px 0 0;
  }

  .column-content > p {
    font-size: 0.9375em;
    margin: 10px 0 0;
  }

  .column-title {
    font-size: 1.625em;
    padding-bottom: 14px;
  }

  .column-title::before {
    width: 90px;
  }

  .column-time {
    font-size: 0.9375em;
    margin: 14px 0;
  }

  .column-title::after {
    top: 15px;
    right: -16px;
    width: 91px;
    height: 59px;
  }

  .column-block {
    margin: 28px 0 0;
  }

  .column-content figure {
    text-align: center;
  }

  .column-block h3 {
    font-size: 1.125em;
  }

  .column-block .column-image {
    margin: 14px 0;
  }

  .column-block ul {
    margin: 12px 0 0;
  }

  .column-block ul li {
    font-size: 0.9375em;
  }

  .column-block ul li + li {
    margin-top: 5px;
  }
}