@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap";

/**
 * Carbon Neutral Page Settings
 * ================================================================================
 * Table of Contents:
 *
 * Carbon Neutral Page Settings
 * Animation Settings
 * ================================================================================
 */



/**
 * ================================================================================
 * Carbon Neutral Page Settings
 * ================================================================================
 */

/**
 * Basic Structure
 * -------------------------------
 */

body.is-fixed {
  overflow: hidden;
}

.cn-page {
  position: relative;
  font-weight: 400;
}

.cn-page *,
.cn-page *::before,
.cn-page *::after {
  box-sizing: border-box;
}

.hover:hover {
  text-decoration: none;
}

@media all and (min-width: 768px) {
  .l-nav {
    display: none;
  }
  
  .is-sp:not(.is-pc) {
    display: none;
  }
  
  .hover {
    transition: opacity 0.2s ease-out;
  }
  .hover:hover {
    opacity: 0.6;
  }
}
@media all and (max-width: 767px) {
  .is-pc:not(.is-sp) {
    display: none;
  }
}


/**
 * Common
 * -------------------------------
 */

.sectionTitle,
.c-heading-top,
.c-heading2 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: bold;
  color: #004098;
  text-align: center;
}
.c-heading-top,
.c-heading2 {
  margin-bottom: 0 !important;
}
.c-heading2 {
  border-bottom: none;
}

@media screen and (min-width: 768px) {
  .sectionTitle,
  .c-heading-top,
  .c-heading2 {
    font-size: 3.8554216867vw;
    line-height: 0.9375;
  }
  .sectionTitle.sectionTitle--efforts {
    letter-spacing: 0.1em;
  }
  .c-heading-top,
  .c-heading2 {
    padding-bottom: 80px;
    letter-spacing: 0.03em;
  }
  .c-heading2 {
    padding-bottom: 60px;
  }
}
@media screen and (max-width: 767px) {
  .sectionTitle,
  .c-heading-top,
  .c-heading2 {
    font-size: 34px;
    line-height: 1.3529;
    letter-spacing: 0.1em;
  }
  .sectionTitle.sectionTitle--efforts {
    line-height: 1.3824;
    letter-spacing: 0.11em;
  }
  .c-heading-top,
  .c-heading2 {
    letter-spacing: 0.05em;
  }
  .c-heading2 {
    padding-bottom: 19px;
  }
}
@media screen and (min-width: 1660px) {
  .sectionTitle,
  .c-heading-top,
  .c-heading2 {
    font-size: 64px;
  }
}


/**
 * Local Navigation
 * -------------------------------
 */

.lnav {
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 500;
  width: 100%;
}
.lnav.is-fixed {
  position: fixed;
}
body.is-howto .lnav {
  opacity: 0.3;
  pointer-events: none;
}

.lnav-menu {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  opacity: 0;
  background-color: #21437b;
  visibility: hidden;
  transition: opacity 0.2s ease-out;
}
.lnav-menu.is-active {
  opacity: 1;
  visibility: visible;
}
.lnav-menu__inner {
  padding: calc(100vw * (50 / 1090)) calc(100vw * (100 / 1090));
}
.lnav-menu__level01 {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  transform-origin: 50% 0;
}
/*
#lnav-menu-level01-item02,
#lnav-menu-level01-item03 {
  position: absolute;
  height: 100%;
}
#lnav-menu-level01-item02 {
  left: 0;
}
#lnav-menu-level01-item03 {
  right: 0;
}
*/
#lnav-menu-level01-item03 {
  position: relative;
}
.lnav-menu__level01-item {
  width: calc(100vw * (246 / 1090));
  margin-left: calc(100vw * (40 / 1090));
  margin-right: calc(100vw * (40 / 1090));
}
.lnav-menu__level01-head {
  display: block;
  margin-bottom: calc(100vw * (20 / 1090));
  line-height: 0;
}
.lnav-menu__level01-head img {
  width: auto;
  height: calc(100vw * (26 / 1090));
}
.lnav-menu__level02-item {
  border-bottom: 1px solid #FFF;
}
.lnav-menu__level02-item > * {
  display: block;
  padding-top: calc(100vw * (20 / 1090));
  padding-bottom: calc(100vw * (20 / 1090));
  color: #FFF;
  font-size: calc(100vw * (15 / 1090));
  line-height: 1.4;
}
.lnav-menu__level02-item > * > span {
  display: inline-block;
  position: relative;
}
.lnav-menu__level02-top {
  position: relative;
}
.lnav-menu__level02-top > * {
  color: #ffff00;
}
.lnav-menu__level02-top > * > span {
  padding-left: calc(100vw * (35 / 1090));
}
.lnav-menu__level02-top > * > span::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: calc(100vw * (26 / 1090));
  height: calc(100vw * (23 / 1090));
  background-image: url('/carbon-neutral/img/icon_home.svg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}
.lnav-menu__level02-banner {
  padding-left: 68px;
  padding-right: 68px;
}

.lnav-menu__close {
  position: absolute;
  top: 0;
  right: calc(100vw * (5 / 1090));
  z-index: 3;
  transform-origin: 100% 0;
}
.lnav-menu__close > * {
  position: relative;
  display: block;
  width: calc(100vw * (72 / 1090));
  height: calc(100vw * (72 / 1090));
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  transition: opacity 0.2s ease-out;
}
.lnav-menu__close > *:hover {
  opacity: 0.6;
}
.lnav-menu__close > *::before,
.lnav-menu__close > *::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100vw * (1 / 1090));
  min-width: 1px;
  height: calc(100vw * (36 / 1090));
  background-color: #FFF;
  content: '';
}
.lnav-menu__close > *::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.lnav-menu__close > *::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.lnav-btn {
  position: absolute;;
  top: 0;
  right: 0;
  z-index: 1;
}
.lnav-btn > * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100vw * (120 / 1090));
  max-width: calc(120px * 1.2);
  height: calc(100vw * (32 / 1090));
  max-height: calc(32px * 1.2);
  background-color: #12447F;
  line-height: 0;
}
.lnav-btn img {
  width: calc(100vw * (50 / 1090));
  max-width: calc(50px * 1.2);
}

@media screen and (max-width: 767px) {
  .lnav-menu__inner {
    padding: calc(100vw * (50 / 390)) calc(100vw * (50 / 390));
  }
  .lnav-menu__level01 {
    display: block;
    transform: scale(1) !important;
  }
  .lnav-menu__level01-item {
    width: 100%;
    margin: calc(100vw * (50 / 390)) 0 0 0;
  }
  .lnav-menu__level01-item:nth-of-type(1) {
    margin-top: 0;
  }
  #lnav-menu-level01-item02,
  #lnav-menu-level01-item03 {
    position: static;
  }
  .lnav-menu__level01-head {
    margin-bottom: calc(100vw * (15 / 390));
  }
  .lnav-menu__level01-head img {
    height: calc(100vw * (21 / 390));
  }
  .lnav-menu__level02-item > * {
    padding-top: calc(100vw * (15 / 390));
    padding-bottom: calc(100vw * (15 / 390));
    font-size: calc(100vw * (17 / 390));
  }
  .lnav-menu__level02-top {
    position: static;
    margin-top: calc(100vw * (30 / 390));
    border-top: none;
    border-bottom: none;
  }
  .lnav-menu__level02-top > * > span {
    padding-left: calc(100vw * (35 / 390));
  }
  .lnav-menu__level02-top > * > span::before {
    width: calc(100vw * (26 / 390));
    height: calc(100vw * (23 / 390));
  }
  .lnav-menu__level02-banner {
    padding-left: calc(100vw * (20 / 390));
    padding-right: calc(100vw * (20 / 390));
  }

  .lnav-menu__close {
    right: 0;
    transform: scale(1) !important;
  }
  .lnav-menu__close > * {
    width: calc(100vw * (60 / 390));
    height: calc(100vw * (60 / 390));
  }
  .lnav-menu__close > *:hover {
    opacity: 1;
  }
  .lnav-menu__close > *::before,
  .lnav-menu__close > *::after {
    width: calc(100vw * (1 / 390));
    height: calc(100vw * (40 / 390));
  }

  .lnav-btn > * {
    width: calc(100vw * (70 / 390));
    max-width: 120px;
    height: calc(100vw * (32 / 390));
    max-height: 32px;
  }
  .lnav-btn img {
    width: calc(100vw * (39 / 390));
    max-width: calc(100vw * (39 / 390));
  }
}


/**
 * Key Visual
 * -------------------------------
 */

.kv {
  position: relative;
  z-index: 10;
  width: 100%;
  /* height: calc(100vw * (536 / 1090)); */
  height: 100vh;
  background-color: #ccc;
}

.kv * {
  outline: none !important;
}

.kv__loader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  transform-origin: 50% 0;
  width: 100%;
  height: 100%;
  background-color: #12447F;
  transition: transform 0.2s ease-out 0.8s;
}
body.is-loaded .kv__loader {
  transform: scale(1, 0);
}
.kv__loader::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  background-image: url('/carbon-neutral/img/kv_loader.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 35px auto;
  transition: opacity 0.5s linear;
  content: '';
}
body.is-loaded .kv__loader::before {
  opacity: 0;
}

.kv__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
  pointer-events: none;
}
.kv__inner::-webkit-scrollbar {
  display: none;
}
body.is-loaded .kv__inner {
  opacity: 1;
}
.with-fancybox .kv__inner {
  pointer-events: all;
}

.kv__ttl {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10001;
  width: 100%;
  transition: opacity 0.2s ease-out;
  will-change: opacity, transform;
}
.with-fancybox .kv__ttl {
  opacity: 0;
  visibility: hidden;
}
.kv__ttl-inner {
  display: block;
  position: absolute;
  bottom: calc(100vw * (20 / 1090));
  left: 50%;
  transform: translateX(-50%);
}
.kv__ttl img {
  width: calc(100vw * (330 / 1090));
}

.kv-person {
  position: absolute;
  z-index: 10000;
  transform-origin: 50% 0;
  width: 100%;
  bottom: 0;
  pointer-events: none;
  transition: transform, opacity 0.2s ease-out;
  will-change: transform, opacity;
}
body.is-talk .kv-person {
  z-index: 10002;
}
body.is-lead .kv-person {
  opacity: 0;
  visibility: hidden;
}
.kv.is-howto .kv-person {
  opacity: 0;
  visibility: hidden;
}

.kv-person__item {
  position: absolute;
  bottom: calc(100vw * (-240 / 1090));
  width: calc(100vw * (500 / 1090));
  height: calc(100vw * (750 / 1090));
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.355, 1.415);
  will-change: transform;
}
#kv-person01.kv-person__item {
  left: calc(100vw * (-160 / 1090));
  transform-origin: 0 100%;
}
#kv-person02.kv-person__item {
  right: calc(100vw * (-160 / 1090));
  transform-origin: 100% 100%;
}
.kv-person__item.is-active {
  transform: scale(1.05);
}
.kv-person__item.is-zoom {
  transform: scale(1.15) !important;
}

.kv-person__click {
  position: absolute;
  bottom: calc(100vw * (240 / 1090));
  z-index: 5;
  width: calc(100vw * (210 / 1090));
  height: calc(100vw * (380 / 1090));
  /* cursor: pointer; */
  pointer-events: all;
}
.with-fancybox .kv-person__click {
  cursor: default;
  pointer-events: none;
}
#kv-person01 .kv-person__click {
  right: calc(100vw * (130 / 1090));
}
#kv-person02 .kv-person__click {
  left: calc(100vw * (130 / 1090));
}

.kv-person-img,
.kv-person-img__item {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.kv-person-img__item {
  opacity: 0;
  visibility: hidden;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);
  will-change: opacity;
}
.kv-person-img__item.is-active {
  opacity: 1;
  visibility: visible;
}
#kv-person01 .kv-person-img__item.is-douzo {
  background-image: url('/carbon-neutral/img/kv_person01_douzo.png');
}
#kv-person01 .kv-person-img__item.is-egao {
  background-image: url('/carbon-neutral/img/kv_person01_egao.png');
}
#kv-person01 .kv-person-img__item.is-naruhodo {
  background-image: url('/carbon-neutral/img/kv_person01_naruhodo.png');
}
#kv-person01 .kv-person-img__item.is-odoroki {
  background-image: url('/carbon-neutral/img/kv_person01_odoroki.png');
}
#kv-person01 .kv-person-img__item.is-udekumi {
  background-image: url('/carbon-neutral/img/kv_person01_udekumi.png');
}
#kv-person01 .kv-person-img__item.is-yubitate {
  background-image: url('/carbon-neutral/img/kv_person01_yubitate.png');
}
#kv-person02 .kv-person-img__item.is-douzo {
  background-image: url('/carbon-neutral/img/kv_person02_douzo.png');
}
#kv-person02 .kv-person-img__item.is-egao {
  background-image: url('/carbon-neutral/img/kv_person02_egao.png');
}
#kv-person02 .kv-person-img__item.is-naruhodo {
  background-image: url('/carbon-neutral/img/kv_person02_naruhodo.png');
}
#kv-person02 .kv-person-img__item.is-odoroki {
  background-image: url('/carbon-neutral/img/kv_person02_odoroki.png');
}
#kv-person02 .kv-person-img__item.is-udekumi {
  background-image: url('/carbon-neutral/img/kv_person02_udekumi.png');
}
#kv-person02 .kv-person-img__item.is-yubitate {
  background-image: url('/carbon-neutral/img/kv_person02_yubitate.png');
}

