:root {
  --pc-font-size: 16;
  --sp-font-size: 16;
}
.c-main {
  background: #f5f5f5;
}
.c-main__ornament {
  fill: #77eafd;
}
.l-inner {
  z-index: 9;
}
.sdgs-poster {
  height: auto;
  width: 100%;
}
.sustainability-section__copy {
  background: url(../images/sustainability/copy.svg) no-repeat left bottom;
  color: #222;
  font-weight: 700;
}
.sustainability-lead {
  color: #222;
}
.sdgs-goals__title {
  color: #222;
  font-weight: 700;
}
.sdgs-goals__list {
  display: flex;
  flex-wrap: wrap;
}
.sdgs-goals__item img {
  height: auto;
  width: 100%;
}
.action {
  position: relative;
}
.action__label {
  background: #77eafd;
  position: absolute;
}
.action__label-text {
  color: #222;
  font-weight: 600;
  line-height: 1;
  position: absolute;
  white-space: nowrap;
  writing-mode: vertical-rl;
}
.action__body {
  background: #fff;
  display: flex;
  flex-direction: column;
}
.action__head {
  align-items: center;
  display: flex;
}
.action__icon {
  flex-shrink: 0;
  height: auto;
}
.action__title {
  color: #222;
  font-weight: 700;
}
.action__subtitle {
  color: #666;
}
.action__text {
  color: #222;
}
.action__sdgs {
  display: flex;
}
.action__sdgs-item img {
  height: auto;
  width: 100%;
}
.action__image {
  overflow: hidden;
}
.action__image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
@media only screen and (min-width:769px) {
  .c-kv {
    background-image: url(../images/sustainability/kv.jpg);
  }
  .c-main {
    border-top-left-radius: calc(240/var(--pc-font-size)*1rem);
    padding-bottom: calc(150/var(--pc-font-size)*1rem);
  }
  .c-main__nav {
    bottom: calc(58/var(--pc-font-size)*1rem);
    right: calc(128/var(--pc-font-size)*1rem);
  }
  .c-main__nav > * + * {
    margin-left: calc(40/var(--pc-font-size)*1rem);
  }
  .sdgs-poster {
    margin-bottom: calc(120/var(--pc-font-size)*1rem);
  }
  .sustainability-section {
    margin-bottom: calc(120/var(--pc-font-size)*1rem);
  }
  .sustainability-section:last-child {
    margin-bottom: 0;
  }
  .sustainability-section__copy {
    background-size: auto calc(8/var(--pc-font-size)*1rem);
    font-size: calc(28/var(--pc-font-size)*1rem);
    margin-bottom: calc(56/var(--pc-font-size)*1rem);
    padding-bottom: calc(18/var(--pc-font-size)*1rem);
  }
  .sustainability-lead {
    font-size: calc(20/var(--pc-font-size)*1rem);
    line-height: calc(34/var(--pc-font-size)*1rem);
  }
  .sdgs-goals {
    margin-top: calc(56/var(--pc-font-size)*1rem);
  }
  .sdgs-goals__title {
    font-size: calc(20/var(--pc-font-size)*1rem);
    line-height: calc(54/var(--pc-font-size)*1rem);
    text-align: center;
  }
  .sdgs-goals__lead {
    font-size: calc(20/var(--pc-font-size)*1rem);
    line-height: calc(34/var(--pc-font-size)*1rem);
    margin-top: calc(52/var(--pc-font-size)*1rem);
    text-align: center;
  }
  .sdgs-goals__list {
    gap: calc(8/var(--pc-font-size)*1rem);
    justify-content: center;
    margin-top: calc(40/var(--pc-font-size)*1rem);
  }
  .sdgs-goals__item {
    width: calc(80/var(--pc-font-size)*1rem);
  }
  .action-list {
    margin-top: calc(80/var(--pc-font-size)*1rem);
  }
  .action {
    margin-left: calc(-230/var(--pc-font-size)*1rem);
    min-height: calc(434/var(--pc-font-size)*1rem);
    padding-top: calc(40/var(--pc-font-size)*1rem);
    width: calc(1082/var(--pc-font-size)*1rem);
  }
  .action.is-reverse {
    margin-left: 0;
    margin-right: calc(-230/var(--pc-font-size)*1rem);
  }
  .action + .action {
    margin-top: calc(40/var(--pc-font-size)*1rem);
  }
  .action__label {
    border-top-right-radius: calc(10/var(--pc-font-size)*1rem);
    height: calc(394/var(--pc-font-size)*1rem);
    left: 0;
    top: 0;
    width: calc(1042/var(--pc-font-size)*1rem);
  }
  .action.is-reverse .action__label {
    border-top-left-radius: calc(10/var(--pc-font-size)*1rem);
    border-top-right-radius: 0;
    left: auto;
    right: 0;
  }
  .action__label-text {
    font-size: calc(20/var(--pc-font-size)*1rem);
    left: calc(30/var(--pc-font-size)*1rem);
    letter-spacing: .195em;
    top: calc(40/var(--pc-font-size)*1rem);
  }
  .action.is-reverse .action__label-text {
    left: auto;
    right: calc(30/var(--pc-font-size)*1rem);
  }
  .action__body {
    border-top-right-radius: calc(10/var(--pc-font-size)*1rem);
    justify-content: space-between;
    margin-left: calc(482/var(--pc-font-size)*1rem);
    min-height: calc(394/var(--pc-font-size)*1rem);
    padding: calc(40/var(--pc-font-size)*1rem);
    position: relative;
    width: calc(600/var(--pc-font-size)*1rem);
  }
  .action.is-reverse .action__body {
    border-top-left-radius: calc(10/var(--pc-font-size)*1rem);
    border-top-right-radius: 0;
    margin-left: 0;
  }
  .action__head {
    gap: calc(16/var(--pc-font-size)*1rem);
  }
  .action__icon {
    width: calc(48/var(--pc-font-size)*1rem);
  }
  .action__title {
    font-size: calc(20/var(--pc-font-size)*1rem);
    letter-spacing: .088em;
    line-height: 1.2;
  }
  .action__subtitle {
    font-size: calc(12/var(--pc-font-size)*1rem);
    letter-spacing: .042em;
    line-height: calc(18/var(--pc-font-size)*1rem);
    margin-top: calc(16/var(--pc-font-size)*1rem);
  }
  .action__text {
    font-size: calc(14/var(--pc-font-size)*1rem);
    letter-spacing: .029em;
    line-height: calc(24/var(--pc-font-size)*1rem);
    margin-top: calc(32/var(--pc-font-size)*1rem);
  }
  .action__sdgs {
    gap: calc(8/var(--pc-font-size)*1rem);
    margin-top: calc(32/var(--pc-font-size)*1rem);
  }
  .action__sdgs-item {
    width: calc(96/var(--pc-font-size)*1rem);
  }
  .action__image {
    height: 100%;
    left: calc(-402/var(--pc-font-size)*1rem);
    position: absolute;
    top: 0;
    width: calc(402/var(--pc-font-size)*1rem);
  }
  .action.is-reverse .action__image {
    left: calc(600/var(--pc-font-size)*1rem);
  }
}
@media only screen and (max-width:768px) {
  .c-kv {
    background-image: url(../images/sustainability/kv__sp.jpg);
  }
  .c-main {
    border-top-left-radius: calc(220/var(--sp-font-size)*1rem) calc(164/var(--sp-font-size)*1rem);
    padding-bottom: calc(160/var(--sp-font-size)*1rem);
  }
  .c-main__header {
    margin-bottom: calc(270 / var(--sp-font-size) * 1rem);
  }
  .c-main__nav {
    bottom: calc(-142 / var(--sp-font-size) * 1rem);
    left: calc(142 / var(--sp-font-size) * 1rem);
  }
  .c-main__nav > * + * {
    margin-top: calc(60/var(--sp-font-size)*1rem);
  }
  .sdgs-poster {
    margin-bottom: calc(164/var(--sp-font-size)*1rem);
  }
  .sustainability-section {
    margin-bottom: calc(164/var(--sp-font-size)*1rem);
  }
  .sustainability-section:last-child {
    margin-bottom: 0;
  }
  .sustainability-section__copy {
    background-size: auto calc(12/var(--sp-font-size)*1rem);
    font-size: calc(40/var(--sp-font-size)*1rem);
    line-height: calc(62/var(--sp-font-size)*1rem);
    margin-bottom: calc(60/var(--sp-font-size)*1rem);
    padding-bottom: calc(40/var(--sp-font-size)*1rem);
  }
  .sustainability-lead {
    font-size: calc(28/var(--sp-font-size)*1rem);
    line-height: calc(50/var(--sp-font-size)*1rem);
  }
  .sdgs-goals {
    margin-top: calc(60/var(--sp-font-size)*1rem);
  }
  .sdgs-goals__title {
    font-size: calc(32/var(--sp-font-size)*1rem);
    line-height: calc(62/var(--sp-font-size)*1rem);
  }
  .sdgs-goals__lead {
    font-size: calc(28/var(--sp-font-size)*1rem);
    line-height: calc(50/var(--sp-font-size)*1rem);
    margin-top: calc(60/var(--sp-font-size)*1rem);
  }
  .sdgs-goals__list {
    gap: calc(6.1/var(--sp-font-size)*1rem);
    margin-top: calc(60/var(--sp-font-size)*1rem);
  }
  .sdgs-goals__item {
    width: calc((100% - calc(6.1/var(--sp-font-size)*1rem)*4)/5);
  }
  .action-list {
    margin-top: calc(90/var(--sp-font-size)*1rem);
  }
  .action + .action {
    margin-top: calc(90/var(--sp-font-size)*1rem);
  }
  .action__label {
    border-top-right-radius: calc(20/var(--sp-font-size)*1rem);
    height: 100%;
    left: calc(-64/var(--sp-font-size)*1rem);
    right: calc(30/var(--sp-font-size)*1rem);
    top: calc(-30/var(--sp-font-size)*1rem);
  }
  .action.is-reverse .action__label {
    border-top-left-radius: calc(20/var(--sp-font-size)*1rem);
    border-top-right-radius: 0;
    left: calc(30/var(--sp-font-size)*1rem);
    right: calc(-64/var(--sp-font-size)*1rem);
  }
  .action__label-text {
    font-size: calc(33/var(--sp-font-size)*1rem);
    left: calc(14/var(--sp-font-size)*1rem);
    letter-spacing: .244em;
    top: calc(30/var(--sp-font-size)*1rem);
  }
  .action.is-reverse .action__label-text {
    left: auto;
    right: calc(14/var(--sp-font-size)*1rem);
  }
  .action__body {
    border-top-right-radius: calc(20/var(--sp-font-size)*1rem);
    padding: calc(80/var(--sp-font-size)*1rem) calc(30/var(--sp-font-size)*1rem) calc(60/var(--sp-font-size)*1rem) ;
    position: relative;
    z-index: 1;
  }
  .action.is-reverse .action__body {
    border-top-left-radius: calc(20/var(--sp-font-size)*1rem);
    border-top-right-radius: 0;
  }
  .action__head {
    gap: calc(33/var(--sp-font-size)*1rem);
  }
  .action__icon {
    width: calc(98/var(--sp-font-size)*1rem);
  }
  .action__title {
    font-size: calc(32/var(--sp-font-size)*1rem);
    line-height: calc(45/var(--sp-font-size)*1rem);
  }
  .action__subtitle {
    font-size: calc(25/var(--sp-font-size)*1rem);
    line-height: calc(37/var(--sp-font-size)*1rem);
    margin-top: calc(20/var(--sp-font-size)*1rem);
  }
  .action__text {
    font-size: calc(28/var(--sp-font-size)*1rem);
    letter-spacing: .029em;
    line-height: calc(50/var(--sp-font-size)*1rem);
    margin-top: calc(60/var(--sp-font-size)*1rem);
  }
  .action__sdgs {
    gap: calc(16/var(--sp-font-size)*1rem);
    margin-top: calc(60/var(--sp-font-size)*1rem);
  }
  .action__sdgs-item {
    width: calc(123/var(--sp-font-size)*1rem);
  }
  .action__image {
    aspect-ratio: 402/394;
    margin-top: calc(60/var(--sp-font-size)*1rem);
  }
}