.kv-person-comment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: calc(100vw * (245 / 1090));
  min-width: calc(100vw * (115 / 1090));
  padding: calc(100vw * (15 / 1090)) calc(100vw * (25 / 1090));
  border: calc(100vw * (1.5 / 1090)) solid #21437B;
  border-radius: calc(100vw * (1000 / 1090));
  background: linear-gradient(0deg, rgba(155,208,232,1) 0%, rgba(202,230,243,1) 15%, rgba(255,255,255,1) 100%);
  text-align: center;
  white-space: nowrap;
  transform: scale(0);
  will-change: transform;
}
#kv-person01 .kv-person-comment {
  left: calc(100vw * (200 / 1090));
  transform-origin: 0 0;
}
#kv-person02 .kv-person-comment {
  right: calc(100vw * (200 / 1090));
  transform-origin: 100% 0;
}
.kv-person-comment.is-active {
  transform: scale(1);
  transition: all 0.5s cubic-bezier(0.505, -0.600, 0.155, 1.625);
}
.kv-person-comment::before,
.kv-person-comment::after {
  position: absolute;
  top: calc(100vw * (-26 / 1090));
  width: calc(100vw * (22 / 1090));
  height: calc(100vw * (27 / 1090));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
  content: '';
}
#kv-person01 .kv-person-comment::before {
  left: calc(100vw * (60 / 1090));
  background-image: url('/carbon-neutral/img/kv_person01_comment.svg');
}
#kv-person02 .kv-person-comment::before {
  right: calc(100vw * (60 / 1090));
  background-image: url('/carbon-neutral/img/kv_person02_comment.svg');
}
.kv-person-comment__item {
  color: #21437B;
  font-size: calc(100vw * (13 / 1090));
  font-weight: 500;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .kv {
    /* height: calc(100vw * (782 / 390)); */
  }
  
  .kv__loader::before {
    background-size: 30px auto;
  }
  
  .kv__ttl {
    bottom: calc(100vw * (15 / 390));
  }
  .kv__ttl img {
    width: calc(100vw * (240 / 390));
  }

  .kv-person__item {
    bottom: calc(100vw * (-130 / 390));
    width: calc(100vw * (337 / 390));
    height: calc(100vw * (506 / 390));
  }
  #kv-person01.kv-person__item {
    left: calc(100vw * (-115 / 390));
  }
  #kv-person02.kv-person__item {
    right: calc(100vw * (-115 / 390));
  }
  .kv-person__item.is-active {
    transform: scale(1.05);
  }
  
  .kv-person__click {
    bottom: calc(100vw * (130 / 390));
    width: calc(100vw * (140 / 390));
    height: calc(100vw * (290 / 390));
  }
  #kv-person01 .kv-person__click {
    right: calc(100vw * (90 / 390));
  }
  #kv-person02 .kv-person__click {
    left: calc(100vw * (90 / 390));
  }
  
  .kv-person-img {
    bottom: calc(100vw * (-20 / 390));
  }
  
  .kv-person-comment {
    bottom: calc(100vw * (145 / 390));
    min-width: calc(100vw * (115 / 390));
    /*padding: calc(100vw * (15 / 390)) calc(100vw * (25 / 390));*/
    padding: calc(100vw * (10 / 390)) calc(100vw * (20 / 390));
    border-width: calc(100vw * (1.5 / 390));
  }
  #kv-person01 .kv-person-comment {
    left: calc(100vw * (115 / 390));
  }
  #kv-person02 .kv-person-comment {
    right: calc(100vw * (115 / 390));
  }
  .kv-person-comment::before,
  .kv-person-comment::after {
    top: calc(100vw * (-26 / 390));
    width: calc(100vw * (22 / 390));
    height: calc(100vw * (27 / 390));
  }
  #kv-person01 .kv-person-comment::before {
    left: calc(100vw * (60 / 390));
  }
  #kv-person02 .kv-person-comment::before {
    right: calc(100vw * (60 / 390));
  }
  .kv-person-comment__item {
    font-size: calc(100vw * (11.5 / 390));
  }
}


/**
 * Key Visual (Fancybox / Simplebar)
 * -------------------------------
 */

.kv .fancybox__backdrop,
.kv .fancybox__container,
.kv .fancybox-focus-guard {
  position: absolute;
}
.kv .fancybox__backdrop {
  background-color: rgba(0, 133, 171, 0.45);
}
.kv .fancybox__carousel {
  display: flex;
  align-items: center;
}
.kv .fancybox__viewport {
  height: auto !important;
}
.kv .fancybox__slide {
  overflow: visible !important;
}


.kv .simplebar-track {
  background-color: #ccc;
}
.kv .simplebar-scrollbar {
  background-color: #21437B;
}

@media screen and (max-width: 767px) {
  .kv .fancybox__carousel {
    display: block;
  }
  .kv .fancybox__viewport {
    transform-origin: 50% 0;
  }
  .kv .fancybox__slide {
    align-items: flex-start !important;
    height: 100vh !important;
    padding-top: calc(100vw * (55 / 390));
  }
  .kv .fancybox__slide::before,
  .kv .fancybox__slide::after {
    display: none;
  }
  
  .kv .simplebar-content {
    padding-bottom: calc(100vw * (30 / 390)) !important;
  }
  .kv .simplebar-horizontal {
    height: calc(100vw * (7 / 390)) !important;
    bottom: calc(100vw * (18 / 390)) !important;
  }
}


/**
 * Key Visual Modal
 * -------------------------------
 */

.kv-modal {
  transform-origin: 50% 0;
  width: calc(100vw * (782 / 1090));
  height: calc(100vw * (408 / 1090));
  padding: calc(100vw * (23 / 1090));
  border-radius: calc(100vw * (22 / 1090));
  background-image: url('/carbon-neutral/img/modal/modal_bg_outer.png');
  background-repeat: no-repeat;
  background-size: 50% 50%;
  background-size: cover;
}
.kv .kv-modal::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 200vw;
  height: 200vh;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.7);
  pointer-events: none;
  transition: opacity 0.2s linear;
  content: '';
}
.kv.is-howto .kv-modal::after {
  opacity: 1;
  pointer-events: all;
}
.kv-modal img {
  width: 100%;
}

.kv-modal__list,
.kv-modal__list-item {
  width: 100%;
  height: 100%;
}

.kv-modal__list {
  position: relative;
  border-radius: calc(100vw * (9 / 1090));
  background-color: #FFF;
  background-image: url('/carbon-neutral/img/modal/modal_bg_inner.png');
  background-repeat: no-repeat;
  background-size: 50% 50%;
  background-size: cover;
}
.kv-modal__list-item {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  text-align: center;
  overflow: hidden;
  pointer-events: none;
}
.kv-modal__list-item.is-active {
  z-index: 2;
  pointer-events: all;
}

.kv-modal__list-ttl {
  text-align: center;
}

.kv-modal__list-subttl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(100vw * (405 / 1090));
  padding: calc(100vw * (10 / 1090));
  border: calc(100vw * (3 / 1090)) solid #589bba;
  background-color: #FFF;
  line-height: 1.4;
  text-align: center;
}
.kv-modal__list-subttl02 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(100vw * (10 / 1090));
  line-height: 1.4;
  background: linear-gradient(90deg, rgba(0,154,221,1) 0%, rgba(0,65,156,1) 100%);
  text-align: center;
}
.kv-modal__list-subttl03 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(100vw * (10 / 1090));
  line-height: 1.4;
  background-color: #589bba;
  text-align: center;
}

.kv-modal__list-head {
  display: block;
}

.kv-modal__list-fig {
  position: relative;
}
.kv-modal__list-fig .kv-modal__list-img {
  display: block;
}
.kv-modal__list-fig .kv-modal__list-img:nth-of-type(1) {
  position: relative !important;
}

.kv-modal__list-txt {
  position: absolute;
  left: 0;
  bottom: calc(100vw * (10 / 1090));
  width: 100%;
  color: #21437B;
  font-size: calc(100vw * (16 / 1090));
  line-height: 1.4;
}

.kv-modal__list-caption {
  margin-top: calc(100vw * (10 / 1090));
  font-size: calc(100vw * (14 / 1090));
  color: #000;
  text-align: center;
  line-height: 1.4;
}
.kv-modal__list-caption a {
  color: #21437b;
}
.kv-modal__list-caption.is-italic {
  font-style: italic;
}

.kv-modal__list-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vw * (50 / 1090));
  border: calc(100vw * (4 / 1090)) solid #5096b4;
  background-color: #FFF;
}

.kv-modal__list-nav-click {
  display: block;
  margin-bottom: calc(100vw * (6 / 1090));
  text-align: center;
}
.kv-modal__list-nav-click img {
  width: calc(100vw * (100 / 1090));
}

.kv-modal__list-nav {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(100vw * (-10 / 1090));
  margin-left: calc(100vw * (-10 / 1090));
}
.kv-modal__list-nav-item {
  width: 50%;
  padding-top: calc(100vw * (10 / 1090));
  padding-left: calc(100vw * (10 / 1090));
}

.kv-modal__nav {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
  bottom: calc(100vw * (-35 / 1090));
  z-index: 10;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}
.kv-modal__nav.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-out;
}
.kv-modal__nav-prev,
.kv-modal__nav__next {
  position: absolute;
  top: 0;
}
.kv-modal__nav-prev {
  right: 50%;
  margin-right: calc(100vw * (40 / 1090));
}
.kv-modal__nav__next {
  left: 50%;
  margin-left: calc(100vw * (40 / 1090));
}
.kv-modal__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(100vw * (26 / 1090));
  padding: calc(100vw * (5 / 1090)) calc(100vw * (15 / 1090));
  border-width: calc(100vw * (1 / 1090));
  border-style: solid;
  font-size: calc(100vw * (11 / 1090));
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.kv-modal__nav__close .kv-modal__nav-btn {
  min-width: initial !important;
  color: #21437B;
  border-color: #21437B;
  background-color: #FFF;
}
.kv-modal__nav-prev .kv-modal__nav-btn,
.kv-modal__nav__next .kv-modal__nav-btn {
  color: #FFF;
  font-size: calc(100vw * (10 / 1090));
  border-color: #FFF;
  background-color: #21437B;
  font-style: italic;
}
.kv-modal__nav-btn:hover {
  text-decoration: none;
}

.kv-modal__scroll {
  position: absolute;
  top: calc(100vw * (30 / 1090));
  right: calc(100vw * (12 / 1090));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}
.kv-modal__scroll.is-active {
  opacity: 1;
  visibility: visible;
}
.kv.is-howto .kv-modal__scroll.is-howto {
  z-index: 101;
}
.kv-modal__scroll::before,
.kv-modal__scroll::after {
  position: absolute;
  left: 50%;
}
.kv-modal__scroll::before {
  top: 0;
  transform: translateX(-50%) rotate(90deg);
  color: #FFF;
  font-size: calc(100vw * (8 / 1090));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  content: 'Scroll';
}
.kv-modal__scroll::after {
  top: calc(100vw * (20 / 1090));
  transform: translateX(-50%);
  width: 1px;
  height: calc(100vw * (60 / 1090));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 50%);
  background-position: 0 100%;
  background-size: 100% 200%;
  animation: scrolldown 2.0s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
  content: '';
}
.kv.is-howto .kv-modal__scroll::after {
  animation-play-state: paused;
}
.kv.is-howto .kv-modal__scroll.is-howto::after {
  animation-play-state: running;
}
@keyframes scrolldown {
  0%{
    background-position: 0 100%;
  }
  75% {
    background-position: 0 0;
  }
  100%{
    background-position: 0 -100%;
  }
}

.kv-modal__pager {
  position: absolute;
  left: 0;
  top: calc(100vw * (12 / 1090));
  width: 100%;
  color: #FFF;
  font-size: calc(100vw * (9 / 1090));
  line-height: 0;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}

.kv-modal__btns {
  position: absolute;
  left: calc(100vw * (25 / 1090));
  top: calc(100vw * (12 / 1090));
  width: 100%;
}
.kv-modal__btns-item {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  line-height: 0;
}
.kv-modal__btns-item.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-out;
}

.kv-modal__btn {
  display: block;
  position: relative;
  padding-left: 1.5em;
  color: #FFF;
  font-size: calc(100vw * (9 / 1090));
}
.kv-modal__btn::before,
.kv-modal__btn::after {
  position: absolute;
  top: 50%;
  left: 0;
  content: '';
}
#kv-modal-btn-close .kv-modal__btn::before,
#kv-modal-btn-close .kv-modal__btn::after {
  width: calc(100vw * (10 / 1090));
  height: 1px;
  background-color: #FFF;
}
#kv-modal-btn-close .kv-modal__btn::before {
  transform: translateY(-50%) rotate(45deg);
}
#kv-modal-btn-close .kv-modal__btn::after {
  transform: translateY(-50%) rotate(-45deg);
}
#kv-modal-btn-back .kv-modal__btn::before {
  width: calc(100vw * (6 / 1090));
  height: calc(100vw * (6 / 1090));
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
  transform: translate(0.4em, -50%) rotate(-45deg);
}

.kv-modal__arrows {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: calc(100vw * (-60 / 1090));
  left: 0;
  z-index: 5;
  width: 100%;
  opacity: 0;
  visibility: visible;
  transition: opacity 0.2s ease-out;
}
.kv-modal__arrows.is-active {
  opacity: 1;
  visibility: visible;
}
.kv-modal__arrows.is-disable {
  pointer-events: none;
}
.kv.is-howto .kv-modal__arrows.is-howto {
  z-index: 102;
}
.kv-modal__arrow {
  width: 0;
  opacity: 0;
  visibility: visible;
  transition: opacity 0.2s ease-out;
}
.kv-modal__arrow.is-active,
.kv.is-howto .kv-modal__arrow {
  width: auto;
  opacity: 1;
  visibility: visible;
}
.kv-modal__arrow-btn {
  position: relative;
  width: calc(100vw * (42 / 1090));
  height: calc(100vw * (42 / 1090));
  margin: 0 calc(100vw * (25 / 1090));
}
.kv-modal__arrow-btn::before,
.kv-modal__arrow-btn::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  animation: kv-modal-arrow 2s ease 0s infinite;
  will-change: transform;
}
@keyframes kv-modal-arrow {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.9);
  }
}
.kv.is-howto .kv-modal__arrow-btn::before,
.kv.is-howto .kv-modal__arrow-btn::after {
  animation-play-state: paused;
}
.kv.is-howto .kv-modal__arrows.is-howto .kv-modal__arrow-btn::before,
.kv.is-howto .kv-modal__arrows.is-howto .kv-modal__arrow-btn::after {
  animation-play-state: running;
}
.kv-modal__arrow-btn::before {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: calc(100vw * (1.4 / 1090)) solid #FFF;
  background: linear-gradient(28deg, rgba(4,150,214,1) 0%, rgba(0,64,149,1) 100%);
}
.kv-modal__arrow-btn::after {
  width: 0;
  height: 0;
  border-style: solid;
}
#kv-modal-prev .kv-modal__arrow-btn::after {
  margin-top: calc(100vw * (-2 / 1090));
  border-right: calc(100vw * (12 / 1090)) solid transparent;
  border-left: calc(100vw * (12 / 1090)) solid transparent;
  border-top: 0;
  border-bottom: calc(100vw * (18 / 1090)) solid #FFF;
}
#kv-modal-next .kv-modal__arrow-btn::after {
  margin-top: calc(100vw * (2 / 1090));
  border-right: calc(100vw * (12 / 1090)) solid transparent;
  border-left: calc(100vw * (12 / 1090)) solid transparent;
  border-top: calc(100vw * (18 / 1090)) solid #FFF;
  border-bottom: 0;
}
.kv-modal__arrow-btn > span {
  display: block;
  position: absolute;
  top: calc(100vw * (-20 / 1090));
  left: 50%;
  transform: translateX(-50%);
  text-shadow: 0px 0px calc(100vw * (10 / 1090)) rgba(0, 0, 0, 0.6);
  color: #FFF;
  font-size: calc(100vw * (14 / 1090));
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}

.kv-modal__howto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 102;
  pointer-events: none;
}
.kv-modal__howto-inner {
  position: absolute;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  transition: opacity 0.3s ease-out;
}
.kv-modal__howto-inner.is-howto {
  opacity: 1;
}
#kv-modal-howto01 {
  top: calc(100vw * (-28 / 1090) * 0.87);
  right: calc(100vw * (40 / 1090) * 0.87);
  width: calc(100vw * (260 / 1090) * 0.87);
  height: calc(100vw * (184 / 1090) * 0.87);
  background-image: url('/carbon-neutral/img/modal/modal_howto01.svg');
}
#kv-modal-howto02 {
  bottom: calc(100vw * (20 / 1090) * 0.87);
  right: calc(100vw * (180 / 1090) * 0.87);
  width: calc(100vw * (273 / 1090) * 0.87);
  height: calc(100vw * (181 / 1090) * 0.87);
  background-image: url('/carbon-neutral/img/modal/modal_howto02.svg');
}

@media screen and (max-width: 767px) {
  .kv-modal {
    width: calc(100vw * (352 / 390));
    height: calc(100vw * (514 / 390));
    padding: calc(100vw * (12 / 390));
    border-radius: calc(100vw * (19 / 390));
    background-image: url('/carbon-neutral/img/modal/modal_bg_outer_sp.png');
  }

  .kv-modal__list {
    border-radius: calc(100vw * (10 / 390));
    background-image: url('/carbon-neutral/img/modal/modal_bg_inner_sp.png');
  }
  
  .kv-modal__list-inner {
    width: 100%;
  }
  
  .kv-modal__overflow-x.is-howto::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw * (141 / 390));
    height: calc(100vw * (118 / 390));
    margin-top: calc(100vw * (-15 / 390));
    background-image: url('/carbon-neutral/img/modal/modal_howto_scroll.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    content: '';
  }
  
  .kv-modal__list-subttl {
    min-width: calc(100vw * (207 / 390));
    padding: calc(100vw * (5 / 390));
    border-width: calc(100vw * (3 / 390));
  }
  .kv-modal__list-subttl02 {
    padding: calc(100vw * (10 / 390));
  }
  .kv-modal__list-subttl03 {
    padding: calc(100vw * (10 / 390));
  }

  .kv-modal__list-txt {
    bottom: auto;
    top: calc(100vw * (340 / 390));
    font-size: calc(100vw * (14 / 390));
  }
  
  .kv-modal__list-caption {
    margin-top: calc(100vw * (12 / 390));
    font-size: calc(100vw * (11 / 390));
  }
  
  .kv-modal__list-nav-btn {
    height: calc(100vw * (39 / 390));
    border-width: calc(100vw * (3 / 390));
  }
  
  .kv-modal__list-nav-click {
    margin-bottom: calc(100vw * (12 / 390));
  }
  .kv-modal__list-nav-click img {
    width: calc(100vw * (100 / 390));
  }
  
  .kv-modal__list-nav {
    margin-top: calc(100vw * (-9 / 390));
    margin-left: 0;
    padding-left: calc(100vw * (34 / 390));
    padding-right: calc(100vw * (34 / 390));
  }
  .kv-modal__list-nav-item {
    width: 100%;
    padding-top: calc(100vw * (9 / 390));
    padding-left: 0;
  }

  .kv-modal__nav {
    flex-wrap: wrap;
    width: 100%;
    margin-top: calc(100vw * (-6 / 390));
    position: absolute;
    left: 0;
    bottom: auto;
    top: calc(100vw * (525 / 390));
    transform: translateX(0);
    text-align: center;
  }
  .kv-modal__nav-item {
    width: 100%;
    margin-top: calc(100vw * (12 / 390));
  } 
  .kv-modal__nav-prev,
  .kv-modal__nav__next {
    position: static;
    margin-top: calc(100vw * (6 / 390));
  }
  .kv-modal__nav-prev {
    margin-right: 0;
  }
  .kv-modal__nav__next {
    margin-left: 0;
  }
  .kv-modal__nav-btn {
    min-width: calc(100vw * (82 / 390));
    height: calc(100vw * (30 / 390));
    padding: calc(100vw * (10 / 390)) calc(100vw * (15 / 390));
    border-width: calc(100vw * (1 / 390));
    font-size: calc(100vw * (11 / 390));
  }
  .kv-modal__nav__close {
    display: none;
  }
  .kv-modal__nav-prev .kv-modal__nav-btn,
  .kv-modal__nav__next .kv-modal__nav-btn {
    min-width: calc(100vw * (148 / 390));
    font-size: calc(100vw * (10 / 390));
  }
  
  .kv-modal__scroll {
    top: calc(100vw * (20 / 390));
    right: calc(100vw * (-10 / 390));
  }
  .kv-modal__scroll::before {
    color: #FFF;
    font-size: calc(100vw * (11 / 390));
  }
  .kv-modal__scroll::after {
    top: calc(100vw * (25 / 390));
    height: calc(100vw * (60 / 390));
  }
  
  .kv-modal__pager {
    top: calc(100vw * (-10 / 390));
    font-size: calc(100vw * (11 / 390));
  }
  
  .kv-modal__btns {
    left: calc(100vw * (5 / 390));
    top: calc(100vw * (-10 / 390));
  }
  
  .kv-modal__btn {
    padding-left: 1.5em;
    font-size: calc(100vw * (11 / 390));
  }
  #kv-modal-btn-close .kv-modal__btn::before,
  #kv-modal-btn-close .kv-modal__btn::after {
    width: calc(100vw * (10 / 390));
  }
  #kv-modal-btn-back .kv-modal__btn::before {
    width: calc(100vw * (6 / 390));
    height: calc(100vw * (6 / 390));
    transform: translate(0.4em, -50%) rotate(-45deg);
  }
  
  .kv-modal__arrows {
    display: none;
    bottom: calc(100vw * (-60 / 390));
  }
  .kv-modal__arrow-btn {
    width: calc(100vw * (42 / 390));
    height: calc(100vw * (42 / 390));
    margin: 0 calc(100vw * (25 / 390));
  }
  .kv-modal__arrow-btn::before {
    border: calc(100vw * (1.4 / 390)) solid #FFF;
  }
  #kv-modal-prev .kv-modal__arrow-btn::after {
    margin-top: calc(100vw * (-2 / 390));
    border-right: calc(100vw * (12 / 390)) solid transparent;
    border-left: calc(100vw * (12 / 390)) solid transparent;
    border-bottom: calc(100vw * (18 / 390)) solid #FFF;
  }
  #kv-modal-next .kv-modal__arrow-btn::after {
    margin-top: calc(100vw * (2 / 390));
    border-right: calc(100vw * (12 / 390)) solid transparent;
    border-left: calc(100vw * (12 / 390)) solid transparent;
    border-top: calc(100vw * (18 / 390)) solid #FFF;
  }
  .kv-modal__arrow-btn > span {
    top: calc(100vw * (-20 / 390));
    text-shadow: 0px 0px calc(100vw * (10 / 390)) rgba(0, 0, 0, 0.6);
    font-size: calc(100vw * (14 / 390));
  }
  
  #kv-modal-howto01 {
    top: calc(100vw * (-5 / 390) * 0.78);
    right: calc(100vw * (18 / 390) * 0.78);
    width: calc(100vw * (208 / 390) * 0.78);
    height: calc(100vw * (181 / 390) * 0.78);
    background-image: url('/carbon-neutral/img/modal/modal_howto01_sp.svg');
  }
  #kv-modal-howto02 {
    display: none;
    bottom: calc(100vw * (-23 / 390) * 0.78);
    right: calc(100vw * (10 / 390) * 0.78);
    width: calc(100vw * (208 / 390) * 0.78);
    height: calc(100vw * (192 / 390) * 0.78);
    background-image: url('/carbon-neutral/img/modal/modal_howto02_sp.svg');
  }
}


/**
 * Key Visual Modal (#kv-modal01)
 * -------------------------------
 */

#kv-modal01-01 .kv-modal__list-ttl {
  width: calc(100vw * (514 / 1090));
  margin: calc(100vw * (90 / 1090)) auto 0 auto;
}

#kv-modal01-02 .kv-modal__list-fig {
  width: calc(100vw * (646 / 1090));
  margin: calc(100vw * (92 / 1090)) auto 0 auto;
}

#kv-modal01-03 .kv-modal__list-fig {
  width: calc(100vw * (640 / 1090));
  margin: calc(100vw * (23 / 1090)) auto 0 auto;
}

#kv-modal01-04 .kv-modal__list-inner {
  width: calc(100vw * (550 / 1090));
  margin: calc(100vw * (43 / 1090)) auto 0 auto;
  text-align: center;
}
#kv-modal01-04 .kv-modal__list-head {
  position: relative;
}
#kv-modal01-04 .kv-modal__list-head:nth-of-type(1) {
  margin-bottom: calc(100vw * (35 / 1090));
}
#kv-modal01-04 .kv-modal__list-head:nth-of-type(1) .kv-modal__list-nav-btn {
  height: calc(100vw * (71 / 1090));
}
#kv-modal01-04 .kv-modal__list-head:nth-of-type(1) .kv-modal__list-nav-btn img {
  width: calc(100vw * (362 / 1090));
  height: auto;
}
#kv-modal01-04 .kv-modal__list-head:nth-of-type(2) {
  margin-bottom: calc(100vw * (10 / 1090));
}
#kv-modal01-04 .kv-modal__list-head:nth-of-type(2) img {
  width: calc(100vw * (174 / 1090));
}

#kv-modal01-04 .kv-modal__list-nav-btn img {
  width: auto;
  height: calc(100vw * (20 / 1090));
}

@media screen and (max-width: 767px) {
  #kv-modal01-01 .kv-modal__list-ttl {
    width: calc(100vw * (284 / 390));
    margin-top: calc(100vw * (140 / 390));
  }

  #kv-modal01-02 .kv-modal__list-fig {
    width: calc(100vw * (208 / 390));
    margin-top: calc(100vw * (34 / 390));
  }

  #kv-modal01-03 .kv-modal__list-fig {
    width: calc(100vw * (284 / 390));
    margin-top: calc(100vw * (45 / 390));
  }
  #kv-modal01-03 .kv-modal__list-fig img {
    width: calc(100vw * ((640 + 22) / 390));
    max-width: calc(100vw * ((640 + 22) / 390));
    padding-right: calc(100vw * (22 / 390));
  }
  #kv-modal01-03 .kv-modal__overflow-x {
    margin-right: calc(100vw * (-22 / 390));
  }
  #kv-modal01-03 .simplebar-horizontal {
    width: calc(100% - (100vw * (22 / 390)));
  }
  
  #kv-modal01-04 .kv-modal__list-inner {
    margin-top: calc(100vw * (60 / 390));
    width: calc(100vw * (280 / 390));
  }
  #kv-modal01-04 .kv-modal__list-head:nth-of-type(1) {
    margin-bottom: calc(100vw * (30 / 390));
  }
  #kv-modal01-04 .kv-modal__list-head:nth-of-type(1) .kv-modal__list-nav-btn {
    height: calc(100vw * (71 / 390));
    border-width: calc(100vw * (4 / 390));
  }
  #kv-modal01-04 .kv-modal__list-head:nth-of-type(1) .kv-modal__list-nav-btn img {
    width: calc(100vw * (188 / 390));
    height: auto;
  }
  #kv-modal01-04 .kv-modal__list-head:nth-of-type(2) {
    margin-bottom: calc(100vw * (12 / 390));
  }
  #kv-modal01-04 .kv-modal__list-head:nth-of-type(2) img {
    width: calc(100vw * (131 / 390));
  }
  #kv-modal01-04 .kv-modal__list-nav-btn img {
    height: calc(100vw * (15 / 390));
  }
}


/**
 * Key Visual Modal (#kv-modal02)
 * -------------------------------
 */

#kv-modal02-01 .kv-modal__list-ttl {
  width: calc(100vw * (636 / 1090));
  margin: calc(100vw * (114 / 1090)) auto 0 auto;
}

#kv-modal02-02 .kv-modal__list-head,
#kv-modal02-03 .kv-modal__list-head {
  margin-top: calc(100vw * (15 / 1090));
  margin-bottom: calc(100vw * (17 / 1090));
}
#kv-modal02-02 .kv-modal__list-subttl img {
  width: calc(100vw * (460 / 1090));
}
#kv-modal02-03 .kv-modal__list-subttl img {
  width: calc(100vw * (460 / 1090));
}
#kv-modal02-02 .kv-modal__list-fig,
#kv-modal02-03 .kv-modal__list-fig {
  width: calc(100vw * (572 / 1090));
  margin-left: auto;
  margin-right: auto;
  background-image: url('/carbon-neutral/img/modal/modal02_02_bg.png');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
}
#kv-modal02-02 .kv-modal__list-img,
#kv-modal02-03 .kv-modal__list-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition-property: all;
  transition-timing-function: ease-out;
  transition-duration: 0.5s;
}

#kv-modal02-04 .kv-modal__list-head {
  margin-top: calc(100vw * (15 / 1090));
  margin-bottom: calc(100vw * (17 / 1090));
}
#kv-modal02-04 .kv-modal__list-subttl img {
  width: calc(100vw * (188 / 1090));
}
#kv-modal02-04 .kv-modal__list-fig {
  width: calc(100vw * (673 / 1090));
  margin-left: auto;
  margin-right: auto;
}

#kv-modal02-05 .kv-modal__list-fig {
  width: calc(100vw * (355 / 1090));
  margin: calc(100vw * (63 / 1090)) auto 0 auto;
}

@media screen and (max-width: 767px) {
  #kv-modal02-01 .kv-modal__list-ttl {
    width: calc(100vw * (284 / 390));
    margin-top: calc(100vw * (140 / 390));
  }

  #kv-modal02-02 .kv-modal__list-head,
  #kv-modal02-03 .kv-modal__list-head {
    margin-top: calc(100vw * (23 / 390));
    margin-bottom: calc(100vw * (8 / 390));
  }
  #kv-modal02-02 .kv-modal__list-subttl img {
    width: calc(100vw * (260 / 390));
  }
  #kv-modal02-03 .kv-modal__list-subttl img {
    width: calc(100vw * (263 / 390));
  }
  #kv-modal02-02 .kv-modal__list-fig,
  #kv-modal02-03 .kv-modal__list-fig {
    width: 100%;
    background-image: url('/carbon-neutral/img/modal/modal02_02_bg_sp.png');
    background-position: 0 0;
    background-size: calc(100vw * (594 / 390)) auto;
  }
  #kv-modal02-02 .kv-modal__list-fig.is-move01,
  #kv-modal02-03 .kv-modal__list-fig.is-move01 {
    background-position: calc(100vw * (-166 / 390)) 0;
  }
  #kv-modal02-02 .kv-modal__list-fig.is-move02,
  #kv-modal02-03 .kv-modal__list-fig.is-move02 {
    background-position: calc(100vw * (-323 / 390)) 0;
  }

  #kv-modal02-04 .kv-modal__list-head {
    margin-top: calc(100vw * (23 / 390));
    margin-bottom: calc(100vw * (27 / 390));
  }
  #kv-modal02-04 .kv-modal__list-subttl img {
    width: calc(100vw * (158 / 390));
  }
  #kv-modal02-04 .kv-modal__list-fig {
    width: calc(100vw * (220 / 390));
  }
  #kv-modal02-04 .kv-modal__list-fig img {
    width: calc(100vw * ((640 + 54) / 390));
    max-width: calc(100vw * ((640 + 54) / 390));
    padding-right: calc(100vw * (54 / 390));
  }
  #kv-modal02-04 .kv-modal__overflow-x {
    margin-right: calc(100vw * (-54 / 390));
  }
  #kv-modal02-04 .simplebar-horizontal {
    width: calc(100% - (100vw * (54 / 390)));
  }

  #kv-modal02-05 .kv-modal__list-fig {
    width: calc(100vw * (314 / 390));
    margin-top: calc(100vw * (145 / 390));
  }
}


/**
 * Key Visual Modal (#kv-modal03)
 * -------------------------------
 */

#kv-modal03-01 .kv-modal__list-ttl {
  width: calc(100vw * (402 / 1090));
  margin: calc(100vw * (114 / 1090)) auto 0 auto;
}

#kv-modal03-02 .kv-modal__list-fig {
  width: calc(100vw * (648 / 1090));
  margin: calc(100vw * (11 / 1090)) auto 0 auto;
  background-image: url('/carbon-neutral/img/modal/modal03_02_bg.png');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
}
#kv-modal03-02 .kv-modal__list-img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw * (303 / 1090));
}
#kv-modal03-02 [data-animate-type] {
  transition-property: all;
  transition-timing-function: ease-out;
  transition-duration: 0.5s;
}

#kv-modal03-03 .kv-modal__list-fig {
  width: calc(100vw * (710 / 1090));
  margin: calc(100vw * (4 / 1090)) auto 0 auto;
  background-image: url('/carbon-neutral/img/modal/modal03_03_bg.png');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
}
#kv-modal03-03 .kv-modal__list-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#kv-modal03-04 .kv-modal__list-fig {
  width: calc(100vw * (601 / 1090));
  margin: calc(100vw * (56 / 1090)) auto 0 auto;
}
#kv-modal03-04 .kv-modal__list-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#kv-modal03-05 .kv-modal__list-fig {
  width: calc(100vw * (354 / 1090));
  margin: calc(100vw * (63 / 1090)) auto 0 auto;
}

@media screen and (max-width: 767px) {
  #kv-modal03-01 .kv-modal__list-ttl {
    width: calc(100vw * (285 / 390));
    margin-top: calc(100vw * (192 / 390));
  }

  #kv-modal03-02 .kv-modal__list-fig {
    width: calc(100vw * (298 / 390));
    margin-top: calc(100vw * (59 / 390));
    background-image: url('/carbon-neutral/img/modal/modal03_02_bg_sp.png');
  }
  #kv-modal03-02 .kv-modal__list-img {
    width: 100%;
  }

  #kv-modal03-03 .kv-modal__list-fig {
    width: 100%;
    margin-top: calc(100vw * (29 / 390));
    background-image: url('/carbon-neutral/img/modal/modal03_03_bg_sp.png');
  }
  #kv-modal03-03 .kv-modal__list-txt {
    top: calc(100vw * (330 / 390));
  }

  #kv-modal03-04 .kv-modal__list-fig {
    width: calc(100vw * (242 / 390));
    margin-top: calc(100vw * (22 / 390));
  }
  #kv-modal03-04 .kv-modal__list-txt {
    top: calc(100vw * (400 / 390));
  }

  #kv-modal03-05 .kv-modal__list-fig {
    width: calc(100vw * (314 / 390));
    margin-top: calc(100vw * (146 / 390));
  }
}


/**
 * Key Visual Modal (#kv-modal04)
 * -------------------------------
 */

#kv-modal04-01 .kv-modal__list-ttl {
  width: calc(100vw * (524 / 1090));
  margin: calc(100vw * (114 / 1090)) auto 0 auto;
}

#kv-modal04-02 .kv-modal__list-fig {
  width: calc(100vw * (650 / 1090));
  margin: calc(100vw * (40 / 1090)) auto 0 auto;
}

#kv-modal04-03 .kv-modal__list-fig {
  width: calc(100vw * (654 / 1090));
  margin: calc(100vw * (26 / 1090)) auto 0 auto;
}
#kv-modal04-03 .kv-modal__list-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#kv-modal04-04 .kv-modal__list-fig {
  width: calc(100vw * (397 / 1090));
  margin: calc(100vw * (4 / 1090)) auto 0 auto;
}

#kv-modal04-05 .kv-modal__list-fig {
  width: calc(100vw * (360 / 1090));
  margin: calc(100vw * (0 / 1090)) auto 0 auto;
}
#kv-modal04-05 .kv-modal__list-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#kv-modal04-06 .kv-modal__list-head {
  margin-top: calc(100vw * (30 / 1090));
  margin-bottom: calc(100vw * (25 / 1090));
}
#kv-modal04-06 .kv-modal__list-subttl03 {
  width: calc(100vw * (264 / 1090));
}
#kv-modal04-06 .kv-modal__list-subttl03 img {
  width: calc(100vw * (92 / 1090));
}
#kv-modal04-06 .kv-modal__list-fig {
  width: calc(100vw * (295 / 1090));
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 767px) {
  #kv-modal04-01 .kv-modal__list-ttl {
    width: calc(100vw * (288 / 390));
    margin-top: calc(100vw * (192 / 390));
  }

  #kv-modal04-02 .kv-modal__list-fig {
    width: calc(100vw * (274 / 390));
    margin-top: calc(100vw * (15 / 390));
  }
  #kv-modal04-02 .kv-modal__list-txt {
    top: calc(100vw * (350 / 390));
  }

  #kv-modal04-03 .kv-modal__list-fig {
    width: calc(100vw * (256 / 390));
    margin-top: calc(100vw * (25 / 390));
  }
  #kv-modal04-03 .kv-modal__list-txt {
    top: calc(100vw * (395 / 390));
  }

  #kv-modal04-04 .kv-modal__list-fig {
    width: calc(100vw * (319 / 390));
    margin-top: calc(100vw * (10 / 390));
  }
  #kv-modal04-04 .kv-modal__list-txt {
    top: calc(100vw * (390 / 390));
  }

  #kv-modal04-05 .kv-modal__list-fig {
    width: calc(100vw * (310 / 390));
    margin-top: calc(100vw * (5 / 390));
  }
  #kv-modal04-05 .kv-modal__list-txt {
    top: calc(100vw * (365 / 390));
  }

  #kv-modal04-06 .kv-modal__list-head {
    margin-top: calc(100vw * (98 / 390));
    margin-bottom: calc(100vw * (20 / 390));
  }
  #kv-modal04-06 .kv-modal__list-subttl03 {
    width: calc(100vw * (264 / 390));
  }
  #kv-modal04-06 .kv-modal__list-subttl03 img {
    width: calc(100vw * (92 / 390));
  }
  #kv-modal04-06 .kv-modal__list-fig {
    width: calc(100vw * (295 / 390));
    margin-left: auto;
    margin-right: auto;
  }
}


/**
 * Key Visual Modal (#kv-modal05)
 * -------------------------------
 */

#kv-modal05-01 .kv-modal__list-ttl {
  width: calc(100vw * (480 / 1090));
  margin: calc(100vw * (114 / 1090)) auto 0 auto;
}

#kv-modal05-02 .kv-modal__list-head {
  margin-top: calc(100vw * (15 / 1090));
  margin-bottom: calc(100vw * (16 / 1090));
}
#kv-modal05-02 .kv-modal__list-subttl img {
  width: calc(100vw * (423 / 1090));
}
#kv-modal05-02 .kv-modal__list-fig {
  width: calc(100vw * (612 / 1090));
  margin-left: auto;
  margin-right: auto;
}
#kv-modal05-02 .kv-modal__list-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#kv-modal05-02 [data-animate-type="fade1"] {
  transition-property: all;
  transition-timing-function: ease-out;
  transition-duration: 0.5s;
}

#kv-modal05-03 .kv-modal__list-fig {
  width: calc(100vw * (432 / 1090));
  margin: calc(100vw * (24 / 1090)) auto 0 auto;
}

#kv-modal05-04 .kv-modal__list-fig {
  width: calc(100vw * (540 / 1090));
  margin: calc(100vw * (27 / 1090)) auto 0 auto;
}

#kv-modal05-05 .kv-modal__list-head {
  margin-top: calc(100vw * (15 / 1090));
  margin-bottom: calc(100vw * (16 / 1090));
}
#kv-modal05-05 .kv-modal__list-subttl img {
  width: calc(100vw * (464 / 1090));
}
#kv-modal05-05 .kv-modal__list-fig {
  width: calc(100vw * (572 / 1090));
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 767px) {
  #kv-modal05-01 .kv-modal__list-ttl {
    width: calc(100vw * (276 / 390));
    margin-top: calc(100vw * (139 / 390));
  }

  #kv-modal05-02 .kv-modal__list-head {
    margin-top: calc(100vw * (22 / 390));
    margin-bottom: calc(100vw * (16 / 390));
  }
  #kv-modal05-02 .kv-modal__list-subttl img {
    width: calc(100vw * (201 / 390));
  }
  #kv-modal05-02 .kv-modal__list-fig {
    width: calc(100vw * (295 / 390));
  }
  #kv-modal05-02 .kv-modal__list-txt {
    top: calc(100vw * (320 / 390));
  }

  #kv-modal05-03 .kv-modal__list-fig {
    width: calc(100vw * (300 / 390));
    margin-top: calc(100vw * (47 / 390));
  }

  #kv-modal05-04 .kv-modal__list-fig {
    width: calc(100vw * (318 / 390));
    margin-top: calc(100vw * (99 / 390));
  }
  #kv-modal05-04 .kv-modal__list-txt {
    top: calc(100vw * (300 / 390));
  }

  #kv-modal05-05 .kv-modal__list-head {
    margin-top: calc(100vw * (23 / 390));
    margin-bottom: calc(100vw * (34 / 390));
  }
  #kv-modal05-05 .kv-modal__list-subttl img {
    width: calc(100vw * (263 / 390));
  }
  #kv-modal05-05 .kv-modal__list-fig {
    width: calc(100vw * (326 / 390));
  }
}


/**
 * Key Visual Modal (#kv-modal06)
 * -------------------------------
 */

#kv-modal06-01 .kv-modal__list-ttl {
  width: calc(100vw * (516 / 1090));
  margin: calc(100vw * (114 / 1090)) auto 0 auto;
}

#kv-modal06-02 .kv-modal__list-fig {
  width: calc(100vw * (536 / 1090));
  margin: calc(100vw * (45 / 1090)) auto 0 auto;
}
#kv-modal06-02 .kv-modal__list-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}
#kv-modal06-02 .kv-modal__list-img.kv-modal06-02-fig-last {
  z-index: 1;
}

#kv-modal06-03 .kv-modal__list-inner {
  width: calc(100vw * (550 / 1090));
  margin: calc(100vw * (8 / 1090)) auto 0 auto;
}
#kv-modal06-03 .kv-modal__list-head {
  margin-bottom: calc(100vw * (20 / 1090));
}
#kv-modal06-03 .kv-modal__list-subttl img {
  width: calc(100vw * (513 / 1090));
}
#kv-modal06-03 .kv-modal__list-fig {
  width: calc(100vw * (414 / 1090));
  margin-left: auto;
  margin-right: auto;
}

#kv-modal06-04 .kv-modal__list-head {
  margin-top: calc(100vw * (22 / 1090));
  margin-bottom: calc(100vw * (20 / 1090));
}
#kv-modal06-04 .kv-modal__list-subttl03 {
  width: calc(100vw * (382 / 1090));
}
#kv-modal06-04 .kv-modal__list-subttl03 img {
  width: calc(100vw * (333 / 1090));
}
#kv-modal06-04 .kv-modal__list-fig {
  width: calc(100vw * (294 / 1090));
  margin-left: auto;
  margin-right: auto;
}

#kv-modal06-05 .kv-modal__list-inner {
  width: calc(100vw * (494 / 1090));
  margin: calc(100vw * (18 / 1090)) auto 0 auto;
}
#kv-modal06-05 .kv-modal__list-caption {
  margin-top: 0;
  margin-bottom: calc(100vw * (5 / 1090));
}
#kv-modal06-05 .kv-modal__list-subttl03 {
  width: calc(100vw * (434 / 1090));
  margin-bottom: calc(100vw * (10 / 1090));
}
#kv-modal06-05 .kv-modal__list-subttl03 img {
  width: calc(100vw * (388 / 1090));
}
#kv-modal06-05 .kv-modal__list-nav:nth-of-type(2) {
  padding: calc(100vw * (12 / 1090)) calc(100vw * (32 / 1090)) 0 calc(100vw * (32 / 1090));
}
#kv-modal06-05 .kv-modal__list-nav:nth-of-type(2) .kv-modal__list-nav-item {
  width: 100%;
}
#kv-modal06-05 .kv-modal__list-nav:nth-of-type(2) .kv-modal__list-nav-btn {
  height: calc(100vw * (58 / 1090));
}
#kv-modal06-05 .kv-modal__list-nav:nth-of-type(2) .kv-modal__list-nav-btn img {
  width: calc(100vw * (288 / 1090));
}

@media screen and (max-width: 767px) {
  #kv-modal06-01 .kv-modal__list-ttl {
    width: calc(100vw * (234 / 390));
    margin-top: calc(100vw * (141 / 390));
  }

  #kv-modal06-02 .kv-modal__list-fig {
    width: calc(100vw * (296 / 390));
    margin-top: calc(100vw * (115 / 390));
  }

  #kv-modal06-03 .kv-modal__list-inner {
    width: 100%;
    margin-top: calc(100vw * (24 / 390));
  }
  #kv-modal06-03 .kv-modal__list-head {
    margin-bottom: calc(100vw * (11 / 390));
  }
  #kv-modal06-03 .kv-modal__list-subttl img {
    width: calc(100vw * (210 / 390));
  }
  #kv-modal06-03 .kv-modal__list-fig {
    width: calc(100vw * (295 / 390));
  }
  #kv-modal06-03 .kv-modal__list-txt {
    top: calc(100vw * (365 / 390));
  }

  #kv-modal06-04 .kv-modal__list-head {
    margin-top: calc(100vw * (22 / 390));
    margin-bottom: calc(100vw * (20 / 390));
  }
  #kv-modal06-04 .kv-modal__list-subttl03 {
    width: calc(100vw * (284 / 390));
  }
  #kv-modal06-04 .kv-modal__list-subttl03 img {
    width: calc(100vw * (216 / 390));
  }
  #kv-modal06-04 .kv-modal__list-fig {
    width: calc(100vw * (314 / 390));
  }
  #kv-modal06-04 .kv-modal__list-txt {
    top: calc(100vw * (350 / 390));
  }

  #kv-modal06-05 .kv-modal__list-inner {
    width: calc(100vw * (282 / 390));
    margin-top: calc(100vw * (22 / 390));
  }
  #kv-modal06-05 .kv-modal__list-caption {
    display: none;
  }
  #kv-modal06-05 .kv-modal__list-subttl03 {
    width: calc(100vw * (284 / 390));
    margin-bottom: calc(100vw * (10 / 390));
  }
  #kv-modal06-05 .kv-modal__list-subttl03 img {
    width: calc(100vw * (258 / 390));
  }
  #kv-modal06-05 .kv-modal__list-nav:nth-of-type(1) {
    padding-left: calc(100vw * (60 / 390));
    padding-right: calc(100vw * (60 / 390));
  }
  #kv-modal06-05 .kv-modal__list-nav:nth-of-type(2) {
    padding: calc(100vw * (5 / 390)) 0 0 0;
  }
  #kv-modal06-05 .kv-modal__list-nav:nth-of-type(2) .kv-modal__list-nav-click {
    margin-bottom: calc(100vw * (5 / 390));
  }
  #kv-modal06-05 .kv-modal__list-nav:nth-of-type(2) .kv-modal__list-nav-btn {
    width: calc(100vw * (238 / 390));
    height: calc(100vw * (80 / 390));
    margin-left: auto;
    margin-right: auto;
  }
  #kv-modal06-05 .kv-modal__list-nav:nth-of-type(2) .kv-modal__list-nav-btn img {
    width: calc(100vw * (163 / 390));
  }
}


/**
 * Key Visual Modal (#kv-modal-charactor)
 * -------------------------------
 */

#kv-modal-charactor .kv-modal__list-head {
  width: calc(100vw * (480 / 1090));
  margin: calc(100vw * (30 / 1090)) auto calc(100vw * (20 / 1090)) auto;
}
#kv-modal-charactor .kv-modal__list-subttl02 {
  width: calc(100vw * (350 / 1090));
}
#kv-modal-charactor .kv-modal__list-subttl02 img {
  width: calc(100vw * (174 / 1090));
}
#kv-modal-charactor .kv-modal__list-ttl {
  margin-bottom: calc(100vw * (15 / 1090));
}
#kv-modal-charactor .kv-modal__list-txt {
  position: static;
}
#kv-modal-charactor .kv-modal__list-movie {
  margin-top: calc(100vw * (15 / 1090));
}
#kv-modal-charactor .kv-modal__list-movie img {
  width: calc(100vw * (134 / 1090));
}

#kv-modal-charactor01 .kv-modal__list-ttl img {
  width: calc(100vw * (302 / 1090));
}
#kv-modal-charactor01 .kv-modal__list-txt img {
  width: calc(100vw * (387 / 1090));
}

#kv-modal-charactor02 .kv-modal__list-ttl img {
  width: calc(100vw * (186 / 1090));
}
#kv-modal-charactor02 .kv-modal__list-txt img {
  width: calc(100vw * (324 / 1090));
}

@media screen and (max-width: 767px) {
  #kv-modal-charactor .kv-modal__list-head {
    width: 100%;
    margin-top: calc(100vw * (34 / 390));
    margin-bottom: calc(100vw * (25 / 390));
  }
  #kv-modal-charactor .kv-modal__list-subttl02 {
    width: calc(100vw * (300 / 390));
  }
  #kv-modal-charactor .kv-modal__list-subttl02 img {
    width: calc(100vw * (174 / 390));
  }
  #kv-modal-charactor .kv-modal__list-ttl {
    margin-bottom: calc(100vw * (15 / 390));
  }
  #kv-modal-charactor .kv-modal__list-movie {
    margin-top: calc(100vw * (20 / 390));
  }
  #kv-modal-charactor .kv-modal__list-movie img {
    width: calc(100vw * (110 / 390));
  }

  #kv-modal-charactor01 .kv-modal__list-ttl img {
    width: calc(100vw * (239 / 390));
  }
  #kv-modal-charactor01 .kv-modal__list-txt img {
    width: calc(100vw * (189 / 390));
  }

  #kv-modal-charactor02 .kv-modal__list-ttl img {
    width: calc(100vw * (147 / 390));
  }
  #kv-modal-charactor02 .kv-modal__list-txt img {
    width: calc(100vw * (272 / 390));
  }
}


/**
 * Key Visual Modal (#kv-modal-cm)
 * -------------------------------
 */

#kv-modal-cm .kv-modal__list-subttl02 {
  width: calc(100vw * (350 / 1090));
  height: calc(100vw * (50 / 1090));
  padding: 0;
  margin-top: calc(100vw * (30 / 1090));
  margin-bottom: calc(100vw * (25 / 1090));
}
#kv-modal-cm .kv-modal__list-subttl02 img {
  width: auto;
  height: calc(100vw * (20 / 1090));
}
#kv-modal-cm .kv-modal__list-card {
  position: relative;
  width: calc(100vw * (595 / 1090));
  margin-left: auto;
  margin-right: auto;
  padding: calc(100vw * (5 / 1090));
}
#kv-modal-cm .kv-modal__list-card-inner::before {
  position: absolute;
  content: '';
}
#kv-modal-cm .kv-modal__list-card-inner::before {
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url('/carbon-neutral/img/modal/modal_bg_outer.png');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}
#kv-modal-cm .kv-modal__list-card-inner {
  display: flex;
  align-items: center;
  padding: calc(100vw * (10 / 1090));
  z-index: 1;
  color: #21437b;
  background-color: #FFF;
}
#kv-modal-cm .kv-modal__list-card-head {
  display: block;
  width: calc(100vw * (298 / 1090));
}
#kv-modal-cm .kv-modal__list-card-body {
  width: calc(100vw * (240 / 1090));
  margin-left: calc(100vw * (20 / 1090));
  text-align: left;
}
#kv-modal-cm .kv-modal__list-ttl {
  font-size: calc(100vw * (15 / 1090));
  font-weight: 500;
  text-align: left;
  line-height: 1.4;
}
#kv-modal-cm .kv-modal__list-txt {
  position: static;
  margin-top: calc(100vw * (5 / 1090));
  font-size: calc(100vw * (10 / 1090));
  line-height: 1.4;
  word-break: break-all;
}
#kv-modal-cm .kv-modal__list-btn {
  margin-top: calc(100vw * (10 / 1090));
}
#kv-modal-cm .kv-modal__list-btn > * {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: calc(100vw * (36 / 1090));
  padding: calc(100vw * (5 / 1090));
  background-color: #5096b4;
  color: #FFF;
  font-size: calc(100vw * (10 / 1090));
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}
#kv-modal-cm .kv-modal__list-btn > *::after {
  position: absolute;
  top: 50%;
  right: calc(100vw * (10 / 1090));
  transform: translateY(-50%);
  width: calc(100vw * (10 / 1090));
  height: calc(100vw * (14 / 1090));
  background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top left/100% 50%,linear-gradient(to top left, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat bottom right/100% 50%;
  content: '';
}

#kv-modal-cm04 .kv-modal__list-txt {
  font-size: calc(100vw * (13 / 1090));
}

@media screen and (max-width: 767px) {
  #kv-modal-cm .kv-modal__list-subttl02 {
    width: calc(100vw * (300 / 390));
    height: calc(100vw * (68 / 390));
    margin-top: calc(100vw * (15 / 390));
    margin-bottom: calc(100vw * (20 / 390));
  }
  #kv-modal-cm .kv-modal__list-subttl02 img {
    height: calc(100vw * (44 / 390));
  }
  #kv-modal-cm .kv-modal__list-card {
    width: calc(100vw * (282 / 390));
    padding: calc(100vw * (4 / 390));
  }
  #kv-modal-cm .kv-modal__list-card-inner::before {
    background-image: url('/carbon-neutral/img/modal/modal_bg_outer_sp.png');
  }
  #kv-modal-cm .kv-modal__list-card-inner {
    display: block;
    padding: calc(100vw * (8 / 390)) calc(100vw * (8 / 390)) calc(100vw * (20 / 390)) calc(100vw * (8 / 390));
  }
  #kv-modal-cm .kv-modal__list-card-head {
    width: 100%;
  }
  #kv-modal-cm .kv-modal__list-card-body {
    width: calc(100vw * (230 / 390));
    margin: calc(100vw * (15 / 390)) auto 0 auto;
  }
  #kv-modal-cm .kv-modal__list-ttl {
    font-size: calc(100vw * (14 / 390));
  }
  #kv-modal-cm .kv-modal__list-txt {
    margin-top: calc(100vw * (5 / 390));
    font-size: calc(100vw * (11 / 390));
  }
  #kv-modal-cm .kv-modal__list-btn {
    margin-top: calc(100vw * (10 / 390));
  }
  #kv-modal-cm .kv-modal__list-btn > * {
    min-height: calc(100vw * (30 / 390));
    padding: calc(100vw * (5 / 390));
    font-size: calc(100vw * (10 / 390));
  }
  #kv-modal-cm .kv-modal__list-btn > *::after {
    right: calc(100vw * (10 / 390));
    width: calc(100vw * (10 / 390));
    height: calc(100vw * (14 / 390));
  }

  #kv-modal-cm04 .kv-modal__list-subttl02 img {
    height: calc(100vw * (19 / 390));
  }
  #kv-modal-cm04 .kv-modal__list-txt {
    font-size: calc(100vw * (12 / 390));
  }
}


/**
 * Key Visual (City)
 * -------------------------------
 */

.kv-city {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,0.65) 70%, rgba(136,185,212,0.65) 100%);
}
.kv-city::after {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: calc(100vw * (90 / 1090));
  background-image: url('/carbon-neutral/img/kv_city_bg.png');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  content: '';
}

.kv-city img {
  width: 100%;
}

.kv-city__sign {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(100vw * (8 / 1090));
  left: 50%;
  z-index: 3;
  transform-origin: 50% 0;
  /* width: calc(100vw * (366 / 1090)); */
  width: calc(100vw * (280 / 1090));
  height: calc(100vw * (42 / 1090));
  /* margin-left: calc(100vw * ((366 / 1090) / -2)); */
  margin-left: calc(100vw * ((280 / 1090) / -2));
  padding-left: calc(100vw * (20 / 1090));
  padding-right: calc(100vw * (20 / 1090));
  border: calc(100vw * (3 / 1090)) solid #3c9dbd;
  background-color: #FFF;
  text-align: center;
}
.kv-city__sign::before,
.kv-city__sign::after {
  position: absolute;
  top: calc(100vw * (-11 / 1090));
  z-index: -1;
  width: calc(100vw * (11 / 1090));
  height: calc(100vw * (11 / 1090));
  background-color: #3c9dbd;
  content: '';
}
.kv-city__sign::before {
  left: calc(100vw * (28 / 1090));
}
.kv-city__sign::after {
  right: calc(100vw * (28 / 1090));
}
.kv-city__sign-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}
.kv-city__sign-loc {
  width: calc(100vw * (174 / 1090));
  height: calc(100vw * (19 / 1090));
}
.kv-city__sign-prev,
.kv-city__sign-next {
  /* width: calc(100vw * (72 / 1090));
  height: calc(100vw * (15 / 1090)); */
  width: calc(100vw * (115 / 1090));
  height: calc(100vw * (22 / 1090));
  cursor: pointer;
}
.kv-city__sign-prev {
  margin-right: calc(100vw * (2 / 1090));
  background: linear-gradient(90deg, rgba(222,228,243,1) 0%, rgba(105,190,219,1) 100%);
}
.kv-city__sign-next {
  margin-left: calc(100vw * (2 / 1090));
  background: linear-gradient(90deg, rgba(105,190,219,1) 0%, rgba(222,228,243,1) 100%);
}
.kv-city__sign-prev::before,
.kv-city__sign-next::before {
  position: absolute;
  top: 0;
  /* width: calc(100vw * (10 / 1090)); */
  width: calc(100vw * (12 / 1090));
  height: 100%;
  content: '';
}
.kv-city__sign-prev::before {
  /* left: calc(100vw * (-9.5 / 1090)); */
  left: calc(100vw * (-11.5 / 1090));
  background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #dee4f3 50.5%) no-repeat bottom left/100% 50%, linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #dee4f3 50.5%) no-repeat top right/100% 50%;
}
.kv-city__sign-next::before {
  /* right: calc(100vw * (-9.5 / 1090)); */
  right: calc(100vw * (-11.5 / 1090));
  background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #dee4f3 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, rgba(255,255,255,0) 50%, #dee4f3 50.5%) no-repeat bottom right/100% 50%;
}
.kv-city__sign-item::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* background-size: auto calc(100vw * (8 / 1090)); */
  background-size: auto calc(100vw * (10 / 1090));
  content: '';
  transition: all 0.2s ease-out;
}
.kv-city__sign-loc::after {
  background-size: auto calc(100vw * (19 / 1090));
}
.kv-city__sign-item.is-roman::after {
  background-image: url('/carbon-neutral/img/kv_city_sign_roman.svg');
}
.kv-city__sign-item.is-cn::after {
  background-image: url('/carbon-neutral/img/kv_city_sign_cn.svg');
}
.kv-city__sign-item.is-gas::after {
  background-image: url('/carbon-neutral/img/kv_city_sign_gas.svg');
}

.kv-city__nav {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
}
.kv-city__nav-prev,
.kv-city__nav-next {
  position: absolute;
  left: 50%;
  bottom: calc(100vw * (70 / 1090));
  z-index: 3;
  width: calc(100vw * (32 / 1090) * 1.2);
  height: calc(100vw * (32 / 1090) * 1.2);
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 1);
  cursor: pointer;
}
.kv-city__nav-prev {
  margin-left: calc(100vw * (-220 / 1090) * 1.4);
}
.kv-city__nav-next {
  margin-left: calc(100vw * (175 / 1090) * 1.4);
}
.with-fancybox .kv-city__nav-prev,
.with-fancybox .kv-city__nav-next {
  opacity: 0;
  pointer-events: none;
}
.kv-city__nav-prev::before,
.kv-city__nav-next::before,
.kv-city__nav-prev::after,
.kv-city__nav-next::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
}
.kv-city__nav-prev::before,
.kv-city__nav-next::before {
  transform: translate(-50%, -50%) scale(1.4);
  width: 100%;
  height: 100%;
}
.kv-city__nav-prev::after,
.kv-city__nav-next::after {
  width: calc(100vw * (10 / 1090));
  height: calc(100vw * (10 / 1090));
  border-top: calc(100vw * (1.5 / 1090)) solid #00419c;
}
.kv-city__nav-prev::after {
  margin-left: calc(100vw * (2 / 1090));
  border-left: calc(100vw * (1.5 / 1090)) solid #00419c;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.kv-city__nav-next::after {
  margin-left: calc(100vw * (-2 / 1090));
  border-right: calc(100vw * (1.5 / 1090)) solid #00419c;
  transform: translate(-50%, -50%) rotate(45deg);
}

.kv-city__list {
  position: absolute;
  left: 0;
  bottom: calc(100vw * (89 / 1090));
  z-index: 1;
  width: 100%;
  height: calc(100% - (100vw * (89 / 1090)));
  overflow: hidden;
}

.kv-city__list .slick-list,
.kv-city__list .slick-track,
.kv-city__list .slick-slide,
.kv-city__list .slick-slide > div {
  height: 100%;
}
.kv-city__list .slick-list {
  padding: 0 !important;
  overflow: visible !important;
}
.kv-city__list .slick-track {
  background-image: url('/carbon-neutral/img/kv_city_list_bg.png');
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: auto calc(100vw * (358 / 1090));
}
.kv-city__list .slick-slide {
  transform-origin: 50% 100%;
}

.kv-city__list-container {
  height: 100%;
  overflow: visible !important;
  transform-origin: 50% bottom;
}
.kv-city__list-item {
  display: inline-flex !important;
  align-items: flex-end;
  height: 100%;
  margin-left: calc(100vw * (20 / 1090));
  margin-right: calc(100vw * (20 / 1090));
}
.kv-city__list-item > * {
  display: block;
  pointer-events: none;
}
.slick-current .kv-city__list-item > *,
.slick-enable .kv-city__list-item > * {
  pointer-events: all;
}
.kv-city__list-inner {
  position: relative;
  transition: transform 0.2s ease-out;
  transform-origin: 50% 100%;
}
.slick-center .kv-city__list-inner,
.slick-slide.is-active-next .kv-city__list-inner {
	transform: scale(1.1);
}
.kv-city__list-ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  height: calc(100vw * (32 / 1090));
  padding: 0 calc(100vw * (20 / 1090));
  background: rgb(126,189,217);
  background: linear-gradient(90deg, rgba(126,189,217,1) 0%, rgba(255,255,255,1) 100%);
  line-height: 1;
  transition: transform 0.2s ease-out;
}
.kv-city__list-ttl::before {
  position: absolute;
  top: calc(100vw * (1 / 1090));
  left: calc(100vw * (1 / 1090));
  z-index: -1;
  width: calc(100% - calc(100vw * (2 / 1090)));
  height: calc(100% - calc(100vw * (2 / 1090)));
  background-color: #21437b;
  content: '';
}
.kv-city__list-ttl::after {
  position: absolute;
  top: 50%;
  right: calc(100vw * (10 / 1090));
  transform: translateY(-50%) rotate(45deg);
  width: calc(100vw * (8 / 1090));
  height: calc(100vw * (8 / 1090));
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  content: '';
}
.kv-city__list-item > *:hover .kv-city__list-ttl {
  transform: translateX(-50%) scale(1.3);
}
.kv-city__list-ttl img {
  width: auto;
  max-width: initial;
  height: calc(100vw * (11 / 1090));
}
.kv-city__list-deco {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 3;
}
.kv-city__list-deco-inner {
  position: absolute;
}
.kv.is-howto .kv-city__list-deco-inner {
  animation-play-state: paused !important;
}
.kv-city__list-img {
  position: relative;
  z-index: 2;
}

/* -- Charactor -- */
[data-kv-city-list-item="charactor"] {
  width: calc(100vw * (212 / 1090)) !important;
  margin-left: calc(100vw * (40 / 1090));
  margin-right: calc(100vw * (40 / 1090));
}
[data-kv-city-list-item="charactor"] .kv-city__list-ttl {
  top: calc(100vw * (-27 / 1090));
  width: calc(100vw * (172 / 1090));
}
[data-kv-city-list-item="charactor"] .kv-city__list-deco-inner:nth-of-type(1) {
  top: calc(100vw * (27 / 1090));
  left: calc(100vw * (1 / 1090));
  width: calc(100vw * (111 / 1090));
  animation: deco-animate-profile01 2.0s steps(2, start) 0s infinite;
}
[data-kv-city-list-item="charactor"] .kv-city__list-deco-inner:nth-of-type(2) {
  top: calc(100vw * (19 / 1090));
  right: calc(100vw * (7 / 1090));
  width: calc(100vw * (85 / 1090));
  animation: deco-animate-profile02 2.0s steps(2, start) 0s infinite;
}
@keyframes deco-animate-profile01 {
  0% { transform: rotate(10deg); }
  100% { transform: rotate(-5deg); }
}
@keyframes deco-animate-profile02 {
  0% { transform: translateY(-5%); }
  100% { transform: translateY(5%); }
}

/* -- CM -- */
[data-kv-city-list-item="cm"] {
  width: calc(100vw * (177 / 1090)) !important;
}
[data-kv-city-list-item="cm"] .kv-city__list-ttl {
  top: calc(100vw * (139 / 1090));
  width: calc(100vw * (148 / 1090));
}
[data-kv-city-list-item="cm"] .kv-city__list-deco-inner:nth-of-type(1) {
  top: calc(100vw * (-68 / 1090));
  left: calc(100vw * (-14 / 1090));
  width: calc(100vw * (100 / 1090));
  animation: deco-animate-cm 12.0s ease 0s infinite;
  will-change: transform;
}
@keyframes deco-animate-cm {
  0% { transform: translateX(0); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

/* -- 01 -- */
[data-kv-city-list-item="01"] {
  width: calc(100vw * (248 / 1090)) !important;
  margin-left: calc(100vw * (20 / 1090));
  margin-right: calc(100vw * (20 / 1090));
}
[data-kv-city-list-item="01"] .kv-city__list-ttl {
  top: calc(100vw * (78 / 1090));
  width: calc(100vw * (190 / 1090));
}
[data-kv-city-list-item="01"] .kv-city__list-deco-inner:nth-of-type(1) {
  top: calc(100vw * (3 / 1090));
  right: calc(100vw * (9 / 1090));
  width: calc(100vw * (68 / 1090));
  animation: deco-animate-01 3.0s ease 0s infinite;
  will-change: transform;
}
@keyframes deco-animate-01 {
  0% { transform: translateY(0); }
  50% { transform: translateY(-75%); }
  100% { transform: translateY(0); }
}

/* -- 02 -- */
[data-kv-city-list-item="02"] {
  width: calc(100vw * (142 / 1090)) !important;
  margin-left: calc(100vw * (20 / 1090));
  margin-right: calc(100vw * (20 / 1090));
}
[data-kv-city-list-item="02"] .kv-city__list-ttl {
  top: calc(100vw * (122 / 1090));
  width: calc(100vw * (150 / 1090));
}
[data-kv-city-list-item="02"] .kv-city__list-ttl img {
  height: calc(100vw * (21 / 1090));
}
[data-kv-city-list-item="02"] .kv-city__list-deco-inner:nth-of-type(1) {
  top: calc(100vw * (-26 / 1090));
  left: calc(100vw * (48 / 1090));
  width: calc(100vw * (44 / 1090));
  animation: deco-animate-02 3.0s ease 0s infinite;
  will-change: transform;
}
@keyframes deco-animate-02 {
  0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  2% { transform: scale(0.9, 0.9) translate(0%, 5%); }
  4% { transform: scale(1.3, 0.8) translate(0%, 10%); }
  10% { transform: scale(0.8, 1.3) translate(0%, -10%); }
  20% { transform: scale(1.1, 0.9) translate(0%, 5%); }
  30% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

/* -- 03 -- */
[data-kv-city-list-item="03"] {
  width: calc(100vw * (250 / 1090)) !important;
}
[data-kv-city-list-item="03"] .kv-city__list-ttl {
  top: calc(100vw * (181 / 1090));
  width: calc(100vw * (96 / 1090));
}
[data-kv-city-list-item="03"] .kv-city__list-deco-inner:nth-of-type(1),
[data-kv-city-list-item="03"] .kv-city__list-deco-inner:nth-of-type(2) {
  top: calc(100vw * (-63 / 1090));
  left: calc(100vw * (22 / 1090));
  width: calc(100vw * (181 / 1090));
  animation: deco-animate-03 3.5s ease-out 0s infinite;
  will-change: transform, opacity;
}
[data-kv-city-list-item="03"] .kv-city__list-deco-inner:nth-of-type(2) {
  animation-delay: 0.4s;
}
@keyframes deco-animate-03 {
  0% {transform: translate(0, 10%) scale(1); opacity: 0.5;}
  100% {transform: translate(0, -100%) scale(1.25); opacity: 0;}
}

/* -- 04 -- */
[data-kv-city-list-item="04"] {
  width: calc(100vw * (230 / 1090)) !important;
}
[data-kv-city-list-item="04"] .kv-city__list-ttl {
  top: calc(100vw * (128 / 1090));
  width: calc(100vw * (115 / 1090));
}
[data-kv-city-list-item="04"] .kv-city__list-deco-inner:nth-of-type(1),
[data-kv-city-list-item="04"] .kv-city__list-deco-inner:nth-of-type(2),
[data-kv-city-list-item="04"] .kv-city__list-deco-inner:nth-of-type(3) {
  width: calc(100vw * (181 / 1090));
  animation: deco-animate-04 6.0s steps(14, end) 0s infinite;
  will-change: transform;
}
[data-kv-city-list-item="04"] .kv-city__list-deco-inner:nth-of-type(1) {
  top: calc(100vw * (-107 / 1090));
  left: calc(100vw * (-45 / 1090));
}
[data-kv-city-list-item="04"] .kv-city__list-deco-inner:nth-of-type(2) {
  top: calc(100vw * (-112 / 1090));
  right: calc(100vw * (-45 / 1090));
  animation-delay: 0.5s;
}
[data-kv-city-list-item="04"] .kv-city__list-deco-inner:nth-of-type(3) {
  top: calc(100vw * (-29 / 1090));
  left: calc(100vw * (27 / 1090));
  animation-delay: 1.0s;
}
@keyframes deco-animate-04  {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* -- 05 -- */
[data-kv-city-list-item="05"] {
  width: calc(100vw * (187 / 1090)) !important;
}
[data-kv-city-list-item="05"] .kv-city__list-ttl {
  top: calc(100vw * (80 / 1090));
  width: calc(100vw * (150 / 1090));
}
[data-kv-city-list-item="05"] .kv-city__list-deco-inner:nth-of-type(1),
[data-kv-city-list-item="05"] .kv-city__list-deco-inner:nth-of-type(2) {
  top: calc(100vw * (-42 / 1090));
  left: calc(100vw * (17 / 1090));
  width: calc(100vw * (117 / 1090));
  animation: deco-animate-05 3.0s ease-out 0s infinite;
  will-change: transform, opacity;
}
@keyframes deco-animate-05 {
  0% {transform: translate(0, 15%) scale(1); opacity: 0.5;}
  100% {transform: translate(0, -100%) scale(1.25); opacity: 0;}
}

/* -- 06 -- */
[data-kv-city-list-item="06"] {
  width: calc(100vw * (233 / 1090)) !important;
}
[data-kv-city-list-item="06"] .kv-city__list-ttl {
  top: calc(100vw * (152 / 1090));
  width: calc(100vw * (180 / 1090));
}
[data-kv-city-list-item="06"] .kv-city__list-deco-inner:nth-of-type(1) {
  top: calc(100vw * (-40 / 1090));
  left: calc(100vw * (89 / 1090));
  width: calc(100vw * (68 / 1090));
  animation: deco-animate-06 5.0s ease 0s infinite;
  will-change: transform;
}
@keyframes deco-animate-06 {
  0% { transform: translate(0, 0) rotate(-3deg); }
  25% { transform: translate(50%, -35%) rotate(0); }
  50% { transform: translate(0, 0) rotate(3deg); }
  75% { transform: translate(-50%, -35%) rotate(0); }
  100% { transform: translate(0, 0) rotate(-3deg); }
}

/* -- News -- */
[data-kv-city-list-item="news"] {
  width: calc(100vw * (156 / 1090)) !important;
  margin-left: calc(100vw * (10 / 1090));
  margin-right: calc(100vw * (10 / 1090));
}
[data-kv-city-list-item="news"] .kv-city__list-ttl {
  top: calc(100vw * (130 / 1090));
  width: calc(100vw * (117 / 1090));
}
[data-kv-city-list-item="news"] .kv-city__list-deco-inner:nth-of-type(1) {
  top: calc(100vw * (-38 / 1090));
  left: calc(100vw * (72 / 1090));
  width: calc(100vw * (12 / 1090));
  transform-origin: 50% 100%;
  animation: deco-animate-news 3.0s ease 0s infinite;
  will-change: transform;
}
@keyframes deco-animate-news {
  0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  2% { transform: scale(0.9, 0.9) translate(0%, 10%); }
  4% { transform: scale(2.0, 0.8) translate(0%, 20%); }
  10% { transform: scale(0.8, 1.8) translate(0%, -10%); }
  20% { transform: scale(1.1, 0.9) translate(0%, 5%); }
  30% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

/* -- Topics -- */
[data-kv-city-list-item="topics"] {
  width: calc(100vw * (226 / 1090)) !important;
}
[data-kv-city-list-item="topics"] .kv-city__list-ttl {
  top: calc(100vw * (40 / 1090));
  width: calc(100vw * (148 / 1090));
}
[data-kv-city-list-item="topics"] .kv-city__list-deco-inner:nth-of-type(1) {
  top: calc(100vw * (-48 / 1090));
  right: calc(100vw * (12 / 1090));
  width: calc(100vw * (68 / 1090));
  animation: deco-animate-topics 4.0s ease 0s infinite;
  will-change: transform;
}
@keyframes deco-animate-topics {
  0% { transform: translateX(0) rotate(5deg); }
  50% { transform: translateX(-50%) rotate(-3deg); }
  100% { transform: translateX(0) rotate(5deg); }
}

/* -- Tokyo Gas -- */
[data-kv-city-list-item="tokyogas"] {
  width: calc(100vw * (180 / 1090)) !important;
  margin-left: calc(100vw * (40 / 1090));
  margin-right: calc(100vw * (40 / 1090));
}
[data-kv-city-list-item="tokyogas"] .kv-city__list-ttl {
  top: calc(100vw * (112 / 1090));
  width: calc(100vw * (146 / 1090));
}
[data-kv-city-list-item="tokyogas"] .kv-city__list-deco {
  z-index: 1;
}
[data-kv-city-list-item="tokyogas"] .kv-city__list-deco-inner:nth-of-type(1) {
  top: calc(100vw * (-74 / 1090));
  left: calc(100vw * (65 / 1090));
  width: calc(100vw * (47 / 1090));
  animation: deco-animate-tokyogas 2.5s ease-in-out 0s infinite;
  transform-origin: 50% 100%;
  will-change: transform;
}
@keyframes deco-animate-tokyogas {
  0% { transform:scale(1); }
  3.5% { transform:scale(1.1); }
  7% { transform:scale(1); }
  10% { transform:scale(1.1); }
  13.5% { transform:scale(1); }
  17% { transform:scale(1.1); }
  20% { transform:scale(1); }
}

@media screen and (max-width: 767px) {
  .kv-city::after {
    height: calc(100vw * (120 / 390));
  }

  .kv-city__sign {
    align-items: flex-start;
    top: calc(100vw * (6 / 390) * 1.1);
    width: calc(100vw * (186 / 390) * 1.1);
    /* height: calc(100vw * (58 / 390) * 1.1); */
    height: calc(100vw * (38 / 390) * 1.1);
    /* padding: calc(100vw * (30 / 390) * 1.1) calc(100vw * (10 / 390) * 1.1) 0 calc(100vw * (10 / 390) * 1.1); */
    padding: calc(100vw * (7 / 390) * 1.1) calc(100vw * (10 / 390) * 1.1) 0 calc(100vw * (10 / 390) * 1.1);
    margin-left: calc(100vw * ((186 / 390) / -2) * 1.1);
    border-width: calc(100vw * (3 / 390) * 1.1);
  }
  .kv-city__sign::before,
  .kv-city__sign::after {
    top: calc(100vw * (-10 / 390) * 1.1);
    width: calc(100vw * (10 / 390) * 1.1);
    height: calc(100vw * (10 / 390) * 1.1);
  }
  .kv-city__sign::before {
    left: calc(100vw * (25 / 390) * 1.1);
  }
  .kv-city__sign::after {
    right: calc(100vw * (25 / 390) * 1.1);
  }
  .kv-city__sign-loc {
    position: absolute;
    top: calc(100vw * (8 / 390) * 1.1);
    left: 0;
    width: 100%;
    height: calc(100vw * (16 / 390) * 1.1);
  }
  .kv-city__sign-prev,
  .kv-city__sign-next {
    width: calc(100vw * (75 / 390) * 1.1);
    /* height: calc(100vw * (14 / 390) * 1.1); */
    height: calc(100vw * (18 / 390) * 1.1);
  }
  .kv-city__sign-prev::before,
  .kv-city__sign-next::before {
    position: absolute;
    width: calc(100vw * (10 / 390) * 1.1);
  }
  .kv-city__sign-prev::before {
    left: calc(100vw * (-10 / 390) * 1.05);
  }
  .kv-city__sign-next::before {
    right: calc(100vw * (-10 / 390) * 1.05);
  }
  .kv-city__sign-item::after {
    /* background-size: auto calc(100vw * (8 / 390) * 1.1); */
    background-size: auto calc(100vw * (8.5 / 390) * 1.1);
  }
  .kv-city__sign-loc::after {
    background-size: auto calc(100vw * (16 / 390) * 1.1);
  }
  
  .kv-city__nav {
    bottom: auto;
    top: 50%;
    transform-origin: 50% 50%;
  }
  body.is-talk .kv-city__nav {
    z-index: 1;
  }
  .kv-city__nav-prev,
  .kv-city__nav-next {
    bottom: 50%;
    width: calc(100vw * (32 / 390) * 1.2);
    height: calc(100vw * (32 / 390) * 1.2);
  }
  .kv-city__nav-prev { 
    margin-left: calc(100vw * (-220 / 390) * 0.85);
  }
  .kv-city__nav-next {
    margin-left: calc(100vw * (175 / 390) * 0.85);
  }
  .kv-city__nav-prev::after,
  .kv-city__nav-next::after {
    width: calc(100vw * (10 / 390));
    height: calc(100vw * (10 / 390));
    border-top-width: calc(100vw * (2 / 390));
  }
  .kv-city__nav-prev::after {
    margin-left: calc(100vw * (2 / 390));
    border-left-width: calc(100vw * (2 / 390));
  }
  .kv-city__nav-next::after {
    margin-left: calc(100vw * (-2 / 390));
    border-right-width: calc(100vw * (2 / 390));
  }

  .kv-city__list {
    bottom: calc(100vw * (119 / 390));
    height: calc(100% - (100vw * (119 / 390)));
  }

  .kv-city__list .slick-track {
    background-size: auto calc(100vw * (510 / 390));
  }

  .kv-city__list-item {
    margin-left: calc(100vw * (50 / 390));
    margin-right: calc(100vw * (50 / 390));
  }
  .slick-center .kv-city__list-inner {
    transform: scale(1.05);
  }
  .kv-city__list-ttl {
    height: calc(100vw * (42 / 390));
    padding: 0 calc(100vw * (10 / 390));
  }
  .kv-city__list-item > *:hover .kv-city__list-ttl {
    transform: translateX(-50%) scale(1);
  }
  .kv-city__list-ttl::before {
    top: calc(100vw * (2 / 390));
    left: calc(100vw * (2 / 390));
    width: calc(100% - calc(100vw * (4 / 390)));
    height: calc(100% - calc(100vw * (4 / 390)));
  }
  .kv-city__list-ttl::after {
    right: calc(100vw * (12 / 390));
    width: calc(100vw * (8 / 390));
    height: calc(100vw * (8 / 390));
  }
  .kv-city__list-ttl img {
    height: calc(100vw * (14 / 390));
  }

  /* -- Charactor -- */
  [data-kv-city-list-item="charactor"] {
    width: calc(100vw * (212 / 390) * 1.3) !important;
    margin-left: calc(100vw * (25 / 390) * 1.3);
    margin-right: calc(100vw * (25 / 390) * 1.3);
  }
  [data-kv-city-list-item="charactor"] .kv-city__list-ttl {
    top: calc(100vw * (-27 / 390) * 1.3);
    width: calc(100vw * (172 / 390) * 1.3);
  }
  [data-kv-city-list-item="charactor"] .kv-city__list-deco-inner:nth-of-type(1) {
    top: calc(100vw * (27 / 390) * 1.3);
    left: calc(100vw * (1 / 390) * 1.3);
    width: calc(100vw * (111 / 390) * 1.3);
  }
  [data-kv-city-list-item="charactor"] .kv-city__list-deco-inner:nth-of-type(2) {
    top: calc(100vw * (19 / 390) * 1.3);
    right: calc(100vw * (7 / 390) * 1.3);
    width: calc(100vw * (85 / 390) * 1.3);
  }

  /* -- CM -- */
  [data-kv-city-list-item="cm"] {
    width: calc(100vw * (177 / 390) * 1.3) !important;
  }
  [data-kv-city-list-item="cm"] .kv-city__list-ttl {
    top: calc(100vw * (139 / 390) * 1.3);
    width: calc(100vw * (148 / 390) * 1.3);
  }
  [data-kv-city-list-item="cm"] .kv-city__list-deco-inner:nth-of-type(1) {
    top: calc(100vw * (-68 / 390) * 1.3);
    left: calc(100vw * (-14 / 390) * 1.3);
    width: calc(100vw * (100 / 390) * 1.3);
  }

  /* -- 01 -- */
  [data-kv-city-list-item="01"] {
    width: calc(100vw * (248 / 390) * 1.3) !important;
    margin-left: calc(100vw * (2 / 390) * 1.3);
    margin-right: calc(100vw * (2 / 390) * 1.3);
  }
  [data-kv-city-list-item="01"] .kv-city__list-ttl {
    top: calc(100vw * (78 / 390) * 1.3);
    width: calc(100vw * (190 / 390) * 1.3);
  }
  [data-kv-city-list-item="01"] .kv-city__list-deco-inner:nth-of-type(1) {
    top: calc(100vw * (3 / 390) * 1.3);
    right: calc(100vw * (9 / 390) * 1.3);
    width: calc(100vw * (68 / 390) * 1.3);
  }

  /* -- 02 -- */
  [data-kv-city-list-item="02"] {
    width: calc(100vw * (142 / 390) * 1.3) !important;
    margin-left: calc(100vw * (2 / 390) * 1.3);
    margin-right: calc(100vw * (2 / 390) * 1.3);
  }
  [data-kv-city-list-item="02"] .kv-city__list-ttl {
    top: calc(100vw * (122 / 390) * 1.3);
    width: calc(100vw * (150 / 390) * 1.3);
  }
  [data-kv-city-list-item="02"] .kv-city__list-ttl img {
    height: calc(100vw * (21 / 390) * 1.3);
  }
  [data-kv-city-list-item="02"] .kv-city__list-deco-inner:nth-of-type(1) {
    top: calc(100vw * (-26 / 390) * 1.3);
    left: calc(100vw * (48 / 390) * 1.3);
    width: calc(100vw * (44 / 390) * 1.3);
  }

  /* -- 03 -- */
  [data-kv-city-list-item="03"] {
    width: calc(100vw * (250 / 390) * 1.3) !important;
  }
  [data-kv-city-list-item="03"] .kv-city__list-ttl {
    top: calc(100vw * (181 / 390) * 1.3);
    width: calc(100vw * (96 / 390) * 1.3);
  }
  [data-kv-city-list-item="03"] .kv-city__list-deco-inner:nth-of-type(1),
  [data-kv-city-list-item="03"] .kv-city__list-deco-inner:nth-of-type(2) {
    top: calc(100vw * (-63 / 390) * 1.3);
    left: calc(100vw * (22 / 390) * 1.3);
    width: calc(100vw * (181 / 390) * 1.3);
  }

  /* -- 04 -- */
  [data-kv-city-list-item="04"] {
    width: calc(100vw * (230 / 390) * 1.3) !important;
  }
  [data-kv-city-list-item="04"] .kv-city__list-ttl {
    top: calc(100vw * (128 / 390) * 1.3);
    width: calc(100vw * (115 / 390) * 1.3);
  }
  [data-kv-city-list-item="04"] .kv-city__list-deco-inner:nth-of-type(1),
  [data-kv-city-list-item="04"] .kv-city__list-deco-inner:nth-of-type(2),
  [data-kv-city-list-item="04"] .kv-city__list-deco-inner:nth-of-type(3) {
    width: calc(100vw * (181 / 390) * 1.3);
  }
  [data-kv-city-list-item="04"] .kv-city__list-deco-inner:nth-of-type(1) {
    top: calc(100vw * (-107 / 390) * 1.3);
    left: calc(100vw * (-45 / 390) * 1.3);
  }
  [data-kv-city-list-item="04"] .kv-city__list-deco-inner:nth-of-type(2) {
    top: calc(100vw * (-112 / 390) * 1.3);
    right: calc(100vw * (-45 / 390) * 1.3);
  }
  [data-kv-city-list-item="04"] .kv-city__list-deco-inner:nth-of-type(3) {
    top: calc(100vw * (-29 / 390) * 1.3);
    left: calc(100vw * (27 / 390) * 1.3);
  }

  /* -- 05 -- */
  [data-kv-city-list-item="05"] {
    width: calc(100vw * (187 / 390) * 1.3) !important;
  }
  [data-kv-city-list-item="05"] .kv-city__list-ttl {
    top: calc(100vw * (80 / 390) * 1.3);
    width: calc(100vw * (150 / 390) * 1.3);
  }
  [data-kv-city-list-item="05"] .kv-city__list-deco-inner:nth-of-type(1),
  [data-kv-city-list-item="05"] .kv-city__list-deco-inner:nth-of-type(2) {
    top: calc(100vw * (-42 / 390) * 1.3);
    left: calc(100vw * (17 / 390) * 1.3);
    width: calc(100vw * (117 / 390) * 1.3);
  }

  /* -- 06 -- */
  [data-kv-city-list-item="06"] {
    width: calc(100vw * (233 / 390) * 1.3) !important;
  }
  [data-kv-city-list-item="06"] .kv-city__list-ttl {
    top: calc(100vw * (152 / 390) * 1.3);
    width: calc(100vw * (180 / 390) * 1.3);
  }
  [data-kv-city-list-item="06"] .kv-city__list-deco-inner:nth-of-type(1) {
    top: calc(100vw * (-40 / 390) * 1.3);
    left: calc(100vw * (89 / 390) * 1.3);
    width: calc(100vw * (68 / 390) * 1.3);
  }

  /* -- News -- */
  [data-kv-city-list-item="news"] {
    width: calc(100vw * (156 / 390) * 1.3) !important;
    margin-left: calc(100vw * (10 / 390) * 1.3);
    margin-right: calc(100vw * (10 / 390) * 1.3);
  }
  [data-kv-city-list-item="news"] .kv-city__list-ttl {
    top: calc(100vw * (130 / 390) * 1.3);
    width: calc(100vw * (117 / 390) * 1.3);
  }
  [data-kv-city-list-item="news"] .kv-city__list-deco-inner:nth-of-type(1) {
    top: calc(100vw * (-38 / 390) * 1.3);
    left: calc(100vw * (72 / 390) * 1.3);
    width: calc(100vw * (12 / 390) * 1.3);
  }

  /* -- Topics -- */
  [data-kv-city-list-item="topics"] {
    width: calc(100vw * (226 / 390) * 1.3) !important;
  }
  [data-kv-city-list-item="topics"] .kv-city__list-ttl {
    top: calc(100vw * (40 / 390) * 1.3);
    width: calc(100vw * (148 / 390) * 1.3);
  }
  [data-kv-city-list-item="topics"] .kv-city__list-deco-inner:nth-of-type(1) {
    top: calc(100vw * (-48 / 390) * 1.3);
    right: calc(100vw * (12 / 390) * 1.3);
    width: calc(100vw * (68 / 390) * 1.3);
  }

  /* -- Tokyo Gas -- */
  [data-kv-city-list-item="tokyogas"] {
    width: calc(100vw * (180 / 390) * 1.3) !important;
  }
  [data-kv-city-list-item="tokyogas"] .kv-city__list-ttl {
    top: calc(100vw * (112 / 390) * 1.3);
    width: calc(100vw * (146 / 390) * 1.3);
  }
  [data-kv-city-list-item="tokyogas"] .kv-city__list-deco {
    z-index: 1;
  }
  [data-kv-city-list-item="tokyogas"] .kv-city__list-deco-inner:nth-of-type(1) {
    top: calc(100vw * (-74 / 390) * 1.3);
    left: calc(100vw * (65 / 390) * 1.3);
    width: calc(100vw * (47 / 390) * 1.3);
  }
}


/**
 * Key Visual (Lead)
 * -------------------------------
 */

.kv__lead {
  display: none;
  background-color: #FFF;
  background-image: none;
  padding: 0;
}

.kv__lead-inner {
  padding: calc(100vw * (25 / 1090)) calc(100vw * (25 / 1090)) calc(100vw * (35 / 1090)) calc(100vw * (25 / 1090));
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.kv__lead-inner::-webkit-scrollbar{
  display: none;
}

.kv__lead-inner .simplebar-wrapper {
  height: 100%;
}

.kv__lead-inner .simplebar-vertical {
  top: calc(100vw * (25 / 1090));
  right: calc(100vw * (9 / 1090));
  height: calc(100% - (100vw * (50 / 1090)));
}

.kv__lead-ttl {
  line-height: 1;
}
.kv__lead-ttl img {
  width: 100%;
}

.kv__lead-txt {
  margin-top: calc(100vw * (30 / 1090));
  text-align: center;
}
.kv__lead-txt img {
  width: calc(100vw * (498 / 1090));
}

.kv__lead .kv-modal__nav {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 767px) {
  .kv__lead-inner {
    padding: calc(100vw * (30 / 390)) calc(100vw * (21 / 390));
    border-radius: calc(100vw * (19 / 390));
  }
  
  .kv__lead-inner .simplebar-vertical {
    top: calc(100vw * (30 / 390));
    right: calc(100vw * (5 / 390));
    height: calc(100% - (100vw * (60 / 390)));
  }

  .kv__lead-txt {
    margin-top: calc(100vw * (30 / 390));
  }
  .kv__lead-txt img {
    width: calc(100vw * (310 / 390));
  }
}


/**
 * News
 * -------------------------------
 */

#news {
  margin-top: 100px;
}

@media screen and (max-width: 767px) {
  #news {
    margin-top: 60px;
  }
}


/**
 * Topics / Sites
 * -------------------------------
 */

#topics, #sites {
  padding-top: 40px;
}

#topics .c-frame-bg,
#sites .c-frame-bg {
  height: 300px;
}

#topics .c-section__cat-detail,
#sites .c-section__cat-detail {
  margin-top: -180px;
}

@media screen and (max-width: 767px) {
  #topics, #sites {
    padding-top: 30px;
  }

  #topics .c-frame-bg,
  #sites .c-frame-bg {
    height: 240px;
  }

  #topics .c-section__cat-detail,
  #sites .c-section__cat-detail {
    margin-top: -160px;
  }
}


/**
 * ================================================================================
 * Animation Settings
 * ================================================================================
 */

*[data-animate-type].is-animated {
  transition-property: all;
  transition-timing-function: ease-out;
}

*[data-animate-type='move-x-left1'] {
  opacity: 0;
  visibility: hidden;
  transform: translate(40px, 0) rotate(0.0001deg);
}
*[data-animate-type='move-x-left1'].is-animated {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0) rotate(0.0001deg);
  transition-duration: 0.5s;
}

*[data-animate-type='move-x-right1'] {
  opacity: 0;
  visibility: hidden;
  transform: translate(-40px, 0) rotate(0.0001deg);
}
*[data-animate-type='move-x-right1'].is-animated {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0) rotate(0.0001deg);
  transition-duration: 0.5s;
}

*[data-animate-type='move-y-up1'] {
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 40px) rotate(0.0001deg);
}
*[data-animate-type='move-y-up1'].is-animated {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0) rotate(0.0001deg);
  transition-duration: 0.5s;
}

*[data-animate-type='move-y-down1'] {
  opacity: 0;
  visibility: hidden;
  transform: translate(0, -40px) rotate(0.0001deg);
}
*[data-animate-type='move-y-down1'].is-animated,
*[data-slickslider-animate-type='move-y-down1'].is-animated {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0) rotate(0.0001deg);
  transition-duration: 0.5s;
}

*[data-animate-type='zoom-in1'] {
  transform: scale(1, 1) rotate(0.0001deg);
}
*[data-animate-type='zoom-in1'].is-animated,
*[data-slickslider-animate-type='zoom1'].is-animated {
  transform: scale(1.1, 1.1) rotate(0.0001deg);
  transition-duration: 0.5s;
}

*[data-animate-type='zoom-out1'] {
  transform: scale(1.1, 1.1) rotate(0.0001deg);
}
*[data-animate-type='zoom-out1'].is-animated,
*[data-slickslider-animate-type='zoom-out1'].is-animated {
  transform: scale(1, 1) rotate(0.0001deg);
  transition-duration: 0.5s;
}

*[data-animate-type='scale-x-center1'] {
  transform: scale(0, 1) rotate(0.0001deg);
}
*[data-animate-type='scale-x-center1'].is-animated,
*[data-slickslider-animate-type='scale-x-center1'].is-animated {
  transform: scale(1, 1) rotate(0.0001deg);
  transition-duration: 0.5s;
}

*[data-animate-type='scale-x-left1'] {
  transform-origin: right top;
  transform: scale(0, 1) rotate(0.0001deg);
}
*[data-animate-type='scale-x-left1'].is-animated,
*[data-slickslider-animate-type='scale-x-left1'].is-animated {
  transform: scale(1, 1) rotate(0.0001deg);
  transition-duration: 0.5s;
}

*[data-animate-type='scale-x-right1'] {
  transform-origin: left top;
  transform: scale(0, 1) rotate(0.0001deg);
}
*[data-animate-type='scale-x-right1'].is-animated,
*[data-slickslider-animate-type='scale-x-right1'].is-animated{
  transform: scale(1, 1) rotate(0.0001deg);
  transition-duration: 0.5s;
}

*[data-animate-type='scale-y-center1'] {
  transform: scale(1, 0) rotate(0.0001deg);
}
*[data-animate-type='scale-y-center1'].is-animated,
*[data-slickslider-animate-type='scale-y-center1'].is-animated {
  transform: scale(1, 1) rotate(0.0001deg);
  transition-duration: 0.5s;
}

*[data-animate-type='scale-y-up1'] {
  transform-origin: left bottom;
  transform: scale(1, 0) rotate(0.0001deg);
}
*[data-animate-type='scale-y-up1'].is-animated {
  transform: scale(1, 1) rotate(0.0001deg);
  transition-duration: 0.5s;
}

*[data-animate-type='scale-y-down1'] {
  transform-origin: left top;
  transform: scale(1, 0) rotate(0.0001deg);
}
*[data-animate-type='scale-y-down1'].is-animated {
  transform: scale(1, 1) rotate(0.0001deg);
  transition-duration: 0.5s;
}

*[data-animate-type='fade1'] {
  opacity: 0;
  visibility: hidden;
}
*[data-animate-type='fade1'].is-animated {
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

*[data-animate-type='blur1'] {
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
*[data-animate-type='blur1'].is-animated {
  opacity: 1;
  visibility: visible;
  -webkit-filter: blur(0);
  filter: blur(0);
  transition-duration: 0.5s;
}

@media all and (max-width: 767px) {
  *[data-animate-type='move-x-left1'] {
    transform: translate(30px, 0) rotate(0.0001deg);
  }

  *[data-animate-type='move-x-right1'] {
    transform: translate(-30px, 0) rotate(0.0001deg);
  }

  *[data-animate-type='move-y-up1'] {
    transform: translate(0, 30px) rotate(0.0001deg);
  }

  *[data-animate-type='move-y-down1'] {
    transform: translate(0, -30px) rotate(0.0001deg);
  }
}