@charset "UTF-8";
/*----------------------------------------------------------------------------------------------------------
writing-mode mixin
    Usage:
        $orientation    v (vertical)
                        h (horizontal)
		$direction      rl (right to left)
						lr (left to right)
----------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------
writing-mode mixin
    Usage:
        $orientation    v (vertical)
                        h (horizontal)
		$direction      rl (right to left)
						lr (left to right)
----------------------------------------------------------------------------------------------------------*/
/**
 * !!! 変数の定義 !!!
 * 変数は作りすぎず、デザインコンポーネント、もしくはシンボルを元に作成する
 * またGoogle Font等の特殊なウェブフォントの場合、そのフォント名を定義してわかりやすくする
 */
/**
 * !!! ブレークポイント !!!
 */
@media only screen and (max-width: 767px) {
  .pc {
    display: none !important; } }

@media only screen and (min-width: 768px) {
  .sp {
    display: none !important; } }

/**
 * !!! browsersyncのアラートを非表示 !!!
 */
/**
 * !!! ページCSS基本設定 !!!
 * 基本的にこの箇所は操作しないようにする
 * ----------------ここから----------------
 */
* {
  box-sizing: border-box; }

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

/**
 * ----------------ここまで----------------
 */
/**
 * !!! FlexBox Rule !!!
 * 都度scssを記載するのではなく、クラスで定義し、クラスの付け外しで管理すること。
 */
.flex-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between; }

/**
 * !!! Inner Rule !!!
 * 最初にデザインを確認し、存在するinnerパターンを作成すること
 * max-width指定のみだと、画面幅を縮小するときに余白が消えるため、paddingをつけること
 * 例) innerが1000pxであれば、
 *     max-width: 1060px;
 *     padding: 0 30px;
 */
.inner {
  max-width: 1440px;
  padding: 0 80px;
  margin: 0 auto; }
  @media only screen and (max-width: 1440px) {
    .inner {
      padding: 0 5.55555556vw; } }
  @media only screen and (max-width: 767px) {
    .inner {
      padding: 0 18px; } }

[data-trigger] {
  position: relative;
  top: 60px;
  -webkit-transition: top 1s, opacity 1s;
  -moz-transition: top 1s, opacity 1s;
  -o-transition: top 1s, opacity 1s;
  transition: top 1s, opacity 1s;
  opacity: 0; }
  [data-trigger].visible {
    top: 0;
    opacity: 1; }

.l-header .l-header__inner {
  max-width: 100%; }

.p-contact {
  max-width: 100%; }

@media screen and (min-width: 1186px) {
  .l-header .l-header__inner {
    padding-left: 33px; }
  .l-header .l-header__nav-list {
    margin-left: 52px; }
  .l-header .l-header__nav-list li:not([class]) + li:not([class]) {
    margin-left: 22px; }
  .l-header .l-header__language-top:after {
    margin-left: 6px; } }

@media only screen and (max-width: 1430px) {
  .l-header .l-header__nav-list {
    margin-left: 10px; } }

@media only screen and (max-width: 1390px) {
  .l-header .l-header__button {
    width: 158px; } }

@media only screen and (max-width: 1340px) {
  .l-header .l-header__logo {
    width: 160px; } }

@media only screen and (max-width: 1185px) {
  .l-header .c-btn {
    margin-top: 3rem; } }

@media only screen and (max-width: 1185px) {
  .l-header__nav {
    height: calc(100vh - 58px) !important;
    overflow-y: scroll;
    padding-bottom: 100px; } }

.l-header__nav-list > li {
  position: relative; }

@media only screen and (min-width: 1186px) {
  .l-header__nav-link.has-child:after {
    content: "";
    display: inline-block;
    width: 0.625rem;
    height: 0.375rem;
    content: "";
    background-image: url(/wp-content/themes/theme-asene-us/assets/img/icon-arrow-bottom.svg);
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    margin-left: 7px; } }

@media only screen and (max-width: 1185px) {
  .l-header__nav-link.has-child:hover:after {
    transform: rotate(90deg); } }

@media only screen and (min-width: 1187px) {
  .l-header__nav-link.has-child.is-active:after {
    transform: rotate(-180deg); } }

@media only screen and (max-width: 1185px) {
  .l-header__nav-link.has-child.is-active:after {
    transform: rotate(-90deg); } }

@media only screen and (max-width: 1185px) {
  .l-header__nav-link.has-child:after {
    transform: rotate(90deg);
    transform-origin: center; } }

.l-header__child-list {
  min-width: 207px;
  position: absolute;
  top: 60px;
  left: 0;
  background: #fff;
  border-radius: 2px;
  padding: 15px 10px;
  filter: drop-shadow(0 3px 7px rgba(22, 96, 175, 0.21));
  will-change: filter;
  opacity: 0;
  visibility: hidden;
  transform: translate(0, -20px);
  transition: opacity .3s, visibility .3s, transform .3s; }
  @media only screen and (max-width: 1185px) {
    .l-header__child-list {
      position: static;
      opacity: 1;
      transition: 0s;
      visibility: visible;
      transform: translate(0, 0px);
      display: none;
      filter: none;
      padding-bottom: 0;
      padding-right: 0; } }
  .l-header__child-list:before {
    content: "";
    width: 16px;
    height: 8px;
    display: block;
    background: #fff;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    position: absolute;
    top: -6px;
    left: 34px; }
  .l-header__child-list.is-active {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0px); }
  .l-header__child-list > li {
    margin-left: 0 !important;
    font-size: 16px;
    font-weight: 600;
    margin: 0 !important; }
    .l-header__child-list > li a {
      padding: 10px;
      display: block;
      transition: background-color .3s;
      border-radius: 3px; }
      @media only screen and (max-width: 1185px) {
        .l-header__child-list > li a {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-right: 0; } }
      .l-header__child-list > li a:hover {
        background: #DFEFF9; }
        @media only screen and (max-width: 1185px) {
          .l-header__child-list > li a:hover {
            background: none; } }
        @media only screen and (max-width: 1185px) {
          .l-header__child-list > li a:hover:after {
            transform: translate3d(0.3125rem, 0, 0); } }
      @media only screen and (max-width: 1185px) {
        .l-header__child-list > li a:after {
          display: block;
          width: .375rem;
          height: .6875rem;
          content: "";
          background-image: url(/wp-content/themes/theme-asene-us/assets/img/icon-arrow-button-right.svg);
          background-repeat: no-repeat;
          background-size: contain;
          transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
          transform: translateZ(0);
          transform-origin: left; } }

.c-main-visual {
  position: relative;
  min-height: 746px;
  padding: 120px 0 96px; }
  @media only screen and (max-width: 1440px) {
    .c-main-visual {
      padding: 8.33333333vw 0 6.66666667vw;
      min-height: 51.80555556vw; } }
  @media only screen and (max-width: 767px) {
    .c-main-visual {
      min-height: 668px;
      padding: 40px 0; } }
  .c-main-visual__bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    .c-main-visual__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center; }
  .c-main-visual .inner {
    position: relative; }
  .c-main-visual__top {
    display: flex;
    justify-content: space-between;
    max-width: 1195px;
    margin: 0 auto; }
    @media only screen and (max-width: 1440px) {
      .c-main-visual__top {
        max-width: 82.98611111vw; } }
    @media only screen and (max-width: 767px) {
      .c-main-visual__top {
        max-width: 100%;
        display: block; } }
    .c-main-visual__top__text {
      width: 44.60251046%; }
      @media only screen and (max-width: 767px) {
        .c-main-visual__top__text {
          width: 100%; } }
      .c-main-visual__top__text small {
        display: block;
        color: #1B60AC;
        font-size: 32px;
        line-height: 1.3;
        font-weight: 600;
        margin-bottom: 18px; }
        @media only screen and (max-width: 1440px) {
          .c-main-visual__top__text small {
            font-size: 2.22222222vw;
            margin-bottom: 1.25vw; } }
        @media only screen and (max-width: 767px) {
          .c-main-visual__top__text small {
            font-size: 16px;
            margin-bottom: 10px; } }
      .c-main-visual__top__text h1 {
        font-size: 56px;
        line-height: 1.1;
        letter-spacing: -0.02em;
        font-weight: 600;
        color: #2A4380; }
        @media only screen and (max-width: 1440px) {
          .c-main-visual__top__text h1 {
            font-size: 3.88888889vw; } }
        @media only screen and (max-width: 767px) {
          .c-main-visual__top__text h1 {
            font-size: 28px; } }
      .c-main-visual__top__text p {
        font-size: 18px;
        line-height: 1.3;
        font-weight: 600;
        color: #95AAD2;
        margin-top: 24px; }
        @media only screen and (max-width: 1440px) {
          .c-main-visual__top__text p {
            font-size: 1.25vw;
            margin-top: 1.66666667vw; } }
        @media only screen and (max-width: 767px) {
          .c-main-visual__top__text p {
            font-size: 14px;
            margin-top: 18px; } }
      .c-main-visual__top__text .c-button {
        margin-top: 40px; }
        @media only screen and (max-width: 1440px) {
          .c-main-visual__top__text .c-button {
            margin-top: 2.77777778vw; } }
        @media only screen and (max-width: 767px) {
          .c-main-visual__top__text .c-button {
            margin-top: 30px; } }
    .c-main-visual__top__image {
      width: 50.71129707%; }
      @media only screen and (max-width: 767px) {
        .c-main-visual__top__image {
          width: 100%; } }
  .c-main-visual__col3 {
    display: flex;
    justify-content: space-between;
    margin-top: 75px; }
    @media only screen and (max-width: 1440px) {
      .c-main-visual__col3 {
        margin-top: 5.20833333vw; } }
    @media only screen and (max-width: 767px) {
      .c-main-visual__col3 {
        margin-top: 37px; } }
    .c-main-visual__col3 dl {
      width: 32.890625%;
      padding: 15px 20px 20px;
      min-height: 120px;
      text-align: center;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; }
      @media only screen and (max-width: 1440px) {
        .c-main-visual__col3 dl {
          padding: 1.04166667vw 1.38888889vw 1.38888889vw;
          min-height: 8.33333333vw; } }
      @media only screen and (max-width: 767px) {
        .c-main-visual__col3 dl {
          min-height: 114px;
          width: 31.36966127%;
          padding: 20px 6px; } }
      .c-main-visual__col3 dl:before {
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        background: linear-gradient(to top, rgba(218, 236, 251, 0.7), rgba(246, 252, 252, 0.7));
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        will-change: filter; }
      .c-main-visual__col3 dl dt {
        font-size: 45px;
        font-weight: 700;
        color: #2A4380;
        position: relative;
        line-height: 1; }
        @media only screen and (max-width: 1440px) {
          .c-main-visual__col3 dl dt {
            font-size: 3.125vw; } }
        @media only screen and (max-width: 767px) {
          .c-main-visual__col3 dl dt {
            font-size: 22px;
            line-height: 1; } }
        .c-main-visual__col3 dl dt small {
          font-size: 35px;
          display: inline-block; }
          @media only screen and (max-width: 1440px) {
            .c-main-visual__col3 dl dt small {
              font-size: 2.43055556vw; } }
          @media only screen and (max-width: 767px) {
            .c-main-visual__col3 dl dt small {
              font-size: 17px; } }
        .c-main-visual__col3 dl dt .more {
          font-size: 31px; }
          @media only screen and (max-width: 1440px) {
            .c-main-visual__col3 dl dt .more {
              font-size: 2.15277778vw; } }
          @media only screen and (max-width: 767px) {
            .c-main-visual__col3 dl dt .more {
              font-size: 15px; } }
        .c-main-visual__col3 dl dt .most {
          font-size: 29px;
          line-height: 1.2; }
          @media only screen and (max-width: 1440px) {
            .c-main-visual__col3 dl dt .most {
              font-size: 2.01388889vw; } }
          @media only screen and (max-width: 767px) {
            .c-main-visual__col3 dl dt .most {
              font-size: 14px; } }
        .c-main-visual__col3 dl dt .most-most {
          font-size: 24px;
          line-height: 1.2; }
          @media only screen and (max-width: 1440px) {
            .c-main-visual__col3 dl dt .most-most {
              font-size: 1.66666667vw; } }
          @media only screen and (max-width: 767px) {
            .c-main-visual__col3 dl dt .most-most {
              font-size: 13px; } }
      .c-main-visual__col3 dl dd {
        font-size: 19px;
        font-weight: 600;
        color: #1660AF;
        margin-top: 7px;
        position: relative; }
        @media only screen and (max-width: 1440px) {
          .c-main-visual__col3 dl dd {
            font-size: 1.31944444vw;
            margin-top: 0.48611111vw; } }
        @media only screen and (max-width: 767px) {
          .c-main-visual__col3 dl dd {
            font-size: 10px;
            margin-top: 3px; } }

.c-button {
  width: 190px;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1660AF;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: color 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  border: 2px solid #1660AF; }
  @media only screen and (max-width: 1440px) {
    .c-button {
      width: 13.19444444vw;
      height: 3.54166667vw;
      font-size: 1.11111111vw; } }
  @media only screen and (max-width: 767px) {
    .c-button {
      width: 164px;
      height: 44px;
      font-size: 13px; } }
  .c-button:hover {
    color: #1660af;
    background: #fff; }

.c-sub-title {
  display: block;
  text-align: center;
  color: #3C3C3C;
  font-size: 22px;
  font-weight: 600; }
  @media only screen and (max-width: 1440px) {
    .c-sub-title {
      font-size: 1.52777778vw; } }
  @media only screen and (max-width: 767px) {
    .c-sub-title {
      font-size: 12px; } }

.c-companies {
  background: #DAECFB;
  padding: 48px 0px;
  border-bottom: 1px solid #8FAAD6;
  position: relative; }
  @media only screen and (max-width: 1440px) {
    .c-companies {
      padding: 3.33333333vw 0; } }
  @media only screen and (max-width: 767px) {
    .c-companies {
      padding: 26px 0 32px; } }
  .c-companies:before {
    content: "";
    width: 1px;
    height: 100%;
    display: block;
    background: #8FAAD6;
    position: absolute;
    top: 0;
    left: 80px;
    z-index: +1; }
    @media only screen and (max-width: 1440px) {
      .c-companies:before {
        left: 5.55555556vw; } }
    @media only screen and (max-width: 767px) {
      .c-companies:before {
        content: none; } }
  .c-companies:after {
    content: "";
    width: 1px;
    height: 100%;
    display: block;
    background: #8FAAD6;
    position: absolute;
    top: 0;
    right: 80px;
    z-index: +1; }
    @media only screen and (max-width: 1440px) {
      .c-companies:after {
        right: 5.55555556vw; } }
    @media only screen and (max-width: 767px) {
      .c-companies:after {
        content: none; } }
  .c-companies .inner {
    max-width: 100%;
    padding: 0 165px; }
    @media only screen and (max-width: 1440px) {
      .c-companies .inner {
        padding: 0 11.45833333vw; } }
    @media only screen and (max-width: 767px) {
      .c-companies .inner {
        padding: 0 27px; } }
  .c-companies__wrap {
    width: 100%;
    position: relative; }
    .c-companies__wrap:before {
      content: "";
      width: 80px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      background: linear-gradient(to right, #daecfb, rgba(218, 236, 251, 0));
      z-index: +2; }
      @media only screen and (max-width: 767px) {
        .c-companies__wrap:before {
          width: 40px; } }
    .c-companies__wrap:after {
      content: "";
      width: 80px;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      display: block;
      background: linear-gradient(to left, #daecfb, rgba(218, 236, 251, 0));
      z-index: +2; }
      @media only screen and (max-width: 767px) {
        .c-companies__wrap:after {
          width: 40px; } }
  .c-companies__list {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    mix-blend-mode: multiply; }
    @media only screen and (max-width: 767px) {
      .c-companies__list {
        margin-top: 25px; } }

.c-customer-logo-new {
  height: 2.5rem;
  margin-top: 2.5rem;
  font-size: 1rem;
  position: relative; }
  @media only screen and (max-width: 767px) {
    .c-customer-logo-new {
      height: 1.5rem;
      margin-top: 0; } }
  .c-customer-logo-new__wrap.swiper-wrapper {
    transition-timing-function: linear;
    will-change: transform; }
  .c-customer-logo-new__list {
    display: flex;
    width: auto;
    margin-right: auto;
    margin-left: auto; }
  .c-customer-logo-new__image {
    flex-shrink: 0;
    width: auto;
    height: 2.5rem;
    margin-right: 5rem; }
    @media only screen and (max-width: 767px) {
      .c-customer-logo-new__image {
        height: 1.5rem;
        margin-right: 3rem; } }
    .c-customer-logo-new__image img {
      width: auto;
      height: 100%; }

.c-whole {
  position: relative;
  padding: 88px 0 150px;
  background: linear-gradient(35deg, rgba(181, 213, 239, 0.7), rgba(181, 213, 239, 0.7), rgba(246, 252, 252, 0.3149), rgba(246, 252, 252, 0), rgba(246, 252, 252, 0), rgba(181, 213, 239, 0.7), rgba(181, 213, 239, 0.7)); }
  @media only screen and (max-width: 1440px) {
    .c-whole {
      padding: 6.11111111vw 0 10.41666667vw; } }
  @media only screen and (max-width: 767px) {
    .c-whole {
      padding-top: 44px;
      padding-bottom: 84px; } }
  .c-whole:before {
    content: "";
    width: 1px;
    height: 100%;
    display: block;
    background: #8FAAD6;
    position: absolute;
    top: 0;
    left: 80px; }
    @media only screen and (max-width: 1440px) {
      .c-whole:before {
        left: 5.55555556vw; } }
    @media only screen and (max-width: 767px) {
      .c-whole:before {
        left: 18px; } }
  .c-whole:after {
    content: "";
    width: 1px;
    height: 100%;
    display: block;
    background: #8FAAD6;
    position: absolute;
    top: 0;
    right: 80px; }
    @media only screen and (max-width: 1440px) {
      .c-whole:after {
        right: 5.55555556vw; } }
    @media only screen and (max-width: 767px) {
      .c-whole:after {
        right: 18px; } }
  .c-whole__dots-top {
    width: 1044px;
    position: absolute;
    top: 0;
    right: 80px;
    mix-blend-mode: overlay; }
    @media only screen and (max-width: 1440px) {
      .c-whole__dots-top {
        right: 5.55555556vw; } }
    @media only screen and (max-width: 767px) {
      .c-whole__dots-top {
        width: calc(100% - 36px);
        right: 18px; } }
  .c-whole__dots-bottom {
    width: 1044px;
    position: absolute;
    bottom: 0;
    left: 80px;
    mix-blend-mode: overlay; }
    @media only screen and (max-width: 1440px) {
      .c-whole__dots-bottom {
        left: 5.55555556vw; } }
    @media only screen and (max-width: 767px) {
      .c-whole__dots-bottom {
        width: calc(100% - 36px);
        left: 18px; } }
  .c-whole__line__wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }
  .c-whole__line {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: calc(50vw - 80px);
    display: flex; }
    @media only screen and (max-width: 1440px) {
      .c-whole__line {
        width: calc(50vw - 5.55555556vw); } }
    @media only screen and (max-width: 767px) {
      .c-whole__line {
        width: calc(50vw - 18px); } }
    .c-whole__line span {
      width: 1px;
      height: 100%;
      display: block;
      background: #EFF3FB;
      position: absolute;
      top: 0; }
      .c-whole__line span:nth-of-type(1) {
        left: 0; }
      .c-whole__line span:nth-of-type(2) {
        left: 50%;
        transform: translate(-50%, 0); }
      .c-whole__line span:nth-of-type(3) {
        right: 0; }
  .c-whole .inner {
    position: relative; }

.c-title02 {
  margin-bottom: 118px; }
  @media only screen and (max-width: 1440px) {
    .c-title02 {
      margin-bottom: 8.19444444vw; } }
  @media only screen and (max-width: 767px) {
    .c-title02 {
      margin-bottom: 44px; } }
  .c-title02 strong {
    display: block;
    text-align: center;
    color: #2A4380;
    font-size: 72px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0; }
    @media only screen and (max-width: 1440px) {
      .c-title02 strong {
        font-size: 5vw; } }
    @media only screen and (max-width: 767px) {
      .c-title02 strong {
        font-size: 28px;
        line-height: 1.41071429; } }
  .c-title02 small {
    display: block;
    text-align: center;
    color: #2A4380;
    font-size: 48px;
    line-height: 1;
    font-weight: 600;
    margin-top: 28px; }
    @media only screen and (max-width: 1440px) {
      .c-title02 small {
        font-size: 3.33333333vw;
        margin-top: 1.94444444vw; } }
    @media only screen and (max-width: 767px) {
      .c-title02 small {
        font-size: 18px;
        line-height: 1.41071429;
        margin-top: 18px; } }

.c-title03 {
  font-size: 56px;
  line-height: 1.1 !important;
  font-weight: 600;
  color: #2A4380; }
  @media only screen and (max-width: 1440px) {
    .c-title03 {
      font-size: 3.88888889vw; } }
  @media only screen and (max-width: 767px) {
    .c-title03 {
      font-size: 40px; } }
  .c-title03.small {
    font-size: 48px;
    white-space: nowrap; }
    @media only screen and (max-width: 1440px) {
      .c-title03.small {
        font-size: 3.33333333vw; } }
    @media only screen and (max-width: 767px) {
      .c-title03.small {
        font-size: 34px;
        white-space: wrap; } }

.c-text01 {
  font-size: 18px;
  line-height: 1.8;
  color: #3C3C3C; }
  @media only screen and (max-width: 1440px) {
    .c-text01 {
      font-size: 1.25vw; } }
  @media only screen and (max-width: 767px) {
    .c-text01 {
      font-size: 12px; } }

.c-text-image {
  display: flex;
  justify-content: space-between;
  max-width: 1180px;
  padding: 0 40px;
  margin: 0 auto; }
  @media only screen and (max-width: 1440px) {
    .c-text-image {
      padding: 0 2.77777778vw;
      max-width: 81.94444444vw; } }
  @media only screen and (max-width: 767px) {
    .c-text-image {
      max-width: 100%;
      padding: 0 20px;
      flex-direction: column; } }
  .c-text-image.vertical {
    flex-wrap: wrap; }
    .c-text-image.vertical .c-text-image__image {
      margin: 14px auto 0;
      max-width: 100%; }
      @media only screen and (max-width: 1440px) {
        .c-text-image.vertical .c-text-image__image {
          margin-top: 0.97222222vw; } }
      @media only screen and (max-width: 767px) {
        .c-text-image.vertical .c-text-image__image {
          margin-top: 32px; } }
  .c-text-image.wide {
    max-width: 1200px;
    margin-top: 160px;
    align-items: center; }
    @media only screen and (max-width: 1440px) {
      .c-text-image.wide {
        max-width: 83.33333333vw;
        margin-top: 11.11111111vw; } }
    @media only screen and (max-width: 767px) {
      .c-text-image.wide {
        max-width: 100%;
        margin-top: 80px; } }
    .c-text-image.wide .c-text-image__text {
      width: 440px; }
      @media only screen and (max-width: 1440px) {
        .c-text-image.wide .c-text-image__text {
          width: 30.55555556vw; } }
      @media only screen and (max-width: 767px) {
        .c-text-image.wide .c-text-image__text {
          width: 100%; } }
      .c-text-image.wide .c-text-image__text.left {
        margin-left: 0; }
      .c-text-image.wide .c-text-image__text.right {
        margin-right: 0; }
    .c-text-image.wide .c-text-image__image {
      max-width: calc(100% - 440px - 90px); }
      @media only screen and (max-width: 1440px) {
        .c-text-image.wide .c-text-image__image {
          max-width: calc(100% - 36.80555556vw); } }
      @media only screen and (max-width: 767px) {
        .c-text-image.wide .c-text-image__image {
          max-width: 100%; } }
  .c-text-image.modify {
    align-items: center; }
    .c-text-image.modify .c-text-image__text {
      width: 440px; }
      @media only screen and (max-width: 1440px) {
        .c-text-image.modify .c-text-image__text {
          width: 30.55555556vw; } }
      @media only screen and (max-width: 767px) {
        .c-text-image.modify .c-text-image__text {
          width: 100%; } }
      .c-text-image.modify .c-text-image__text.left {
        margin-left: 0; }
      .c-text-image.modify .c-text-image__text.right {
        margin-right: 0; }
    .c-text-image.modify .c-text-image__image {
      max-width: calc(100% - 440px - 90px); }
      @media only screen and (max-width: 1440px) {
        .c-text-image.modify .c-text-image__image {
          max-width: calc(100% - 36.80555556vw); } }
      @media only screen and (max-width: 767px) {
        .c-text-image.modify .c-text-image__image {
          max-width: 100%; } }
  .c-text-image.small {
    max-width: 1126px; }
    @media only screen and (max-width: 1440px) {
      .c-text-image.small {
        max-width: 78.19444444vw; } }
    @media only screen and (max-width: 767px) {
      .c-text-image.small {
        max-width: 100%; } }
  .c-text-image__text {
    width: 400px;
    position: relative;
    z-index: +1; }
    @media only screen and (max-width: 1440px) {
      .c-text-image__text {
        width: 27.77777778vw; } }
    @media only screen and (max-width: 767px) {
      .c-text-image__text {
        order: 1;
        width: 100%; } }
    .c-text-image__text.left {
      margin-left: 30px; }
      @media only screen and (max-width: 1440px) {
        .c-text-image__text.left {
          margin-left: 2.08333333vw; } }
      @media only screen and (max-width: 767px) {
        .c-text-image__text.left {
          margin-left: 0; } }
    .c-text-image__text.right {
      margin-right: 30px; }
      @media only screen and (max-width: 1440px) {
        .c-text-image__text.right {
          margin-right: 2.08333333vw; } }
      @media only screen and (max-width: 767px) {
        .c-text-image__text.right {
          margin-right: 0; } }
    .c-text-image__text.w100 {
      width: 100%;
      max-width: 1020px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 56px; }
      @media only screen and (max-width: 1440px) {
        .c-text-image__text.w100 {
          margin-bottom: 3.88888889vw; } }
      @media only screen and (max-width: 767px) {
        .c-text-image__text.w100 {
          display: block;
          margin-bottom: 0px; } }
    @media only screen and (min-width: 768px) {
      .c-text-image__text.ratio_23-77 .left {
        width: 23%;
        padding-right: 20px; } }
  @media only screen and (min-width: 768px) and (max-width: 1440px) {
    .c-text-image__text.ratio_23-77 .left {
      padding-right: 1.38888889vw; } }
    @media only screen and (min-width: 768px) {
        .c-text-image__text.ratio_23-77 .left .c-title03 {
          margin-bottom: 0; }
      .c-text-image__text.ratio_23-77 .c-text01 {
        width: 77%; }
      .c-text-image__text.ratio_27-73 .left {
        width: 27%;
        padding-right: 20px; } }
  @media only screen and (min-width: 768px) and (max-width: 1440px) {
    .c-text-image__text.ratio_27-73 .left {
      padding-right: 1.38888889vw; } }
    @media only screen and (min-width: 768px) {
        .c-text-image__text.ratio_27-73 .left .c-title03 {
          margin-bottom: 0; }
      .c-text-image__text.ratio_27-73 .c-text01 {
        width: 73%; }
      .c-text-image__text.ratio_30-70 .left {
        width: 30%;
        padding-right: 20px; } }
  @media only screen and (min-width: 768px) and (max-width: 1440px) {
    .c-text-image__text.ratio_30-70 .left {
      padding-right: 1.38888889vw; } }
    @media only screen and (min-width: 768px) {
        .c-text-image__text.ratio_30-70 .left .c-title03 {
          margin-bottom: 0; }
      .c-text-image__text.ratio_30-70 .c-text01 {
        width: 70%; }
      .c-text-image__text.ratio_43-56 .left {
        width: 43.43137255%;
        padding-right: 20px; } }
  @media only screen and (min-width: 768px) and (max-width: 1440px) {
    .c-text-image__text.ratio_43-56 .left {
      padding-right: 1.38888889vw; } }
    @media only screen and (min-width: 768px) {
        .c-text-image__text.ratio_43-56 .left .c-title03 {
          margin-bottom: 0; }
      .c-text-image__text.ratio_43-56 .c-text01 {
        width: 56.56862745%; }
      .c-text-image__text.ratio_26-74 .left {
        width: 26%;
        padding-right: 20px; } }
  @media only screen and (min-width: 768px) and (max-width: 1440px) {
    .c-text-image__text.ratio_26-74 .left {
      padding-right: 1.38888889vw; } }
    @media only screen and (min-width: 768px) {
        .c-text-image__text.ratio_26-74 .left .c-title03 {
          margin-bottom: 0; }
      .c-text-image__text.ratio_26-74 .c-text01 {
        width: 74%; }
      .c-text-image__text.ratio_50-50 .left {
        width: 50%;
        padding-right: 20px; } }
  @media only screen and (min-width: 768px) and (max-width: 1440px) {
    .c-text-image__text.ratio_50-50 .left {
      padding-right: 1.38888889vw; } }
    @media only screen and (min-width: 768px) {
        .c-text-image__text.ratio_50-50 .left .c-title03 {
          margin-bottom: 0; }
      .c-text-image__text.ratio_50-50 .c-text01 {
        width: 50%; } }
    .c-text-image__text .step {
      width: 72px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #1660AF;
      color: #fff;
      font-size: 19px;
      font-weight: 600;
      font-style: normal;
      margin-bottom: 10px; }
      @media only screen and (max-width: 1440px) {
        .c-text-image__text .step {
          width: 5vw;
          height: 5vw;
          font-size: 1.31944444vw;
          margin-bottom: 0.69444444vw; } }
      @media only screen and (max-width: 767px) {
        .c-text-image__text .step {
          width: 50px;
          height: 50px;
          font-size: 13px;
          margin-bottom: 8px; } }
    .c-text-image__text .sub-title {
      display: block;
      color: #2A4380;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 7px; }
      @media only screen and (max-width: 1440px) {
        .c-text-image__text .sub-title {
          font-size: 1.66666667vw;
          margin-bottom: 0.48611111vw; } }
      @media only screen and (max-width: 767px) {
        .c-text-image__text .sub-title {
          font-size: 24px;
          margin-bottom: 7px; } }
    .c-text-image__text .c-title03 {
      margin-bottom: 18px; }
      @media only screen and (max-width: 1440px) {
        .c-text-image__text .c-title03 {
          margin-bottom: 1.25vw; } }
      @media only screen and (max-width: 767px) {
        .c-text-image__text .c-title03 {
          margin-bottom: 12px; } }
  .c-text-image__image {
    width: 100%;
    max-width: calc(100% - 400px - 90px); }
    @media only screen and (max-width: 1440px) {
      .c-text-image__image {
        max-width: calc(100% - 34.02777778vw); } }
    @media only screen and (max-width: 767px) {
      .c-text-image__image {
        order: 2;
        width: 100%;
        max-width: 100%;
        margin-top: 32px; } }
    .c-text-image__image.multiply {
      mix-blend-mode: multiply; }
    .c-text-image__image.w556 {
      width: 556px; }
    .c-text-image__image.w579 {
      width: 579px; }
    .c-text-image__image.w866 {
      width: 866px; }
    .c-text-image__image.w607 {
      width: 607px; }
    .c-text-image__image.w543 {
      width: 543px; }
    .c-text-image__image.w940 {
      width: 940px; }

.c-compliance {
  background: #DAECFB;
  padding: 54px 0px 73px;
  border-top: 1px solid #8FAAD6;
  position: relative; }
  @media only screen and (max-width: 1440px) {
    .c-compliance {
      padding: 3.75vw 0 5.06944444vw; } }
  @media only screen and (max-width: 767px) {
    .c-compliance {
      padding: 24px 0 34px; } }
  .c-compliance:before {
    content: "";
    width: 1px;
    height: 100%;
    display: block;
    background: #8FAAD6;
    position: absolute;
    top: 0;
    left: 80px; }
    @media only screen and (max-width: 1440px) {
      .c-compliance:before {
        left: 5.55555556vw; } }
    @media only screen and (max-width: 767px) {
      .c-compliance:before {
        left: 18px; } }
  .c-compliance:after {
    content: "";
    width: 1px;
    height: 100%;
    display: block;
    background: #8FAAD6;
    position: absolute;
    top: 0;
    right: 80px; }
    @media only screen and (max-width: 1440px) {
      .c-compliance:after {
        right: 5.55555556vw; } }
    @media only screen and (max-width: 767px) {
      .c-compliance:after {
        right: 18px; } }
  .c-compliance__list {
    width: calc(100% - 80px);
    max-width: 1160px;
    margin: 0 auto;
    margin-top: 42px;
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid #8FAAD6;
    border-bottom: 1px solid #8FAAD6; }
    @media only screen and (max-width: 1440px) {
      .c-compliance__list {
        width: calc(100% - 5.55555556vw);
        margin-top: 2.91666667vw; } }
    @media only screen and (max-width: 767px) {
      .c-compliance__list {
        margin-top: 14px;
        max-width: 232px;
        width: 100%; } }
    .c-compliance__list li {
      width: 20%;
      height: 94px;
      border-top: 1px solid #8FAAD6;
      border-right: 1px solid #8FAAD6; }
      @media only screen and (max-width: 1440px) {
        .c-compliance__list li {
          height: 6.52777778vw; } }
      @media only screen and (max-width: 767px) {
        .c-compliance__list li {
          width: 50%;
          height: 47px; } }
      .c-compliance__list li span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%; }
      .c-compliance__list li i {
        mix-blend-mode: multiply;
        text-align: center; }
        @media only screen and (max-width: 1440px) {
          .c-compliance__list li i img.w77 {
            width: 10.06944444vw; } }
        @media only screen and (max-width: 767px) {
          .c-compliance__list li i img.w77 {
            width: 77px; } }
        @media only screen and (max-width: 1440px) {
          .c-compliance__list li i img.w37 {
            width: 5.13888889vw; } }
        @media only screen and (max-width: 767px) {
          .c-compliance__list li i img.w37 {
            width: 37px; } }
        @media only screen and (max-width: 1440px) {
          .c-compliance__list li i img.w30 {
            width: 4.23611111vw; } }
        @media only screen and (max-width: 767px) {
          .c-compliance__list li i img.w30 {
            width: 30px; } }
        @media only screen and (max-width: 1440px) {
          .c-compliance__list li i img.w57 {
            width: 7.91666667vw; } }
        @media only screen and (max-width: 767px) {
          .c-compliance__list li i img.w57 {
            width: 57px; } }
        @media only screen and (max-width: 1440px) {
          .c-compliance__list li i img.w61 {
            width: 8.47222222vw; } }
        @media only screen and (max-width: 767px) {
          .c-compliance__list li i img.w61 {
            width: 61px; } }
        @media only screen and (max-width: 1440px) {
          .c-compliance__list li i img.w63 {
            width: 8.81944444vw; } }
        @media only screen and (max-width: 767px) {
          .c-compliance__list li i img.w63 {
            width: 63px; } }
        @media only screen and (max-width: 1440px) {
          .c-compliance__list li i img.w46 {
            width: 6.38888889vw; } }
        @media only screen and (max-width: 767px) {
          .c-compliance__list li i img.w46 {
            width: 46px; } }
        @media only screen and (max-width: 1440px) {
          .c-compliance__list li i img.w59 {
            width: 8.19444444vw; } }
        @media only screen and (max-width: 767px) {
          .c-compliance__list li i img.w59 {
            width: 59px; } }

.c-line-left {
  width: calc(50vw - 80px);
  margin: 20px auto; }
  @media only screen and (max-width: 1440px) {
    .c-line-left {
      width: calc(50vw - 5.55555556vw);
      margin: 1.38888889vw auto; } }
  @media only screen and (max-width: 767px) {
    .c-line-left {
      width: calc(50vw - 18px);
      margin: 10px auto; } }
  .c-line-left.is-active .c-line-left__top:before {
    height: 100%; }
  .c-line-left.is-active .c-line-left__middle:before {
    width: 100%; }
  .c-line-left.is-active .c-line-left__bottom:before {
    height: 100%; }
  .c-line-left span {
    display: block;
    position: relative; }
    .c-line-left span:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      background: #8FAAD6; }
  .c-line-left__top {
    width: 1px;
    height: 108px; }
    @media only screen and (max-width: 1440px) {
      .c-line-left__top {
        height: 7.5vw; } }
    @media only screen and (max-width: 767px) {
      .c-line-left__top {
        height: 53px; } }
    .c-line-left__top:before {
      width: 1px;
      height: 0;
      transition: width .3s, height .3s; }
  .c-line-left__middle {
    width: 100%;
    height: 1px; }
    .c-line-left__middle:before {
      width: 0;
      height: 1px;
      transition: width .9s, height .3s;
      transition-delay: .3s; }
  .c-line-left__bottom {
    width: 1px;
    height: 108px;
    margin-left: auto; }
    @media only screen and (max-width: 1440px) {
      .c-line-left__bottom {
        height: 7.5vw; } }
    @media only screen and (max-width: 767px) {
      .c-line-left__bottom {
        height: 53px; } }
    .c-line-left__bottom:before {
      width: 1px;
      height: 0;
      transition: width .3s, height .3s;
      transition-delay: 1.2s; }

.c-line-right {
  width: calc(50vw - 80px);
  margin: 20px auto; }
  @media only screen and (max-width: 1440px) {
    .c-line-right {
      width: calc(50vw - 5.55555556vw);
      margin: 1.38888889vw auto; } }
  @media only screen and (max-width: 767px) {
    .c-line-right {
      width: calc(50vw - 18px);
      margin: 10px auto; } }
  .c-line-right.is-active .c-line-right__top:before {
    height: 100%; }
  .c-line-right.is-active .c-line-right__middle:before {
    width: 100%; }
  .c-line-right.is-active .c-line-right__bottom:before {
    height: 100%; }
  .c-line-right span {
    display: block;
    position: relative; }
    .c-line-right span:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      background: #8FAAD6; }
  .c-line-right__top {
    width: 1px;
    height: 108px;
    margin-left: auto; }
    @media only screen and (max-width: 1440px) {
      .c-line-right__top {
        height: 7.5vw; } }
    @media only screen and (max-width: 767px) {
      .c-line-right__top {
        height: 53px; } }
    .c-line-right__top:before {
      width: 1px;
      height: 0;
      transition: width .3s, height .3s; }
  .c-line-right__middle {
    width: 100%;
    height: 1px; }
    .c-line-right__middle:before {
      width: 0;
      height: 1px;
      left: auto !important;
      right: 0;
      transition: width .9s, height .3s;
      transition-delay: .3s; }
  .c-line-right__bottom {
    width: 1px;
    height: 108px; }
    @media only screen and (max-width: 1440px) {
      .c-line-right__bottom {
        height: 7.5vw; } }
    @media only screen and (max-width: 767px) {
      .c-line-right__bottom {
        height: 53px; } }
    .c-line-right__bottom:before {
      width: 1px;
      height: 0;
      transition: width .3s, height .3s;
      transition-delay: 1.2s; }

.c-separator {
  width: 88px;
  height: 1px;
  display: block;
  background: #8FAAD6;
  margin: 160px auto 90px;
  border: none;
  color: none; }
  @media only screen and (max-width: 1440px) {
    .c-separator {
      width: 6.11111111vw;
      margin: 11.11111111vw auto 6.25vw; } }
  @media only screen and (max-width: 767px) {
    .c-separator {
      margin: 80px auto 45px; } }

/* Z-INDEX */
.formError {
  z-index: 990; }

.formError .formErrorContent {
  z-index: 991; }

.formError .formErrorArrow {
  z-index: 996; }

.ui-dialog .formError {
  z-index: 5000; }

.ui-dialog .formError .formErrorContent {
  z-index: 5001; }

.ui-dialog .formError .formErrorArrow {
  z-index: 5006; }

.inputContainer {
  position: relative;
  float: left; }

.formError {
  position: absolute;
  top: 300px;
  left: 300px;
  display: block;
  cursor: pointer;
  text-align: left; }

.formError.inline {
  position: relative;
  top: 0;
  left: 0;
  display: inline-block; }

.ajaxSubmit {
  padding: 20px;
  background: #55ea55;
  border: 1px solid #999;
  display: none; }

.formError .formErrorContent {
  width: 100%;
  background: #ee0101;
  position: relative;
  color: #fff;
  min-width: 120px;
  font-size: 11px;
  border: 2px solid #ddd;
  box-shadow: 0 0 6px #000;
  -moz-box-shadow: 0 0 6px #000;
  -webkit-box-shadow: 0 0 6px #000;
  -o-box-shadow: 0 0 6px #000;
  padding: 4px 10px 4px 10px;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px; }

.formError.inline .formErrorContent {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  border: none;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -o-border-radius: 0; }

.greenPopup .formErrorContent {
  background: #33be40; }

.blackPopup .formErrorContent {
  background: #393939;
  color: #FFF; }

.formError .formErrorArrow {
  width: 15px;
  margin: -2px 0 0 13px;
  position: relative; }

body[dir='rtl'] .formError .formErrorArrow,
body.rtl .formError .formErrorArrow {
  margin: -2px 13px 0 0; }

.formError .formErrorArrowBottom {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  margin: 0px 0 0 12px;
  top: 2px; }

.formError .formErrorArrow div {
  border-left: 2px solid #ddd;
  border-right: 2px solid #ddd;
  box-shadow: 0 2px 3px #444;
  -moz-box-shadow: 0 2px 3px #444;
  -webkit-box-shadow: 0 2px 3px #444;
  -o-box-shadow: 0 2px 3px #444;
  font-size: 0px;
  height: 1px;
  background: #ee0101;
  margin: 0 auto;
  line-height: 0;
  font-size: 0;
  display: block; }

.formError .formErrorArrowBottom div {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none; }

.greenPopup .formErrorArrow div {
  background: #33be40; }

.blackPopup .formErrorArrow div {
  background: #393939;
  color: #FFF; }

.formError .formErrorArrow .line10 {
  width: 13px;
  border: none; }

.formError .formErrorArrow .line9 {
  width: 11px;
  border: none; }

.formError .formErrorArrow .line8 {
  width: 11px; }

.formError .formErrorArrow .line7 {
  width: 9px; }

.formError .formErrorArrow .line6 {
  width: 7px; }

.formError .formErrorArrow .line5 {
  width: 5px; }

.formError .formErrorArrow .line4 {
  width: 3px; }

.formError .formErrorArrow .line3 {
  width: 1px;
  border-left: 2px solid #ddd;
  border-right: 2px solid #ddd;
  border-bottom: 0 solid #ddd; }

.formError .formErrorArrow .line2 {
  width: 3px;
  border: none;
  background: #ddd; }

.formError .formErrorArrow .line1 {
  width: 1px;
  border: none;
  background: #ddd; }

main.asuene-esg .c-text-image__text.pt54 {
  padding-top: 54px; }
  @media only screen and (max-width: 1440px) {
    main.asuene-esg .c-text-image__text.pt54 {
      padding-top: 3.75vw; } }
  @media only screen and (max-width: 767px) {
    main.asuene-esg .c-text-image__text.pt54 {
      padding-top: 54px; } }

main.asuene-esg .c-main-visual__top__text {
  width: 42.01680672%; }
  @media only screen and (max-width: 767px) {
    main.asuene-esg .c-main-visual__top__text {
      width: 100%; } }

main.asuene-esg .c-main-visual__top__image {
  width: 66.36636637%;
  max-width: 666px;
  position: relative;
  margin-top: -40px;
  margin-right: -36px; }
  @media only screen and (max-width: 1440px) {
    main.asuene-esg .c-main-visual__top__image {
      max-width: 46.25vw;
      margin-top: -2.77777778vw;
      margin-right: -2.5vw; } }
  @media only screen and (max-width: 767px) {
    main.asuene-esg .c-main-visual__top__image {
      max-width: 100%;
      margin-top: 20px;
      margin-right: 0;
      width: 100%; } }
  main.asuene-esg .c-main-visual__top__image .main-image {
    padding-top: 64.86486486%;
    position: relative; }
    main.asuene-esg .c-main-visual__top__image .main-image.is-active .circle {
      opacity: 1; }
    main.asuene-esg .c-main-visual__top__image .main-image.is-active .graph .bar span:before {
      height: 100% !important; }
    main.asuene-esg .c-main-visual__top__image .main-image.is-active .graph .bar i {
      opacity: 1; }
    main.asuene-esg .c-main-visual__top__image .main-image.is-active .graph .text {
      opacity: 1; }
    main.asuene-esg .c-main-visual__top__image .main-image.is-active .graph .lineWrap .mask {
      stroke-dashoffset: 0; }
    main.asuene-esg .c-main-visual__top__image .main-image.is-active .logo {
      opacity: 1; }
    main.asuene-esg .c-main-visual__top__image .main-image.is-active .popup {
      opacity: 1;
      transform: translate(0, 0); }
    main.asuene-esg .c-main-visual__top__image .main-image .circle {
      width: 83.93393393%;
      position: absolute;
      top: -9.72222222%;
      left: 2%;
      opacity: 0;
      transition: opacity .6s;
      transition-delay: .6s; }
    main.asuene-esg .c-main-visual__top__image .main-image .graph {
      position: absolute;
      width: 19.96996997%;
      height: 59.06976744%;
      top: 18.37209302%;
      left: 36.486486%;
      display: flex;
      justify-content: space-between;
      align-items: flex-end; }
      main.asuene-esg .c-main-visual__top__image .main-image .graph .bar {
        width: 38.34586466%;
        height: 100%;
        position: relative;
        filter: drop-shadow(5px 5px 7px rgba(149, 170, 210, 0.7));
        will-change: filter; }
        main.asuene-esg .c-main-visual__top__image .main-image .graph .bar span {
          display: block;
          position: absolute;
          left: 0;
          bottom: 0; }
        main.asuene-esg .c-main-visual__top__image .main-image .graph .bar i {
          position: absolute;
          left: 50%;
          transform: translate(-50%, 0%);
          display: block;
          opacity: 0;
          transition: opacity .6s;
          transition-delay: .6s; }
        main.asuene-esg .c-main-visual__top__image .main-image .graph .bar .text-01 {
          top: 11.81102362%;
          width: 56.862745%; }
        main.asuene-esg .c-main-visual__top__image .main-image .graph .bar .text-02 {
          top: 52.36220472%;
          width: 84.31372549%; }
        main.asuene-esg .c-main-visual__top__image .main-image .graph .bar .text-03 {
          bottom: 7.87401575%;
          width: 68.62745098%; }
        main.asuene-esg .c-main-visual__top__image .main-image .graph .bar.bar-01 span {
          width: 100%; }
          main.asuene-esg .c-main-visual__top__image .main-image .graph .bar.bar-01 span:before {
            content: "";
            width: 100%;
            height: 0%;
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            transition: height .6s; }
          main.asuene-esg .c-main-visual__top__image .main-image .graph .bar.bar-01 span:nth-of-type(1) {
            height: 100%; }
            main.asuene-esg .c-main-visual__top__image .main-image .graph .bar.bar-01 span:nth-of-type(1):before {
              background: #549EED; }
          main.asuene-esg .c-main-visual__top__image .main-image .graph .bar.bar-01 span:nth-of-type(2) {
            height: 68.11023622%; }
            main.asuene-esg .c-main-visual__top__image .main-image .graph .bar.bar-01 span:nth-of-type(2):before {
              background: #3E88D7; }
          main.asuene-esg .c-main-visual__top__image .main-image .graph .bar.bar-01 span:nth-of-type(3) {
            height: 18.8976378%; }
            main.asuene-esg .c-main-visual__top__image .main-image .graph .bar.bar-01 span:nth-of-type(3):before {
              background: #2A74C3; }
        main.asuene-esg .c-main-visual__top__image .main-image .graph .bar.bar-02 span {
          width: 100%;
          height: 36.61417323%; }
          main.asuene-esg .c-main-visual__top__image .main-image .graph .bar.bar-02 span:before {
            content: "";
            width: 100%;
            height: 0%;
            display: block;
            background: #1660AF;
            position: absolute;
            left: 0;
            bottom: 0;
            transition: height .6s; }
      main.asuene-esg .c-main-visual__top__image .main-image .graph .text {
        position: absolute;
        width: 60.15037594%;
        top: 43.30708661%;
        right: -27.81954887%;
        transition: opacity .6s;
        transition-delay: .6s;
        opacity: 0; }
      main.asuene-esg .c-main-visual__top__image .main-image .graph .lineWrap {
        width: 24.5%;
        position: absolute;
        top: 0;
        left: 38.34586466%; }
        main.asuene-esg .c-main-visual__top__image .main-image .graph .lineWrap svg {
          display: block;
          width: 100%; }
        main.asuene-esg .c-main-visual__top__image .main-image .graph .lineWrap .mask {
          stroke-dasharray: 250;
          stroke-dashoffset: 250;
          transition: stroke-dashoffset 1.2s, stroke-dasharray 1.2s;
          -webkit-transition: stroke-dashoffset 1.2s, stroke-dasharray 1.2s;
          will-change: stroke-dashoffset;
          transition-delay: .6s; }
    main.asuene-esg .c-main-visual__top__image .main-image .logo {
      width: 22.82282282%;
      position: absolute;
      bottom: 7.44186047%;
      left: 34.38438438%;
      transition: opacity .6s;
      transition-delay: .6s;
      opacity: 0; }
    main.asuene-esg .c-main-visual__top__image .main-image .popup {
      transition: opacity .6s, transform .6s;
      transform: translate(0, 20px);
      transition-delay: .6s;
      opacity: 0; }
    main.asuene-esg .c-main-visual__top__image .main-image .popup-01 {
      width: 25.97597598%;
      position: absolute;
      top: 23.72093023%;
      padding-top: 42.1921922%;
      left: 0;
      transition-delay: 1.2s; }
      main.asuene-esg .c-main-visual__top__image .main-image .popup-01 span {
        display: block;
        position: absolute;
        filter: drop-shadow(6px 6px 8px rgba(149, 170, 210, 0.7));
        will-change: filter; }
        main.asuene-esg .c-main-visual__top__image .main-image .popup-01 span:nth-of-type(1) {
          width: 63.58381503%;
          top: 0;
          right: 0;
          z-index: +2; }
        main.asuene-esg .c-main-visual__top__image .main-image .popup-01 span:nth-of-type(2) {
          width: 78.03468208%;
          top: 25.26690391%;
          right: 0;
          z-index: +1; }
        main.asuene-esg .c-main-visual__top__image .main-image .popup-01 span:nth-of-type(3) {
          width: 100%;
          left: 0;
          bottom: 11.743772%; }
        main.asuene-esg .c-main-visual__top__image .main-image .popup-01 span:nth-of-type(4) {
          width: 60.11560694%;
          bottom: 0;
          left: 22.5433526%; }
    main.asuene-esg .c-main-visual__top__image .main-image .popup-02 {
      width: 27.77777778%;
      position: absolute;
      top: 0;
      right: 21.02102102%;
      filter: drop-shadow(6px 6px 8px rgba(149, 170, 210, 0.7));
      will-change: filter;
      transition-delay: 1.5s; }
    main.asuene-esg .c-main-visual__top__image .main-image .popup-03 {
      width: 33.63363363%;
      position: absolute;
      top: 50.23255814%;
      right: 0;
      filter: drop-shadow(6px 6px 8px rgba(149, 170, 210, 0.7));
      will-change: filter;
      transition-delay: 1.8s; }

main.asuene-esg .c-main-visual__col3 {
  margin-top: 32px; }
  @media only screen and (max-width: 1440px) {
    main.asuene-esg .c-main-visual__col3 {
      margin-top: 2.1vw; } }
  @media only screen and (max-width: 767px) {
    main.asuene-esg .c-main-visual__col3 {
      margin-top: 30px; } }

main.asuene-esg .create-custom-survey-image {
  position: relative;
  padding-top: 62.41721854%; }
  main.asuene-esg .create-custom-survey-image.is-active .image-01 {
    opacity: 1;
    transform: translate(0, 0); }
  main.asuene-esg .create-custom-survey-image.is-active .list div {
    opacity: 1;
    transform: translate(0, 0); }
  main.asuene-esg .create-custom-survey-image .image-01 {
    width: 90.06622517%;
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(4px 4px 10px rgba(149, 170, 210, 0.7));
    will-change: filter;
    opacity: 0;
    transform: translate(0px, 20px);
    transition: opacity .6s, transform .6s; }
  main.asuene-esg .create-custom-survey-image .list {
    width: 40.88669951%;
    position: absolute;
    right: 0;
    bottom: 0; }
    main.asuene-esg .create-custom-survey-image .list div {
      margin-top: 6.15384615%;
      filter: drop-shadow(7px 7px 5px #95aad2);
      will-change: filter;
      opacity: 0;
      transform: translate(0px, 20px);
      transition: opacity .6s, transform .6s; }
      main.asuene-esg .create-custom-survey-image .list div:nth-of-type(1) {
        transition-delay: .6s; }
      main.asuene-esg .create-custom-survey-image .list div:nth-of-type(2) {
        transition-delay: .8s; }
      main.asuene-esg .create-custom-survey-image .list div:nth-of-type(3) {
        transition-delay: 1s; }

main.asuene-esg .c-text-image__image.w984 {
  max-width: 984px; }
  @media only screen and (max-width: 1440px) {
    main.asuene-esg .c-text-image__image.w984 {
      max-width: 68.33333333vw; } }
  @media only screen and (max-width: 767px) {
    main.asuene-esg .c-text-image__image.w984 {
      width: 100%; } }

main.asuene-esg .reduce-workload-image {
  position: relative;
  padding-top: 53.25203252%; }
  main.asuene-esg .reduce-workload-image.is-active .graph-01 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.asuene-esg .reduce-workload-image.is-active .graph-02 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.asuene-esg .reduce-workload-image .graph-01 {
    width: 44.00406504%;
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(10px 10px 12px rgba(149, 170, 210, 0.7));
    will-change: filter;
    transition: opacity 0.6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px); }
  main.asuene-esg .reduce-workload-image .graph-02 {
    width: 44.00406504%;
    position: absolute;
    top: 0;
    right: 0;
    filter: drop-shadow(10px 10px 12px rgba(149, 170, 210, 0.7));
    will-change: filter;
    transition: opacity 0.6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .6s; }

main.asuene-esg .engage-suppliers-image {
  position: relative;
  padding-top: 96.11451943%; }
  main.asuene-esg .engage-suppliers-image__wrap {
    max-width: 489px; }
  main.asuene-esg .engage-suppliers-image.is-active .map img {
    opacity: 1;
    transform: translate(0, 0px); }
  main.asuene-esg .engage-suppliers-image.is-active span {
    opacity: 1;
    transform: translate(0, 0px); }
  main.asuene-esg .engage-suppliers-image .map {
    width: 96.11451943%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    main.asuene-esg .engage-suppliers-image .map img {
      transition: opacity 0.6s, transform .6s;
      opacity: 0;
      transform: translate(0, 20px); }
  main.asuene-esg .engage-suppliers-image span {
    position: absolute;
    transition: opacity 0.6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .6s; }
  main.asuene-esg .engage-suppliers-image .people-01 {
    width: 12.67893661%;
    top: 18.33688699%;
    left: 3.40425532%; }
  main.asuene-esg .engage-suppliers-image .people-02 {
    width: 6.54396728%;
    top: 6.82302772%;
    left: 32.76595745%; }
  main.asuene-esg .engage-suppliers-image .people-03 {
    width: 12.67893661%;
    top: 0;
    right: 26.38297872%; }
  main.asuene-esg .engage-suppliers-image .people-04 {
    width: 7.97546012%;
    top: 32.62260128%;
    right: 0; }
  main.asuene-esg .engage-suppliers-image .people-05 {
    width: 12.47443763%;
    right: 2.82608696%;
    bottom: 17.91044776%; }
  main.asuene-esg .engage-suppliers-image .people-06 {
    width: 7.56646217%;
    right: 38.08510638%;
    bottom: 1.91897655%; }
  main.asuene-esg .engage-suppliers-image .people-07 {
    width: 10.83844581%;
    left: 15.53191489%;
    bottom: 4.69083156%; }
  main.asuene-esg .engage-suppliers-image .people-08 {
    width: 6.54396728%;
    left: 0;
    top: 50.53304904%; }

main.asuene-esg .aggregate-analyze-image {
  position: relative;
  padding-top: 73.50272232%; }
  main.asuene-esg .aggregate-analyze-image.is-active .map > div {
    opacity: 1;
    transform: translate(0, 0); }
  main.asuene-esg .aggregate-analyze-image.is-active .map span {
    opacity: 1;
    transform: translate(0, 0); }
  main.asuene-esg .aggregate-analyze-image.is-active .graph-01 {
    opacity: 1;
    transform: translate(0, 0); }
  main.asuene-esg .aggregate-analyze-image.is-active .graph-02 {
    opacity: 1;
    transform: translate(0, 0); }
  main.asuene-esg .aggregate-analyze-image .map {
    width: 91.65154265%;
    position: absolute;
    top: 0;
    left: 0; }
    main.asuene-esg .aggregate-analyze-image .map > div {
      filter: drop-shadow(7px 7px 6px #95aad2);
      will-change: filter;
      transition: opacity .6s, transform .6s;
      opacity: 0;
      transform: translate(0, 20px); }
    main.asuene-esg .aggregate-analyze-image .map span {
      width: 1.93423598%;
      display: inline-block;
      position: absolute;
      transition: opacity .6s, transform .6s;
      opacity: 0;
      transform: translate(0, 5px);
      transition-delay: 1.2s; }
    main.asuene-esg .aggregate-analyze-image .map .cursor-01 {
      right: 13.53965184%;
      top: 50.44776119%; }
    main.asuene-esg .aggregate-analyze-image .map .cursor-02 {
      right: 22.82398453%;
      top: 51.04477612%; }
    main.asuene-esg .aggregate-analyze-image .map .cursor-03 {
      right: 37.13733075%;
      top: 52.53731343%; }
    main.asuene-esg .aggregate-analyze-image .map .cursor-04 {
      right: 48.74274662%;
      top: 46.56716418%; }
    main.asuene-esg .aggregate-analyze-image .map .cursor-05 {
      right: 52.99806576%;
      top: 48.35820896%; }
  main.asuene-esg .aggregate-analyze-image .graph-01 {
    width: 46.27949183%;
    position: absolute;
    bottom: 0;
    left: 3.62976407%;
    filter: drop-shadow(7px 7px 6px #95aad2);
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .6s; }
  main.asuene-esg .aggregate-analyze-image .graph-02 {
    width: 46.27949183%;
    position: absolute;
    right: 0;
    bottom: 0;
    filter: drop-shadow(7px 7px 6px #95aad2);
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .9s; }

main.asuene-esg .evaluate-improve-image {
  position: relative;
  padding-top: 72.59786477%; }
  main.asuene-esg .evaluate-improve-image.is-active .graph-01 {
    opacity: 1;
    transform: translate(0, 0); }
  main.asuene-esg .evaluate-improve-image.is-active .graph-02 {
    opacity: 1;
    transform: translate(0, 0); }
  main.asuene-esg .evaluate-improve-image .graph-01 {
    width: 87.90035587%;
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(3px 3px 10px rgba(149, 170, 210, 0.4));
    will-change: filter;
    opacity: 0;
    transform: translate(0px, 20px);
    transition: opacity .6s, transform .6s; }
  main.asuene-esg .evaluate-improve-image .graph-02 {
    width: 52.13523132%;
    position: absolute;
    right: 0;
    bottom: 0;
    filter: drop-shadow(7px 7px 6px #95aad2);
    will-change: filter;
    opacity: 0;
    transform: translate(0px, 20px);
    transition: opacity .6s, transform .6s;
    transition-delay: .6s; }

main.cdp .c-main-visual__top__text {
  width: 50%;
  z-index: +1; }
  @media only screen and (max-width: 767px) {
    main.cdp .c-main-visual__top__text {
      width: 100%; } }

main.cdp .c-main-visual__top__image {
  width: 44.51882845%;
  position: relative;
  margin-top: -40px; }
  @media only screen and (max-width: 1440px) {
    main.cdp .c-main-visual__top__image {
      margin-top: -2.77777778vw; } }
  @media only screen and (max-width: 767px) {
    main.cdp .c-main-visual__top__image {
      margin-top: 20px;
      width: 100%; } }
  main.cdp .c-main-visual__top__image .main-image {
    padding-top: 77.06766917%;
    position: relative; }
    main.cdp .c-main-visual__top__image .main-image.is-active .image-01 .graph dl dd > div:before {
      width: 100%; }
    main.cdp .c-main-visual__top__image .main-image.is-active .image-01 .graph dl dd > div span {
      opacity: 1; }
    main.cdp .c-main-visual__top__image .main-image.is-active .image-01 .arrow {
      opacity: 1;
      transform: translate(0, 0); }
    main.cdp .c-main-visual__top__image .main-image.is-active .image-02 {
      opacity: 1;
      transform: translate(0, 0); }
    main.cdp .c-main-visual__top__image .main-image .image-01 {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0; }
      main.cdp .c-main-visual__top__image .main-image .image-01 .graph {
        border-right: 2px solid #1660AF;
        border-bottom: 2px solid #1660AF;
        position: relative; }
        main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl {
          display: flex;
          justify-content: flex-end;
          position: relative; }
          main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl:last-of-type dt {
            border: none; }
          main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dt {
            order: 2;
            width: 19.96233522%;
            height: 66px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #D6E6F7;
            color: #013E80;
            font-family: "Roboto", sans-serif;
            font-size: 13px;
            font-weight: 600;
            border-bottom: 1px solid #468FDD; }
            @media only screen and (max-width: 1355px) {
              main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dt {
                height: 4.87084871vw;
                font-size: 0.95940959vw; } }
            @media only screen and (max-width: 767px) {
              main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dt {
                font-size: 2.62096774vw;
                height: 13.30645161vw; } }
          main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd {
            width: 80.03766478%; }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd > div {
              height: 33px;
              position: relative;
              filter: drop-shadow(0 -2px 9px rgba(0, 0, 0, 0.25));
              will-change: filter;
              margin-left: auto; }
              @media only screen and (max-width: 1355px) {
                main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd > div {
                  height: 2.43542435vw; } }
              @media only screen and (max-width: 767px) {
                main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd > div {
                  height: 6.65322581vw; } }
              main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd > div:before {
                content: "";
                width: 0%;
                height: 100%;
                display: block;
                top: 0;
                right: 0;
                transition: width 1s;
                position: absolute; }
              main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd > div span {
                position: absolute;
                top: 50%;
                left: 13px;
                transform: translate(0%, -50%);
                color: #fff;
                font-size: 15px;
                font-weight: 500;
                font-family: "Roboto", sans-serif;
                opacity: 0;
                transition: opacity .6s;
                transition-delay: 1s;
                line-height: 1; }
                @media only screen and (max-width: 1355px) {
                  main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd > div span {
                    font-size: 1.10701107vw;
                    left: 0.95941vw; } }
                @media only screen and (max-width: 767px) {
                  main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd > div span {
                    font-size: 3.02419355vw;
                    left: 2.2vw; } }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd .w37 {
              width: 8.68544601%; }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd .w82 {
              width: 19.24882629%; }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd .w129 {
              width: 30.28169014%; }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd .w177 {
              width: 41.54929577%; }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd .w221 {
              width: 51.87793427%; }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd .w269 {
              width: 63.14553991%; }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd .w316 {
              width: 74.17840376%; }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd .w363 {
              width: 85.21126761%; }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd .blue1:before {
              background: linear-gradient(to right, #0056B3, #065CB7); }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd .blue2:before {
              background: linear-gradient(to right, #0166D1, #0066D2); }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd .blue3:before {
              background: linear-gradient(to left, #008AE0, #0065E0); }
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph dl dd .blue4:before {
              background: linear-gradient(to right, #5DAAF3, #3B99EF); }
        main.cdp .c-main-visual__top__image .main-image .image-01 .graph .bottom {
          width: 100%;
          background: linear-gradient(to right, #004085, #003771);
          color: #fff;
          font-family: "Roboto", sans-serif;
          font-size: 15px;
          display: flex;
          align-items: center;
          padding: 0 13px;
          height: 33px; }
          @media only screen and (max-width: 1355px) {
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph .bottom {
              font-size: 1.10701107vw;
              padding: 0 0.95940959vw;
              height: 2.43542435vw; } }
          @media only screen and (max-width: 767px) {
            main.cdp .c-main-visual__top__image .main-image .image-01 .graph .bottom {
              font-size: 3.02419355vw;
              padding: 0 2.62096774vw;
              height: 6.65322581vw; } }
      main.cdp .c-main-visual__top__image .main-image .image-01 .arrow {
        position: absolute;
        width: 46.89265537%;
        left: 0;
        bottom: 14%;
        opacity: 0;
        transform: translate(-20px, 20px);
        transition: opacity .6s, transform .6s;
        transition-delay: 1s; }
    main.cdp .c-main-visual__top__image .main-image .image-02 {
      width: 55.26315789%;
      position: absolute;
      top: 0;
      left: 0;
      filter: drop-shadow(5px 5px 12px #95aad2);
      will-change: filter;
      opacity: 0;
      transform: translate(0, 20px);
      transition: opacity .6s, transform .6s;
      transition-delay: 1s; }

main.cdp .c-main-visual__col3 {
  margin-top: 47px; }

main.cdp .c-whole {
  padding-top: 160px; }
  @media only screen and (max-width: 1440px) {
    main.cdp .c-whole {
      padding-top: 11.11111111vw; } }
  @media only screen and (max-width: 767px) {
    main.cdp .c-whole {
      padding-top: 44px; } }

main.cdp .what-is-image {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 888px;
  margin: 0 auto; }
  @media only screen and (max-width: 1440px) {
    main.cdp .what-is-image {
      max-width: 61.66666667vw; } }
  @media only screen and (max-width: 767px) {
    main.cdp .what-is-image {
      max-width: 100%; } }
  main.cdp .what-is-image.is-active .circle i {
    opacity: 1;
    transform: translate(0, 0); }
  main.cdp .what-is-image.is-active .circle span {
    opacity: 1; }
  main.cdp .what-is-image.is-active .circle svg circle {
    animation: draw .6s linear forwards; }
  main.cdp .what-is-image.is-active .arrow {
    opacity: 1; }
  main.cdp .what-is-image.is-active .logo > div {
    opacity: 1; }
  main.cdp .what-is-image.is-active .logo svg circle {
    animation: draw .6s linear forwards; }
  main.cdp .what-is-image .circle {
    width: 19.72942503%;
    padding-top: 19.72942503%;
    position: relative; }
    main.cdp .what-is-image .circle svg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0; }
      main.cdp .what-is-image .circle svg circle {
        /* 円周に合わせ調整してください */
        stroke-dasharray: 550;
        stroke-dashoffset: 550;
        /* 上部始点にしたい場合は-90度回転 */
        transform: rotate(-90deg);
        transform-origin: 50% 50%; }

@keyframes draw {
  to {
    stroke-dashoffset: 0; } }
    main.cdp .what-is-image .circle > div {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; }
    main.cdp .what-is-image .circle i {
      display: block;
      width: 44.57142857%;
      filter: drop-shadow(10px 10px 8px rgba(149, 170, 210, 0.6));
      will-change: filter;
      transition: opacity .6s, transform .6s;
      opacity: 0;
      transform: translate(0, 20px);
      transition-delay: .6s; }
    main.cdp .what-is-image .circle span {
      font-size: 85%;
      line-height: 1;
      display: block;
      text-align: center;
      font-size: 11px;
      letter-spacing: 0.05em;
      font-family: "Roboto", sans-serif;
      color: #1660AF;
      margin-top: 6%;
      transition: opacity .6s;
      opacity: 0;
      transition-delay: .6s; }
      @media only screen and (max-width: 1340px) {
        main.cdp .what-is-image .circle span {
          font-size: 0.82089552vw; } }
    main.cdp .what-is-image .circle .icon-01 {
      position: absolute;
      top: -16.57142857%;
      left: 28%; }
    main.cdp .what-is-image .circle .icon-02 {
      position: absolute;
      bottom: -4.54545455%;
      right: -9.71428571%; }
    main.cdp .what-is-image .circle .icon-03 {
      position: absolute;
      bottom: -4.54545455%;
      left: -9.71428571%; }
  main.cdp .what-is-image .logo {
    width: 31.3416009%;
    padding-top: 31.3416009%;
    position: relative; }
    main.cdp .what-is-image .logo svg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0; }
      main.cdp .what-is-image .logo svg circle {
        /* 円周に合わせ調整してください */
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        /* 上部始点にしたい場合は-90度回転 */
        transform: rotate(-90deg);
        transform-origin: 50% 50%; }
    main.cdp .what-is-image .logo > div {
      width: 90.97472924%;
      height: 90.97472924%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      background: #3C3C3C;
      filter: drop-shadow(6px 6px 5px rgba(0, 0, 0, 0.3));
      border-radius: 50%;
      transition: opacity .6s;
      opacity: 0;
      transition-delay: .6s; }
      main.cdp .what-is-image .logo > div img {
        width: 33.33333333%; }
  main.cdp .what-is-image .arrow {
    text-align: center;
    margin: 0 1.12739572%;
    width: 12.51409245%;
    display: flex;
    flex-direction: column;
    transition: opacity .6s;
    opacity: 0;
    transition-delay: .6s; }
    main.cdp .what-is-image .arrow span {
      font-size: 11px;
      line-height: 1;
      letter-spacing: 0.05em;
      font-weight: 600;
      font-family: "Roboto", sans-serif;
      color: #1660AF;
      display: inline-block; }
      @media only screen and (max-width: 1340px) {
        main.cdp .what-is-image .arrow span {
          font-size: 0.82089552vw; } }
    main.cdp .what-is-image .arrow i {
      margin: 7px 0;
      display: block; }
      @media only screen and (max-width: 1340px) {
        main.cdp .what-is-image .arrow i {
          margin: 0.52238806vw 0; } }

main.cdp .two-different {
  position: relative;
  padding: 83px 77px 60px;
  filter: drop-shadow(0 10px 5px rgba(149, 188, 222, 0.7));
  border: 1px solid #8FAAD6;
  border-top: none;
  max-width: 1120px;
  margin: 0 auto 142px;
  display: flex;
  justify-content: space-between;
  transition: opacity .6s, transform .6s;
  opacity: 0;
  transform: translate(0, 20px); }
  main.cdp .two-different.is-active {
    opacity: 1;
    transform: translate(0, 0); }
  @media only screen and (max-width: 1440px) {
    main.cdp .two-different {
      max-width: 77.77777778vw;
      padding: 5.76388889vw 5.34722222vw 4.16666667vw;
      margin-bottom: 9.86111111vw; } }
  @media only screen and (max-width: 767px) {
    main.cdp .two-different {
      display: block;
      padding: 40px 16px 30px; } }
  main.cdp .two-different:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(to top, #c0dbf1, #f6fcfc 56%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
    opacity: 0.7; }
  main.cdp .two-different .line {
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between; }
    main.cdp .two-different .line:before {
      content: "";
      width: calc(50% - 283px);
      height: 1px;
      display: block;
      background: #8FAAD6; }
      @media only screen and (max-width: 1440px) {
        main.cdp .two-different .line:before {
          width: calc(50% - 19.65277778vw); } }
      @media only screen and (max-width: 767px) {
        main.cdp .two-different .line:before {
          width: calc(50% - 128px); } }
    main.cdp .two-different .line:after {
      content: "";
      width: calc(50% - 283px);
      height: 1px;
      display: block;
      background: #8FAAD6; }
      @media only screen and (max-width: 1440px) {
        main.cdp .two-different .line:after {
          width: calc(50% - 19.65277778vw); } }
      @media only screen and (max-width: 767px) {
        main.cdp .two-different .line:after {
          width: calc(50% - 128px); } }
  main.cdp .two-different h3 {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translate(-50%, 0%);
    font-size: 40px;
    line-height: 1;
    font-weight: 600;
    color: #2A4380; }
    @media only screen and (max-width: 1440px) {
      main.cdp .two-different h3 {
        top: -1.38888889vw;
        font-size: 2.77777778vw; } }
    @media only screen and (max-width: 767px) {
      main.cdp .two-different h3 {
        font-size: 18px;
        white-space: nowrap;
        top: -10px; } }
  main.cdp .two-different__box {
    width: 45.85062241%; }
    @media only screen and (max-width: 767px) {
      main.cdp .two-different__box {
        width: 100%;
        margin-bottom: 30px; } }
    @media only screen and (max-width: 767px) {
      main.cdp .two-different__box:last-of-type {
        margin-bottom: 0; } }
    main.cdp .two-different__box h4 {
      font-size: 32px;
      font-weight: 600;
      line-height: 1;
      color: #1660AF;
      margin-bottom: 24px; }
      @media only screen and (max-width: 1440px) {
        main.cdp .two-different__box h4 {
          font-size: 2.22222222vw;
          margin-bottom: 1.66666667vw; } }
      @media only screen and (max-width: 767px) {
        main.cdp .two-different__box h4 {
          font-size: 16px;
          margin-bottom: 12px; } }
    main.cdp .two-different__box .step {
      filter: drop-shadow(4px 4px 10px rgba(149, 188, 222, 0.7)); }
    main.cdp .two-different__box ul {
      margin-top: 20px;
      color: #3C3C3C; }
      @media only screen and (max-width: 1440px) {
        main.cdp .two-different__box ul {
          margin-top: 1.38888889vw; } }
      @media only screen and (max-width: 767px) {
        main.cdp .two-different__box ul {
          margin-top: 10px; } }
      main.cdp .two-different__box ul li {
        margin-bottom: 16px; }
        @media only screen and (max-width: 1440px) {
          main.cdp .two-different__box ul li {
            margin-bottom: 1.11111111vw; } }
        @media only screen and (max-width: 767px) {
          main.cdp .two-different__box ul li {
            margin-bottom: 8px; } }
        main.cdp .two-different__box ul li:last-of-type {
          margin-bottom: 0; }
        main.cdp .two-different__box ul li strong {
          display: block;
          font-size: 16px;
          line-height: 1.8;
          font-weight: 600;
          position: relative;
          padding-left: 1.5em; }
          @media only screen and (max-width: 1440px) {
            main.cdp .two-different__box ul li strong {
              font-size: 1.11111111vw; } }
          @media only screen and (max-width: 767px) {
            main.cdp .two-different__box ul li strong {
              font-size: 14px; } }
          main.cdp .two-different__box ul li strong:before {
            content: "・";
            position: absolute;
            top: 0;
            left: 0.2em; }
        main.cdp .two-different__box ul li p {
          font-size: 14px;
          line-height: 1.5; }
          @media only screen and (max-width: 1440px) {
            main.cdp .two-different__box ul li p {
              font-size: 0.97222222vw; } }
          @media only screen and (max-width: 767px) {
            main.cdp .two-different__box ul li p {
              font-size: 12px; } }

main.cdp .response-preparation-image {
  position: relative;
  padding-top: 69.15254237%; }
  main.cdp .response-preparation-image.is-active .image-01 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.cdp .response-preparation-image.is-active .image-02 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.cdp .response-preparation-image .image-01 {
    width: 91.18644068%;
    position: absolute;
    left: 0;
    bottom: 0;
    filter: drop-shadow(4px 10px 20px #95aad2);
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px); }
  main.cdp .response-preparation-image .image-02 {
    width: 32.20338983%;
    position: absolute;
    right: 0;
    top: 0;
    filter: drop-shadow(13px 13px 11px rgba(149, 170, 210, 0.5));
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .6s; }

main.cdp .mock-scoring-image {
  position: relative;
  padding-top: 48.34123223%; }
  main.cdp .mock-scoring-image.is-active .image {
    opacity: 1;
    transform: translate(0, 0px); }
  main.cdp .mock-scoring-image.is-active .icon {
    opacity: 1;
    transform: translate(0, 0px); }
  main.cdp .mock-scoring-image .image {
    width: 92.25908373%;
    position: absolute;
    right: 0;
    bottom: 0;
    filter: drop-shadow(6px 6px 15px #95aad2);
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px); }
  main.cdp .mock-scoring-image .icon {
    width: 19.43127962%;
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(3px 3px 3px #95aad2);
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .6s; }

main.cdp .improvement-feedback-image {
  position: relative;
  padding-top: 75.12776831%; }
  main.cdp .improvement-feedback-image.is-active .graph {
    opacity: 1;
    transform: translate(0, 0px); }
  main.cdp .improvement-feedback-image.is-active .image-01 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.cdp .improvement-feedback-image.is-active .image-02 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.cdp .improvement-feedback-image .graph {
    width: 91.14139693%;
    position: absolute;
    right: 0;
    bottom: 0;
    filter: drop-shadow(12px 12px 10px rgba(149, 170, 210, 0.6));
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px); }
  main.cdp .improvement-feedback-image .image-01 {
    width: 64.05451448%;
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(9px 9px 5px rgba(149, 170, 210, 0.8));
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .6s; }
  main.cdp .improvement-feedback-image .image-02 {
    width: 20.95400341%;
    position: absolute;
    top: 0;
    right: 10.90289608%;
    filter: drop-shadow(4px 4px 10px #95aad2);
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: 1.2s; }

@media only screen and (max-width: 767px) {
  main.csrd .c-main-visual {
    overflow: hidden; } }

main.csrd .c-main-visual__top__text {
  width: 47.61506276%;
  z-index: +1; }
  @media only screen and (max-width: 767px) {
    main.csrd .c-main-visual__top__text {
      width: 100%; } }

main.csrd .c-main-visual__top__image {
  width: 48.11715481%;
  position: relative;
  margin-top: -70px; }
  @media only screen and (max-width: 1440px) {
    main.csrd .c-main-visual__top__image {
      margin-top: -4.86111111vw; } }
  @media only screen and (min-width: 768px) {
    main.csrd .c-main-visual__top__image {
      margin-right: 2%; } }
  @media only screen and (max-width: 767px) {
    main.csrd .c-main-visual__top__image {
      margin-top: 20px;
      width: calc(100% + 20px);
      margin-left: -20px; } }
  main.csrd .c-main-visual__top__image .main-image {
    padding-top: 75.13043478%;
    position: relative; }
    main.csrd .c-main-visual__top__image .main-image.is-active .line {
      opacity: 1;
      transform: translate(0px, -50%); }
    main.csrd .c-main-visual__top__image .main-image.is-active .popup i:before {
      height: 100%;
      opacity: 1; }
    main.csrd .c-main-visual__top__image .main-image.is-active .popup i:after {
      opacity: 1; }
    main.csrd .c-main-visual__top__image .main-image.is-active .popup .image {
      opacity: 1;
      transform: translate(0, 0); }
    main.csrd .c-main-visual__top__image .main-image.is-active .popup .comment {
      opacity: 1;
      transform: translate(0, 0); }
    main.csrd .c-main-visual__top__image .main-image img {
      width: 100%; }
    main.csrd .c-main-visual__top__image .main-image .line {
      position: absolute;
      width: 100%;
      top: 51.5%;
      left: 0;
      transform: translate(-40px, -50%);
      transition: opacity .6s, transform .6s;
      opacity: 0; }
    main.csrd .c-main-visual__top__image .main-image .popup {
      position: absolute;
      text-align: center; }
      main.csrd .c-main-visual__top__image .main-image .popup i {
        width: 1px;
        height: 37px;
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0); }
        main.csrd .c-main-visual__top__image .main-image .popup i:before {
          content: "";
          width: 100%;
          height: 0%;
          display: block;
          background: #0960B8;
          position: absolute;
          bottom: 0;
          left: 0;
          transition: height .6s, opacity .6s;
          opacity: 0;
          transition-delay: .6s; }
        main.csrd .c-main-visual__top__image .main-image .popup i:after {
          content: "";
          width: 5px;
          height: 5px;
          display: block;
          border-radius: 50%;
          background: #0960B8;
          position: absolute;
          left: -2px;
          transition: opacity .6s;
          opacity: 0;
          transition-delay: .6s; }
      main.csrd .c-main-visual__top__image .main-image .popup .image {
        margin: 0 auto;
        position: relative;
        transition: opacity .6s, transform .6s;
        opacity: 0;
        transition-delay: 0.9s; }
      main.csrd .c-main-visual__top__image .main-image .popup .comment {
        margin: 0 auto;
        position: relative;
        transition: opacity .6s, transform .6s;
        opacity: 0;
        transition-delay: 0.9s; }
    main.csrd .c-main-visual__top__image .main-image .popup-01 {
      width: 45.35186794%;
      top: 12.73148148%;
      left: 16.52173913%; }
      main.csrd .c-main-visual__top__image .main-image .popup-01 i {
        height: 27.40740741%;
        bottom: -18.51851852%; }
        main.csrd .c-main-visual__top__image .main-image .popup-01 i:after {
          bottom: -2.5px; }
      main.csrd .c-main-visual__top__image .main-image .popup-01 .image {
        filter: drop-shadow(4px 4px 4px #95aad2);
        will-change: filter;
        transform: translate(0, 10px); }
      main.csrd .c-main-visual__top__image .main-image .popup-01 .comment {
        width: 93.48659004%;
        margin-top: 3%;
        transform: translate(0, 10px); }
    main.csrd .c-main-visual__top__image .main-image .popup-02 {
      width: 54.60869565%;
      bottom: 0;
      right: 16.17391304%; }
      main.csrd .c-main-visual__top__image .main-image .popup-02 i {
        height: 20.9039548%;
        top: -14.12429379%; }
        main.csrd .c-main-visual__top__image .main-image .popup-02 i:before {
          bottom: auto;
          top: 0; }
        main.csrd .c-main-visual__top__image .main-image .popup-02 i:after {
          top: -2.5px; }
      main.csrd .c-main-visual__top__image .main-image .popup-02 .image {
        filter: drop-shadow(4px 4px 4px #95aad2);
        will-change: filter;
        transform: translate(0, -10px); }
      main.csrd .c-main-visual__top__image .main-image .popup-02 .comment {
        width: 30.89171975%;
        margin-bottom: 3%;
        transform: translate(0, -10px); }
    main.csrd .c-main-visual__top__image .main-image .popup-03 {
      width: 23.47826087%;
      right: 8.52173913%;
      top: 0.68%; }
      main.csrd .c-main-visual__top__image .main-image .popup-03 i {
        height: 19.47368421%;
        bottom: -13.5%; }
        main.csrd .c-main-visual__top__image .main-image .popup-03 i:after {
          bottom: -2.5px; }
      main.csrd .c-main-visual__top__image .main-image .popup-03 .image {
        position: relative;
        width: 93.33333333%;
        padding-top: 116.29629214%;
        margin-left: auto;
        margin-right: 0;
        transform: translate(0, 10px); }
        main.csrd .c-main-visual__top__image .main-image .popup-03 .image > img {
          filter: drop-shadow(6px 6px 6px rgba(149, 170, 210, 0.5));
          will-change: filter;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 85.71428571%; }
        main.csrd .c-main-visual__top__image .main-image .popup-03 .image span {
          position: absolute;
          width: 39.68253968%;
          top: 0;
          right: 0; }
      main.csrd .c-main-visual__top__image .main-image .popup-03 .comment {
        margin-top: 5%;
        transform: translate(0, 10px); }

main.csrd .c-main-visual__col3 {
  margin-top: 50px; }

main.csrd .c-whole {
  padding-top: 160px; }
  @media only screen and (max-width: 1440px) {
    main.csrd .c-whole {
      padding-top: 11.11111111vw; } }
  @media only screen and (max-width: 767px) {
    main.csrd .c-whole {
      padding-top: 44px; } }

main.csrd .what-is-image {
  position: relative;
  padding-top: 51.59574468%; }
  main.csrd .what-is-image.is-active .badge {
    opacity: 1;
    transform: translate(0, 0); }
  main.csrd .what-is-image.is-active .text {
    opacity: 1;
    transform: translate(0, 0); }
  main.csrd .what-is-image.is-active .arrow {
    opacity: 1;
    transform: translate(0, 0); }
  main.csrd .what-is-image.is-active .popup:after {
    opacity: 1; }
  main.csrd .what-is-image.is-active .popup__item img {
    opacity: 1;
    transform: translate(0, 0); }
  main.csrd .what-is-image.is-active .popup__item:after {
    opacity: 1; }
  main.csrd .what-is-image.is-active .popup__item .lineWrap svg .mask {
    stroke-dashoffset: 0; }
  main.csrd .what-is-image .badge {
    width: 12.55319149%;
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(0px 6px 7px #95aad2);
    will-change: filter;
    opacity: 0;
    transform: translate(0px, 0px);
    transition: opacity .6s, transform .6s;
    transition-delay: .8s; }
  main.csrd .what-is-image .arrow {
    width: 82.12765957%;
    position: absolute;
    right: 0;
    bottom: 21.5%;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(-60px, 0); }
  main.csrd .what-is-image .popup {
    width: 83.5106383%;
    position: absolute;
    top: 6.59793814%;
    right: 0;
    display: flex;
    justify-content: space-between; }
    main.csrd .what-is-image .popup:after {
      content: "";
      width: 76.5%;
      height: 16.74876847%;
      display: block;
      background: #DDE5F1;
      mix-blend-mode: multiply;
      will-change: filter;
      position: absolute;
      left: 11.7%;
      bottom: 0;
      transition: opacity .6s;
      transition-delay: .8s;
      opacity: 0; }
    main.csrd .what-is-image .popup__item {
      width: 23.56687898%;
      filter: drop-shadow(0px 11px 16px rgba(81, 150, 203, 0.2));
      will-change: filter;
      position: relative; }
      main.csrd .what-is-image .popup__item:after {
        content: "";
        width: 13px;
        height: 13px;
        border-radius: 50%;
        display: block;
        background: #1E65B2;
        position: absolute;
        left: 50%;
        bottom: 63px;
        transform: translate(-50%, 0);
        transition: opacity .6s;
        opacity: 0; }
        @media only screen and (max-width: 1180px) {
          main.csrd .what-is-image .popup__item:after {
            width: 1.10169492vw;
            height: 1.10169492vw;
            bottom: 5vw; } }
        @media only screen and (max-width: 767px) {
          main.csrd .what-is-image .popup__item:after {
            bottom: 15.2%; } }
      main.csrd .what-is-image .popup__item img {
        position: relative;
        z-index: +1;
        transition: opacity .6s, transform .6s;
        opacity: 0;
        transform: translate(0px, 10px);
        transition-delay: .8s; }
      main.csrd .what-is-image .popup__item .lineWrap {
        text-align: center;
        position: relative; }
        main.csrd .what-is-image .popup__item .lineWrap.bottom {
          transform: rotate(180deg); }
      main.csrd .what-is-image .popup__item svg {
        width: 2px;
        margin: 0 auto; }
        @media only screen and (max-width: 1180px) {
          main.csrd .what-is-image .popup__item svg {
            width: 0.16949153vw;
            width: 1.08108108%; } }
        main.csrd .what-is-image .popup__item svg .dashed {
          stroke-dasharray: 2.79 2.79;
          stroke-dashoffset: 0; }
        main.csrd .what-is-image .popup__item svg .mask {
          stroke-dasharray: 100;
          stroke-dashoffset: 100;
          fill: none;
          stroke-width: 2;
          stroke: #fff;
          transition: stroke-dashoffset 1.2s;
          transition-delay: .6s; }
      main.csrd .what-is-image .popup__item span {
        display: block;
        margin: 0 auto;
        text-align: center;
        margin-top: 13.51351351%; }
      main.csrd .what-is-image .popup__item .number-01 {
        width: 84.32432432%; }
      main.csrd .what-is-image .popup__item .number-02 {
        width: 79.45945946%; }

@keyframes drawLine {
  to {
    stroke-dashoffset: 0; } }
  main.csrd .what-is-image .text {
    width: 44.68085106%;
    position: absolute;
    right: 19.36170213%;
    bottom: 0;
    opacity: 0;
    transform: translate(0px, 0px);
    transition: opacity .6s, transform .6s;
    transition-delay: .8s; }

main.csrd .c-text-image.mt120 {
  margin-top: 120px; }
  @media only screen and (max-width: 1440px) {
    main.csrd .c-text-image.mt120 {
      margin-top: 8.33333333vw; } }
  @media only screen and (max-width: 767px) {
    main.csrd .c-text-image.mt120 {
      margin-top: 60px; } }

main.csrd .c-text-image__image.w996 {
  max-width: 996px;
  margin-top: 0; }
  @media only screen and (max-width: 1440px) {
    main.csrd .c-text-image__image.w996 {
      max-width: 69.16666667vw; } }
  @media only screen and (max-width: 767px) {
    main.csrd .c-text-image__image.w996 {
      max-width: 100%;
      margin-top: 32px; } }

main.csrd .why-asuene-image {
  position: relative;
  padding-top: 39.61885657%; }
  @media only screen and (max-width: 767px) {
    main.csrd .why-asuene-image {
      padding-top: 94%; } }
  main.csrd .why-asuene-image.is-active .map .image {
    opacity: 1;
    transform: translate(0, 0); }
  main.csrd .why-asuene-image.is-active .map i {
    opacity: 1;
    transform: translate(0, 0); }
  main.csrd .why-asuene-image.is-active .text {
    opacity: 1;
    transform: translate(0, 0); }
  main.csrd .why-asuene-image .map {
    position: absolute;
    padding-top: 39.61885656%;
    width: 76.83049147%;
    top: 0;
    right: 0; }
    @media only screen and (max-width: 767px) {
      main.csrd .why-asuene-image .map {
        width: 100%;
        padding-top: 51.56657963%; } }
    main.csrd .why-asuene-image .map .image {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      transition: opacity .6s, transform .6s;
      opacity: 0;
      transform: translate(0, 20px); }
    main.csrd .why-asuene-image .map i {
      position: absolute;
      transition: opacity .6s, transform .6s;
      opacity: 0;
      transform: translate(0, 20px); }
    main.csrd .why-asuene-image .map .pin-01 {
      top: 26.32911392%;
      left: 1.69712794%;
      width: 6.00522193%;
      transition-delay: .6s; }
    main.csrd .why-asuene-image .map .pin-02 {
      top: 39.74683544%;
      left: 32.11488251%;
      width: 6.39686684%;
      transition-delay: .8s; }
    main.csrd .why-asuene-image .map .pin-03 {
      top: 55.18987342%;
      left: 34.07310705%;
      width: 6.00522193%;
      transition-delay: 1s; }
    main.csrd .why-asuene-image .map .pin-04 {
      top: 33.92405063%;
      left: 40.8616188%;
      width: 8.48563969%;
      transition-delay: 1.2s; }
    main.csrd .why-asuene-image .map .pin-05 {
      top: 34.43037975%;
      right: 29.11227154%;
      width: 6.00522193%;
      transition-delay: 1.4s; }
  main.csrd .why-asuene-image .text {
    position: absolute;
    width: 22.96890672%;
    left: 0;
    bottom: 2.78481013%;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: 1.6s; }
    @media only screen and (max-width: 767px) {
      main.csrd .why-asuene-image .text {
        width: 50%;
        bottom: 0; } }

main.csrd .double-materiality-image.is-active > div {
  opacity: 1;
  transform: translate(0, 0px); }

main.csrd .double-materiality-image > div {
  transition: opacity .6s, transform .6s;
  opacity: 0;
  transform: translate(0, 20px); }

main.csrd .collect-required-image {
  position: relative;
  padding-top: 73.43485618%; }
  main.csrd .collect-required-image.is-active .graph {
    opacity: 1;
    transform: translate(0, 0px); }
  main.csrd .collect-required-image.is-active .image-01 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.csrd .collect-required-image .graph {
    position: absolute;
    filter: drop-shadow(4px 4px 8px #95aad2);
    will-change: filter;
    width: 56.17597293%;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px); }
  main.csrd .collect-required-image .graph-01 {
    left: 0;
    bottom: 0; }
  main.csrd .collect-required-image .graph-02 {
    left: 23.18104907%;
    bottom: 29.7235023%;
    transition-delay: .3s; }
  main.csrd .collect-required-image .graph-03 {
    right: 0;
    top: 4.83870968%;
    transition-delay: .6s; }
  main.csrd .collect-required-image .image-01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 24.1962775%;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .9s; }

main.csrd .build-report-image {
  position: relative;
  padding-top: 76.49063032%; }
  main.csrd .build-report-image > div {
    position: absolute; }
  main.csrd .build-report-image.is-active .graph {
    opacity: 1;
    transform: translate(0, 0px); }
  main.csrd .build-report-image .graph {
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px); }
  main.csrd .build-report-image .graph-01 {
    width: 75.97955707%;
    right: 0;
    bottom: 0;
    filter: drop-shadow(4px 9px 5px rgba(149, 170, 210, 0.4));
    will-change: filter; }
  main.csrd .build-report-image .graph-02 {
    width: 75.97955707%;
    right: 11.58432709%;
    bottom: 15.14476615%;
    filter: drop-shadow(4px 9px 5px rgba(149, 170, 210, 0.4));
    will-change: filter;
    transition-delay: .3s; }
  main.csrd .build-report-image .graph-03 {
    width: 75.97955707%;
    left: 0;
    top: 13.1403118%;
    filter: drop-shadow(4px 9px 5px rgba(149, 170, 210, 0.4));
    will-change: filter;
    transition-delay: .6s; }
  main.csrd .build-report-image .graph-04 {
    width: 35.60477002%;
    top: 0;
    right: 2.21465077%;
    filter: drop-shadow(4px 4px 10px #95aad2);
    will-change: filter;
    transition-delay: .9s; }

main.csrd .verify-image {
  position: relative;
  padding-top: 64.25041186%; }
  main.csrd .verify-image.is-active .verify-image__circle {
    opacity: 1; }
    main.csrd .verify-image.is-active .verify-image__circle svg path {
      animation: draw-line .9s linear forwards; }
  main.csrd .verify-image.is-active .verify-image__image {
    opacity: 1;
    transform: translate(0, 0px); }
  main.csrd .verify-image.is-active .verify-image__people {
    opacity: 1;
    transform: translate(0, 0px); }
  main.csrd .verify-image.is-active .verify-image__document {
    opacity: 1;
    transform: translate(0, 0px); }
  main.csrd .verify-image__circle {
    width: 85.99670511%;
    position: absolute;
    top: 14%;
    right: 9%;
    opacity: 0;
    transition: opacity .9s; }
    main.csrd .verify-image__circle svg {
      transform: rotate(180deg); }
      main.csrd .verify-image__circle svg path {
        stroke-dasharray: 1300;
        /* 線分の長さより大きめに設定 */
        stroke-dashoffset: 1300; }

@keyframes draw-line {
  to {
    stroke-dashoffset: 0; } }
  main.csrd .verify-image__image {
    width: 29.15980231%;
    position: absolute;
    top: 2.05128205%;
    left: 9.7199341%;
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform .6s, opacity .6s;
    transition-delay: 0.1s; }
  main.csrd .verify-image__people {
    width: 15.98023064%;
    position: absolute;
    left: 27.18286656%;
    bottom: 8.20512821%;
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform .6s, opacity .6s;
    transition-delay: 0.7s; }
  main.csrd .verify-image__document {
    width: 41.68039539%;
    padding-top: 52.388797%;
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform .6s, opacity .6s;
    transition-delay: 0.4s; }
    main.csrd .verify-image__document .note {
      display: inline-block;
      width: 87.74703557%;
      filter: drop-shadow(14px 14px 24px rgba(149, 170, 210, 0.5));
      will-change: filter;
      position: absolute;
      left: 0;
      bottom: 0; }
    main.csrd .verify-image__document .label {
      display: inline-block;
      width: 35.57312253%;
      position: absolute;
      top: 0;
      right: 0; }

main.platform-overview .pt38 {
  padding-top: 38px; }
  @media only screen and (max-width: 1440px) {
    main.platform-overview .pt38 {
      padding-top: 2.63888889vw; } }
  @media only screen and (max-width: 767px) {
    main.platform-overview .pt38 {
      padding-top: 0; } }

main.platform-overview .pt45 {
  padding-top: 45px; }
  @media only screen and (max-width: 1440px) {
    main.platform-overview .pt45 {
      padding-top: 3.125vw; } }
  @media only screen and (max-width: 767px) {
    main.platform-overview .pt45 {
      padding-top: 14px; } }

main.platform-overview .pt50 {
  padding-top: 50px; }
  @media only screen and (max-width: 1440px) {
    main.platform-overview .pt50 {
      padding-top: 3.47222222vw; } }
  @media only screen and (max-width: 767px) {
    main.platform-overview .pt50 {
      padding-top: 14px; } }

main.platform-overview .pt111 {
  padding-top: 111px; }
  @media only screen and (max-width: 1440px) {
    main.platform-overview .pt111 {
      padding-top: 7.70833333vw; } }
  @media only screen and (max-width: 767px) {
    main.platform-overview .pt111 {
      padding-top: 14px; } }

@media only screen and (max-width: 767px) {
  main.platform-overview .sp-mb34 {
    margin-top: 54px !important;
    margin-bottom: 34px !important; } }

@media only screen and (max-width: 767px) {
  main.platform-overview .sp-mb22 {
    margin-top: 50px !important;
    margin-bottom: 22px !important; } }

@media only screen and (max-width: 767px) {
  main.platform-overview .sp-mb68 {
    margin-bottom: 68px; } }

main.platform-overview .c-main-visual__top__image {
  position: relative;
  margin-top: -40px; }
  @media only screen and (max-width: 1440px) {
    main.platform-overview .c-main-visual__top__image {
      margin-top: -2.77777778vw; } }
  @media only screen and (max-width: 767px) {
    main.platform-overview .c-main-visual__top__image {
      margin-top: 20px; } }
  main.platform-overview .c-main-visual__top__image .main-image {
    padding-top: 61.05610561%;
    position: relative; }
    main.platform-overview .c-main-visual__top__image .main-image.is-active .main-image__graph > div {
      top: 0; }
      main.platform-overview .c-main-visual__top__image .main-image.is-active .main-image__graph > div:before {
        opacity: 1; }
      main.platform-overview .c-main-visual__top__image .main-image.is-active .main-image__graph > div img {
        opacity: 1; }
      main.platform-overview .c-main-visual__top__image .main-image.is-active .main-image__graph > div .lottie-obj {
        opacity: 1; }
    main.platform-overview .c-main-visual__top__image .main-image__graph {
      position: absolute; }
      main.platform-overview .c-main-visual__top__image .main-image__graph > div {
        position: relative;
        top: 20px;
        transition: top 0.6s, opacity 0.6s; }
        main.platform-overview .c-main-visual__top__image .main-image__graph > div:before {
          content: "";
          width: 100%;
          height: 100%;
          background: #95aad2;
          filter: blur(11px);
          will-change: filter;
          position: absolute;
          top: 14px;
          left: 14px;
          mix-blend-mode: multiply;
          transition: opacity 0.6s;
          opacity: 0; }
      main.platform-overview .c-main-visual__top__image .main-image__graph img {
        position: relative;
        transition: opacity 0.6s;
        opacity: 0; }
      main.platform-overview .c-main-visual__top__image .main-image__graph video {
        position: relative; }
      main.platform-overview .c-main-visual__top__image .main-image__graph .lottie-obj {
        transition: opacity 0.6s;
        opacity: 0; }
        main.platform-overview .c-main-visual__top__image .main-image__graph .lottie-obj svg {
          display: block;
          width: 100%; }
    main.platform-overview .c-main-visual__top__image .main-image .graph-01 {
      width: 63.03630363%;
      left: 0;
      bottom: 0; }
      main.platform-overview .c-main-visual__top__image .main-image .graph-01 > div {
        transition-delay: .2s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-01 > div:before {
          transition-delay: .2s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-01 > div img {
          transition-delay: .2s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-01 > div .lottie-obj {
          position: absolute;
          top: 12.67605634%;
          left: 12.30366492%;
          width: 42.93193717%;
          transition-delay: .2s; }
    main.platform-overview .c-main-visual__top__image .main-image .graph-02 {
      width: 19.8019802%;
      top: 17.2972973%;
      left: 37.62376238%; }
      main.platform-overview .c-main-visual__top__image .main-image .graph-02 > div {
        transition-delay: .4s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-02 > div:before {
          transition-delay: .4s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-02 > div img {
          transition-delay: .4s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-02 > div .lottie-obj {
          position: absolute;
          top: 16.91542289%;
          left: 50%;
          width: 55.83333333%;
          transform: translate(-50%, 0);
          transition-delay: .4s; }
    main.platform-overview .c-main-visual__top__image .main-image .graph-03 {
      width: 19.8019802%;
      right: 21.12211221%;
      bottom: 14.05405405%; }
      main.platform-overview .c-main-visual__top__image .main-image .graph-03 > div {
        transition-delay: .6s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-03 > div:before {
          transition-delay: .6s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-03 > div img {
          transition-delay: .6s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-03 > div .lottie-obj {
          position: absolute;
          top: 16.91542289%;
          left: 50%;
          width: 55.83333333%;
          transform: translate(-50%, 0);
          transition-delay: .6s; }
    main.platform-overview .c-main-visual__top__image .main-image .graph-04 {
      width: 19.8019802%;
      right: 0;
      bottom: 0; }
      main.platform-overview .c-main-visual__top__image .main-image .graph-04 > div {
        transition-delay: .8s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-04 > div:before {
          transition-delay: .8s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-04 > div img {
          transition-delay: .8s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-04 > div .lottie-obj {
          position: absolute;
          top: 16.91542289%;
          left: 50%;
          width: 55.83333333%;
          transform: translate(-50%, 0);
          transition-delay: .8s; }
    main.platform-overview .c-main-visual__top__image .main-image .graph-05 {
      width: 33.16831683%;
      top: 0;
      right: 0; }
      main.platform-overview .c-main-visual__top__image .main-image .graph-05 > div {
        transition-delay: 1s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-05 > div:before {
          transition-delay: 1s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-05 > div img {
          transition-delay: 1s; }
        main.platform-overview .c-main-visual__top__image .main-image .graph-05 > div .lottie-obj {
          position: absolute;
          top: 23.4375%;
          left: 17.82178218%;
          width: 65.84158416%;
          transition-delay: 1s; }

main.platform-overview .measure-image {
  position: relative; }
  main.platform-overview .measure-image.is-active .shadow {
    opacity: 1;
    transform: translate(0, 0px); }
  main.platform-overview .measure-image.is-active .image-01 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.platform-overview .measure-image.is-active .image-02 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.platform-overview .measure-image .shadow {
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform 0.6s, opacity 0.6s; }
  main.platform-overview .measure-image .image-01 {
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform 0.6s, opacity 0.6s; }
  main.platform-overview .measure-image .image-02 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform .6s, opacity .6s;
    transition-delay: .4s; }

main.platform-overview .reduce-image {
  position: relative; }
  main.platform-overview .reduce-image.is-active .reduce-image__graph {
    opacity: 1;
    transform: translate(0, 0px); }
    main.platform-overview .reduce-image.is-active .reduce-image__graph .bg {
      opacity: 1; }
    main.platform-overview .reduce-image.is-active .reduce-image__graph svg .mask {
      stroke-dashoffset: 0; }
  main.platform-overview .reduce-image.is-active .reduce-image__popup {
    opacity: 1;
    transform: translate(0, 0px); }
  main.platform-overview .reduce-image.is-active .reduce-image__comment {
    opacity: 1;
    transform: translate(0, 0px); }
  main.platform-overview .reduce-image__graph {
    filter: drop-shadow(13.78px 13.78px 23.63px rgba(149, 170, 210, 0.5));
    will-change: filter;
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform .6s, opacity .6s; }
    main.platform-overview .reduce-image__graph .bg {
      width: 84.62867012%;
      position: absolute;
      top: 48.63221884%;
      left: 9.1537133%;
      opacity: 0;
      transition: opacity .6s;
      transition-delay: 1.2s;
      mix-blend-mode: multiply;
      will-change: filter; }
    main.platform-overview .reduce-image__graph .lineWrap {
      position: absolute;
      left: 9.1537133%; }
    main.platform-overview .reduce-image__graph .line-01 {
      width: 84.62867012%;
      top: 31.91489362%; }
    main.platform-overview .reduce-image__graph .line-02 {
      width: 84.62867012%;
      top: 48.93617021%; }
    main.platform-overview .reduce-image__graph .line-03 {
      width: 84.62867012%;
      top: 48.63221884%; }
    main.platform-overview .reduce-image__graph svg {
      display: block;
      width: 100%; }
      main.platform-overview .reduce-image__graph svg .mask {
        stroke-dasharray: 500;
        stroke-dashoffset: 500;
        transition: stroke-dashoffset 1.2s, stroke-dasharray 1.2s;
        -webkit-transition: stroke-dashoffset 1.2s, stroke-dasharray 1.2s;
        will-change: stroke-dashoffset;
        transition-delay: 0s; }
  main.platform-overview .reduce-image__popup {
    position: absolute;
    display: block;
    width: 23.1433506%;
    top: -14.89361702%;
    left: 21.07081174%;
    filter: drop-shadow(0px 5.89px 11.79px rgba(0, 0, 0, 0.25));
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform 0.6s, opacity 0.6s;
    transition-delay: 1.8s; }
  main.platform-overview .reduce-image__comment {
    filter: drop-shadow(0 6.29px 6.29px rgba(0, 0, 0, 0.25));
    will-change: filter;
    display: inline-block;
    position: absolute;
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform .6s, opacity .6s; }
  main.platform-overview .reduce-image .comment-01 {
    width: 20.37996546%;
    top: 46.50455927%;
    left: 30.22452504%;
    transition-delay: 1.2s; }
  main.platform-overview .reduce-image .comment-02 {
    width: 15.19861831%;
    top: 28.2674772%;
    left: 51.29533679%;
    transition-delay: 1.4s; }
  main.platform-overview .reduce-image .comment-03 {
    width: 16.58031088%;
    top: 58.05471125%;
    right: 15.37132988%;
    transition-delay: 1.6s; }

main.platform-overview .carbon-credit-image {
  position: relative; }
  main.platform-overview .carbon-credit-image.is-active .carbon-credit-image__map {
    opacity: 1;
    transform: translate(0, 0px); }
  main.platform-overview .carbon-credit-image.is-active .carbon-credit-image__popup {
    opacity: 1;
    transform: translate(0, 0px); }
  main.platform-overview .carbon-credit-image__map {
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform .6s, opacity .6s; }
  main.platform-overview .carbon-credit-image__popup {
    position: absolute;
    filter: drop-shadow(14px 14px 12px #95AAD2);
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform .6s, opacity .6s;
    will-change: filter; }
  main.platform-overview .carbon-credit-image .popup-01 {
    width: 14.8960739%;
    top: 17.30205279%;
    left: 21.24711316%;
    transition-delay: .6s; }
  main.platform-overview .carbon-credit-image .popup-02 {
    width: 14.8960739%;
    top: -1.17302053%;
    left: 48.15242494%;
    transition-delay: .8s; }
  main.platform-overview .carbon-credit-image .popup-03 {
    width: 14.8960739%;
    top: 21.70087977%;
    right: 6.35103926%;
    transition-delay: 1s; }
  main.platform-overview .carbon-credit-image .popup-04 {
    width: 7.39030023%;
    top: 7.62463343%;
    left: 11.66281755%;
    filter: drop-shadow(2px 2px 4px rgba(22, 96, 175, 0.4));
    transition-delay: 1.2s; }
  main.platform-overview .carbon-credit-image .popup-05 {
    width: 6.35103926%;
    right: 23.55658199%;
    top: -3.22580645%;
    filter: drop-shadow(2px 2px 4px rgba(22, 96, 175, 0.4));
    transition-delay: 1.4s; }

main.platform-overview .verify-image {
  position: relative;
  padding-top: 64.25041186%; }
  main.platform-overview .verify-image.is-active .verify-image__circle {
    opacity: 1; }
    main.platform-overview .verify-image.is-active .verify-image__circle svg path {
      animation: draw-line .9s linear forwards; }
  main.platform-overview .verify-image.is-active .verify-image__image {
    opacity: 1;
    transform: translate(0, 0px); }
  main.platform-overview .verify-image.is-active .verify-image__people {
    opacity: 1;
    transform: translate(0, 0px); }
  main.platform-overview .verify-image.is-active .verify-image__document {
    opacity: 1;
    transform: translate(0, 0px); }
  main.platform-overview .verify-image__circle {
    width: 85.99670511%;
    position: absolute;
    top: 14%;
    right: 9%;
    opacity: 0;
    transition: opacity .9s; }
    main.platform-overview .verify-image__circle svg {
      transform: rotate(180deg); }
      main.platform-overview .verify-image__circle svg path {
        stroke-dasharray: 1300;
        /* 線分の長さより大きめに設定 */
        stroke-dashoffset: 1300; }

@keyframes draw-line {
  to {
    stroke-dashoffset: 0; } }
  main.platform-overview .verify-image__image {
    width: 29.15980231%;
    position: absolute;
    top: 2.05128205%;
    left: 9.7199341%;
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform .6s, opacity .6s;
    transition-delay: 0.1s; }
  main.platform-overview .verify-image__people {
    width: 15.98023064%;
    position: absolute;
    left: 27.18286656%;
    bottom: 8.20512821%;
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform .6s, opacity .6s;
    transition-delay: 0.7s; }
  main.platform-overview .verify-image__document {
    width: 41.68039539%;
    padding-top: 52.388797%;
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform .6s, opacity .6s;
    transition-delay: 0.4s; }
    main.platform-overview .verify-image__document .note {
      display: inline-block;
      width: 87.74703557%;
      filter: drop-shadow(14px 14px 24px rgba(149, 170, 210, 0.5));
      will-change: filter;
      position: absolute;
      left: 0;
      bottom: 0; }
    main.platform-overview .verify-image__document .label {
      display: inline-block;
      width: 35.57312253%;
      position: absolute;
      top: 0;
      right: 0; }

main.platform-overview .report-image {
  padding-top: 88.39779006%;
  position: relative; }
  main.platform-overview .report-image.is-active .report-image__popup {
    opacity: 1;
    transform: translate(0, 0px); }
  main.platform-overview .report-image__popup {
    position: absolute;
    filter: drop-shadow(14px 14px 24px rgba(149, 170, 210, 0.5));
    will-change: filter;
    opacity: 0;
    transform: translate(0, 20px);
    transition: transform .6s, opacity .6s; }
  main.platform-overview .report-image .popup-01 {
    width: 51.01289134%;
    left: 17.67955801%;
    bottom: 13.95833333%;
    transition-delay: 1s; }
  main.platform-overview .report-image .popup-02 {
    width: 41.80478821%;
    top: 23.125%;
    left: 0;
    transition-delay: 0.8s; }
  main.platform-overview .report-image .popup-03 {
    width: 51.01289134%;
    top: 14.16666667%;
    right: 0;
    transition-delay: 0.6s; }
  main.platform-overview .report-image .popup-04 {
    width: 51.01289134%;
    right: 9.02394107%;
    bottom: 0;
    filter: drop-shadow(8px 8px 17px #95aad2);
    transition-delay: 0.4s; }
  main.platform-overview .report-image .popup-05 {
    width: 27.44014733%;
    top: 0;
    left: 30.38674033%;
    filter: drop-shadow(8px 8px 17px #95aad2);
    transition-delay: 0.2s; }

@media only screen and (min-width: 768px) {
  main.sbt .c-main-visual {
    padding-top: 149px; } }

@media only screen and (max-width: 1440px) {
  main.sbt .c-main-visual {
    padding-top: 10.34722222vw; } }

main.sbt .c-main-visual__top__text {
  width: 50.16393443%;
  z-index: +1; }
  @media only screen and (max-width: 767px) {
    main.sbt .c-main-visual__top__text {
      width: 100%; } }

main.sbt .c-main-visual__top__image {
  width: 49.75409836%;
  position: relative;
  margin-top: -70px;
  margin-right: -2%; }
  @media only screen and (max-width: 1440px) {
    main.sbt .c-main-visual__top__image {
      margin-top: -4.86111111vw; } }
  @media only screen and (max-width: 767px) {
    main.sbt .c-main-visual__top__image {
      margin-top: 32px;
      width: 97%;
      margin-left: auto;
      margin-right: auto; } }
  main.sbt .c-main-visual__top__image .main-image {
    padding-top: 67.87479407%;
    position: relative; }
    main.sbt .c-main-visual__top__image .main-image.is-active .graph-01 span:nth-of-type(2):before {
      height: 87.06467662%; }
    main.sbt .c-main-visual__top__image .main-image.is-active .graph-01 span:nth-of-type(3):before {
      height: 71.14427861%; }
    main.sbt .c-main-visual__top__image .main-image.is-active .graph-01 span:nth-of-type(4):before {
      height: 59.2039801%; }
    main.sbt .c-main-visual__top__image .main-image.is-active .graph-01 span:nth-of-type(5):before {
      height: 43.28358209%; }
    main.sbt .c-main-visual__top__image .main-image.is-active .graph-01 span:nth-of-type(6):before {
      height: 35.32338308%; }
    main.sbt .c-main-visual__top__image .main-image.is-active .graph-01 span:nth-of-type(7):before {
      height: 26.3681592%; }
    main.sbt .c-main-visual__top__image .main-image.is-active .graph-01 span:nth-of-type(8):before {
      height: 19.40298507%; }
    main.sbt .c-main-visual__top__image .main-image.is-active .graph-02 span:before {
      height: 100%; }
    main.sbt .c-main-visual__top__image .main-image.is-active .line-01 svg path {
      animation: draw-line 2s forwards;
      animation-delay: 0s; }
    main.sbt .c-main-visual__top__image .main-image.is-active .line-02 svg path {
      animation: draw-line 2s forwards;
      animation-delay: 0s; }
    main.sbt .c-main-visual__top__image .main-image.is-active .point {
      opacity: 1; }
    main.sbt .c-main-visual__top__image .main-image.is-active .text {
      opacity: 1; }
    main.sbt .c-main-visual__top__image .main-image .image-01 {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0; }
    main.sbt .c-main-visual__top__image .main-image .graph-01 {
      width: 66.22734761%;
      height: 48.78640777%;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      position: absolute;
      top: 24.51456311%;
      left: 10.54365733%; }
      main.sbt .c-main-visual__top__image .main-image .graph-01 span {
        width: 9.2039801%;
        height: 100%;
        display: block;
        position: relative; }
        main.sbt .c-main-visual__top__image .main-image .graph-01 span:before {
          content: "";
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          bottom: 0;
          display: block;
          background: linear-gradient(to top, #005ABB, #0071E9);
          transition: height 1s; }
    main.sbt .c-main-visual__top__image .main-image .graph-02 {
      width: 66.22734761%;
      height: 7.2815534%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: absolute;
      top: 73.30097087%;
      left: 10.54365733%; }
      main.sbt .c-main-visual__top__image .main-image .graph-02 span {
        width: 9.2039801%;
        height: 0%;
        display: block;
        position: relative; }
        main.sbt .c-main-visual__top__image .main-image .graph-02 span:before {
          content: "";
          width: 100%;
          height: 0%;
          position: absolute;
          left: 0;
          top: 0;
          display: block;
          background: #0CC0C7;
          transition: height 1s; }
        main.sbt .c-main-visual__top__image .main-image .graph-02 span:nth-of-type(4) {
          height: 20%; }
        main.sbt .c-main-visual__top__image .main-image .graph-02 span:nth-of-type(5) {
          height: 33.33333333%; }
        main.sbt .c-main-visual__top__image .main-image .graph-02 span:nth-of-type(6) {
          height: 53.33333333%; }
        main.sbt .c-main-visual__top__image .main-image .graph-02 span:nth-of-type(7) {
          height: 80%; }
        main.sbt .c-main-visual__top__image .main-image .graph-02 span:nth-of-type(8) {
          height: 100%; }
    main.sbt .c-main-visual__top__image .main-image .line-01 {
      width: 73.64085667%;
      position: absolute;
      top: 20.38834951%;
      left: 5.60131796%;
      z-index: +1; }
      main.sbt .c-main-visual__top__image .main-image .line-01 svg path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000; }
    main.sbt .c-main-visual__top__image .main-image .line-02 {
      width: 75.45304778%;
      position: absolute;
      top: 20.8%;
      left: 5.60131796%; }
      main.sbt .c-main-visual__top__image .main-image .line-02 svg path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000; }
    main.sbt .c-main-visual__top__image .main-image .point {
      width: 2.47116969%;
      position: absolute;
      right: 25%;
      bottom: 24.8%;
      filter: drop-shadow(0px 0px 10px #81fff9);
      will-change: filter;
      opacity: 0;
      transition: opacity .6s;
      transition-delay: .5s; }
    main.sbt .c-main-visual__top__image .main-image .text {
      width: 75.5%;
      position: absolute;
      left: 6%;
      bottom: -2%;
      opacity: 0;
      transition: opacity .6s;
      transition-delay: .6s; }

@keyframes draw-line {
  from {
    stroke-dashoffset: 1000; }
  to {
    stroke-dashoffset: 0; } }

main.sbt .c-main-visual__col3 {
  margin-top: 45px; }
  @media only screen and (max-width: 767px) {
    main.sbt .c-main-visual__col3 {
      margin-top: 52px; } }

main.sbt .c-whole {
  padding-top: 160px; }
  @media only screen and (max-width: 1440px) {
    main.sbt .c-whole {
      padding-top: 11.11111111vw; } }
  @media only screen and (max-width: 767px) {
    main.sbt .c-whole {
      padding-top: 44px; } }

main.sbt .what-is-image {
  position: relative;
  padding-top: 67.4904943%; }
  main.sbt .what-is-image.is-active > div {
    opacity: 1;
    transform: translate(0, 0); }
  main.sbt .what-is-image > div {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(4px 9px 17px #95bcde);
    will-change: filter;
    opacity: 0;
    transform: translate(0, 20px);
    transition: opacity .6s, transform .6s; }
    main.sbt .what-is-image > div img {
      width: 60.64638783%;
      display: block; }

main.sbt .calculate-emissions-image {
  position: relative;
  padding-top: 76.92307692%; }
  main.sbt .calculate-emissions-image.is-active .image-01 {
    opacity: 1;
    transform: translate(0, 0); }
  main.sbt .calculate-emissions-image .image-01 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(4px 9px 17px rgba(149, 188, 222, 0.4));
    will-change: filter;
    opacity: 0;
    transform: translate(0, 20px);
    transition: opacity .6s, transform .6s; }

main.sbt .understand-the-gap-image {
  position: relative;
  padding-top: 74.08695652%; }
  main.sbt .understand-the-gap-image.is-active .graph-01 {
    opacity: 1;
    transform: translate(0, 0); }
  main.sbt .understand-the-gap-image.is-active .comment {
    opacity: 1;
    transform: translate(0, 0); }
  main.sbt .understand-the-gap-image .graph-01 {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    filter: drop-shadow(13px 13px 12px rgba(149, 170, 210, 0.5));
    will-change: filter;
    opacity: 0;
    transform: translate(0, 20px);
    transition: opacity .6s, transform .6s; }
  main.sbt .understand-the-gap-image .comment {
    position: absolute;
    filter: drop-shadow(0px 6px 3px rgba(0, 0, 0, 0.25));
    will-change: filter;
    opacity: 0;
    transform: translate(0, 20px);
    transition: opacity .6s, transform .6s; }
  main.sbt .understand-the-gap-image .comment-01 {
    width: 20.34782609%;
    left: 30.26086957%;
    bottom: 34.27230047%;
    transition-delay: .6s; }
  main.sbt .understand-the-gap-image .comment-02 {
    width: 15.13043478%;
    right: 33.56521739%;
    bottom: 48.5915493%;
    transition-delay: .8s; }
  main.sbt .understand-the-gap-image .comment-03 {
    width: 16.69565217%;
    right: 15.47826087%;
    bottom: 25.82159624%;
    transition-delay: 1s; }

main.sbt .set-reduction-target-image {
  position: relative;
  padding-top: 74.52006981%; }
  main.sbt .set-reduction-target-image.is-active .image-01 {
    opacity: 1;
    transform: translate(0, 0); }
  main.sbt .set-reduction-target-image .image-01 {
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(16px 16px 13px rgba(149, 170, 210, 0.5));
    will-change: filter;
    opacity: 0;
    transform: translate(0, 20px);
    transition: opacity .6s, transform .6s; }

main.sbt .document-and-submit-image {
  position: relative;
  padding-top: 66.08695652%; }
  main.sbt .document-and-submit-image.is-active .image-01 {
    opacity: 1;
    transform: translate(0, 0); }
  main.sbt .document-and-submit-image.is-active .image-02 {
    opacity: 1;
    transform: translate(0, 0); }
  main.sbt .document-and-submit-image .image-01 {
    width: 81.56521739%;
    position: absolute;
    left: 0;
    bottom: 0;
    filter: drop-shadow(4px 9px 17px rgba(149, 188, 222, 0.4));
    will-change: filter;
    opacity: 0;
    transform: translate(0, 20px);
    transition: opacity .6s, transform .6s; }
  main.sbt .document-and-submit-image .image-02 {
    width: 37.56521739%;
    position: absolute;
    top: 0;
    right: 0;
    filter: drop-shadow(4px 4px 11px #95bcde);
    will-change: filter;
    opacity: 0;
    transform: translate(0, 20px);
    transition: opacity .6s, transform .6s;
    transition-delay: .6s; }

main.supply-chain .c-text-image.pt30 {
  padding-top: 30px; }
  @media only screen and (max-width: 1440px) {
    main.supply-chain .c-text-image.pt30 {
      padding-top: 2.08333333vw; } }
  @media only screen and (max-width: 767px) {
    main.supply-chain .c-text-image.pt30 {
      padding-top: 0; } }

main.supply-chain .c-text-image.pb18 {
  padding-bottom: 18px; }
  @media only screen and (max-width: 1440px) {
    main.supply-chain .c-text-image.pb18 {
      padding-bottom: 1.25vw; } }
  @media only screen and (max-width: 767px) {
    main.supply-chain .c-text-image.pb18 {
      padding-bottom: 0; } }

main.supply-chain .c-main-visual {
  overflow: hidden; }
  main.supply-chain .c-main-visual__top__text {
    width: 55.56485356%;
    z-index: +1; }
    @media only screen and (max-width: 767px) {
      main.supply-chain .c-main-visual__top__text {
        width: 100%; } }
  main.supply-chain .c-main-visual__top__image {
    width: 69.79079498%;
    margin-left: -20.50209205%;
    margin-right: -6.27615063%;
    position: relative;
    margin-top: -40px; }
    @media only screen and (max-width: 1440px) {
      main.supply-chain .c-main-visual__top__image {
        margin-top: -2.77777778vw; } }
    @media only screen and (max-width: 767px) {
      main.supply-chain .c-main-visual__top__image {
        margin-top: 20px;
        width: 140%;
        margin-left: -29%;
        margin-right: -11%; } }
    main.supply-chain .c-main-visual__top__image .main-image {
      padding-top: 51.558753%;
      position: relative; }
      main.supply-chain .c-main-visual__top__image .main-image.is-active .article .logo {
        opacity: 1; }
        main.supply-chain .c-main-visual__top__image .main-image.is-active .article .logo > div {
          opacity: 1; }
      main.supply-chain .c-main-visual__top__image .main-image.is-active .article i {
        opacity: 1;
        transform: translate(0, 0px); }
        main.supply-chain .c-main-visual__top__image .main-image.is-active .article i:before {
          opacity: 1; }
        main.supply-chain .c-main-visual__top__image .main-image.is-active .article i:after {
          opacity: 1; }
      main.supply-chain .c-main-visual__top__image .main-image.is-active .article .icon-01:before {
        width: 55%; }
      main.supply-chain .c-main-visual__top__image .main-image.is-active .article .icon-02:before {
        width: 174%; }
      main.supply-chain .c-main-visual__top__image .main-image.is-active .article .icon-03:before {
        width: 230%; }
      main.supply-chain .c-main-visual__top__image .main-image.is-active .article .icon-04:before {
        width: 176.5%; }
      main.supply-chain .c-main-visual__top__image .main-image.is-active .article .icon-05:before {
        width: 99%; }
      main.supply-chain .c-main-visual__top__image .main-image.is-active .article .icon-06:before {
        width: 83%; }
      main.supply-chain .c-main-visual__top__image .main-image .map {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0; }
      main.supply-chain .c-main-visual__top__image .main-image .article {
        width: 20.38369305%;
        padding-top: 20.38369305%;
        border-radius: 50%;
        position: absolute;
        top: 31.62790698%;
        right: 33.21342926%; }
        main.supply-chain .c-main-visual__top__image .main-image .article .logo {
          width: 100%;
          height: 100%;
          border: 1px solid #0D6DD1;
          border-radius: 50%;
          position: absolute;
          top: 0;
          left: 0;
          transition: opacity .6s;
          opacity: 0;
          transition-delay: 1.2s; }
          main.supply-chain .c-main-visual__top__image .main-image .article .logo > div {
            width: 90.58823529%;
            height: 90.58823529%;
            background: linear-gradient(to right, #0077F5, #1660AF);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: drop-shadow(7px 7px 5px #95aad2);
            will-change: filter;
            transition: opacity 1s;
            opacity: 0;
            transition-delay: 1.8s; }
            main.supply-chain .c-main-visual__top__image .main-image .article .logo > div img {
              width: 75.32467532%; }
        main.supply-chain .c-main-visual__top__image .main-image .article i {
          position: absolute;
          width: 22.94117647%;
          height: 22.94117647%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: opacity .6s, transform .6s;
          opacity: 0;
          transform: translate(0, 20px); }
          main.supply-chain .c-main-visual__top__image .main-image .article i:before {
            content: "";
            height: 1px;
            display: block;
            background: #0D6DD1;
            position: absolute;
            width: 0;
            opacity: 0;
            transition: width .6s, opacity .6s;
            transition-delay: .6s;
            transform-origin: top left; }
          main.supply-chain .c-main-visual__top__image .main-image .article i:after {
            content: "";
            width: 7.69230769%;
            height: 7.69230769%;
            border-radius: 50%;
            background: #0D6DD1;
            display: block;
            position: absolute;
            opacity: 0;
            transition: opacity .6s;
            transition-delay: 1.2s; }
        main.supply-chain .c-main-visual__top__image .main-image .article .icon-01 {
          top: -10.58823529%;
          left: -17.64705882%; }
          main.supply-chain .c-main-visual__top__image .main-image .article .icon-01:before {
            top: 92%;
            left: 85%;
            transform: rotate(38deg); }
          main.supply-chain .c-main-visual__top__image .main-image .article .icon-01:after {
            bottom: -30%;
            right: -32%; }
        main.supply-chain .c-main-visual__top__image .main-image .article .icon-02 {
          top: -3.98823529%;
          left: -52.94117647%; }
          main.supply-chain .c-main-visual__top__image .main-image .article .icon-02:before {
            top: 82%;
            left: 89%;
            transform: rotate(28deg); }
          main.supply-chain .c-main-visual__top__image .main-image .article .icon-02:after {
            bottom: -67.5%;
            right: -148.7%; }
        main.supply-chain .c-main-visual__top__image .main-image .article .icon-03 {
          top: 22.35294118%;
          left: -74.11764706%; }
          main.supply-chain .c-main-visual__top__image .main-image .article .icon-03:before {
            top: 63%;
            left: 101%;
            transform: rotate(12deg); }
          main.supply-chain .c-main-visual__top__image .main-image .article .icon-03:after {
            bottom: -15%;
            right: -230%; }
        main.supply-chain .c-main-visual__top__image .main-image .article .icon-04 {
          top: 57.64705882%;
          left: -61.76470588%; }
          main.supply-chain .c-main-visual__top__image .main-image .article .icon-04:before {
            top: 43%;
            left: 98%;
            transform: rotate(-12deg); }
          main.supply-chain .c-main-visual__top__image .main-image .article .icon-04:after {
            top: 5%;
            right: -178.5%; }
        main.supply-chain .c-main-visual__top__image .main-image .article .icon-05 {
          bottom: -3.98823529%;
          left: -33.05882353%; }
          main.supply-chain .c-main-visual__top__image .main-image .article .icon-05:before {
            top: 26%;
            left: 94%;
            transform: rotate(-35deg); }
          main.supply-chain .c-main-visual__top__image .main-image .article .icon-05:after {
            top: -32%;
            right: -78%; }
        main.supply-chain .c-main-visual__top__image .main-image .article .icon-06 {
          width: 38.82352941%;
          height: 38.82352941%;
          top: -5.88235294%;
          right: -54.17647059%; }
          main.supply-chain .c-main-visual__top__image .main-image .article .icon-06:before {
            top: 91%;
            right: 80%;
            transform: rotate(-45deg);
            transform-origin: top right; }
          main.supply-chain .c-main-visual__top__image .main-image .article .icon-06:after {
            width: 4.54545455%;
            height: 4.54545455%;
            bottom: -53%;
            left: -42%; }
  main.supply-chain .c-main-visual__col3 {
    margin-top: 37px; }

main.supply-chain .engage-suppliers-image {
  position: relative;
  padding-top: 96.11451943%; }
  main.supply-chain .engage-suppliers-image__wrap {
    max-width: 489px; }
  main.supply-chain .engage-suppliers-image.is-active .map img {
    opacity: 1;
    transform: translate(0, 0px); }
  main.supply-chain .engage-suppliers-image.is-active .text img {
    opacity: 1;
    transform: translate(0, 0px); }
  main.supply-chain .engage-suppliers-image.is-active span {
    opacity: 1;
    transform: translate(0, 0px); }
  main.supply-chain .engage-suppliers-image .map {
    width: 96.11451943%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    main.supply-chain .engage-suppliers-image .map img {
      transition: opacity 0.6s, transform .6s;
      opacity: 0;
      transform: translate(0, 20px); }
  main.supply-chain .engage-suppliers-image .text {
    width: 25.35787321%;
    position: absolute;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 6px white);
    will-change: filter; }
    main.supply-chain .engage-suppliers-image .text img {
      transition: opacity 0.6s, transform .6s;
      opacity: 0;
      transform: translate(0, 20px);
      transition-delay: .6s; }
  main.supply-chain .engage-suppliers-image span {
    position: absolute;
    transition: opacity 0.6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .6s; }
  main.supply-chain .engage-suppliers-image .people-01 {
    width: 12.67893661%;
    top: 18.33688699%;
    left: 3.40425532%; }
  main.supply-chain .engage-suppliers-image .people-02 {
    width: 6.54396728%;
    top: 6.82302772%;
    left: 32.76595745%; }
  main.supply-chain .engage-suppliers-image .people-03 {
    width: 12.67893661%;
    top: 0;
    right: 26.38297872%; }
  main.supply-chain .engage-suppliers-image .people-04 {
    width: 7.97546012%;
    top: 32.62260128%;
    right: 0; }
  main.supply-chain .engage-suppliers-image .people-05 {
    width: 12.47443763%;
    right: 2.82608696%;
    bottom: 17.91044776%; }
  main.supply-chain .engage-suppliers-image .people-06 {
    width: 7.56646217%;
    right: 38.08510638%;
    bottom: 1.91897655%; }
  main.supply-chain .engage-suppliers-image .people-07 {
    width: 10.83844581%;
    left: 15.53191489%;
    bottom: 4.69083156%; }
  main.supply-chain .engage-suppliers-image .people-08 {
    width: 6.54396728%;
    left: 0;
    top: 50.53304904%; }

main.supply-chain .w1020 {
  max-width: 1020px !important;
  margin: 0 auto; }

main.supply-chain .w980 {
  max-width: 980px !important;
  margin: 0 auto; }

main.supply-chain .collect-data-image {
  position: relative;
  padding-top: 40.40816327%; }
  main.supply-chain .collect-data-image.is-active .graph-01 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.supply-chain .collect-data-image.is-active .graph-02 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.supply-chain .collect-data-image.is-active .graph-03 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.supply-chain .collect-data-image.is-active .text {
    opacity: 1;
    transform: translate(0, 0px); }
  main.supply-chain .collect-data-image .graph-01 {
    width: 47.75510204%;
    position: absolute;
    bottom: 0;
    left: 0;
    filter: drop-shadow(4px 8px 16px rgba(149, 170, 210, 0.72));
    will-change: filter;
    transition: opacity 0.6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px); }
  main.supply-chain .collect-data-image .graph-02 {
    width: 19.89795918%;
    position: absolute;
    left: 40.40816327%;
    top: 20.70707071%;
    filter: drop-shadow(12px 12px 10px rgba(149, 170, 210, 0.5));
    will-change: filter;
    transition: opacity 0.6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .3s; }
  main.supply-chain .collect-data-image .graph-03 {
    width: 29.28571429%;
    position: absolute;
    right: 12.85714286%;
    bottom: 0;
    filter: drop-shadow(12px 12px 10px rgba(149, 170, 210, 0.5));
    will-change: filter;
    transition: opacity 0.6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .9s; }
  main.supply-chain .collect-data-image .text {
    width: 21.83673469%;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: 1.2s; }

main.supply-chain .reporting-reduction-image {
  position: relative;
  padding-top: 44.50980392%; }
  main.supply-chain .reporting-reduction-image.is-active .graph-01 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.supply-chain .reporting-reduction-image.is-active .graph-02 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.supply-chain .reporting-reduction-image.is-active .graph-03 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.supply-chain .reporting-reduction-image.is-active .graph-04 {
    opacity: 1;
    transform: translate(0, 0px); }
  main.supply-chain .reporting-reduction-image .graph-01 {
    width: 22.25490196%;
    position: absolute;
    right: 23.1372549%;
    bottom: 7.92951542%;
    filter: drop-shadow(14px 14px 12px rgba(149, 170, 210, 0.5));
    will-change: filter;
    z-index: +1;
    opacity: 0;
    transform: translate(0, 20px);
    transition: opacity .6s, transform .6s;
    transition-delay: 2.1s; }
  main.supply-chain .reporting-reduction-image .graph-02 {
    width: 27.15686275%;
    position: absolute;
    top: 14.53744493%;
    right: 0;
    filter: drop-shadow(14px 14px 12px rgba(149, 170, 210, 0.5));
    will-change: filter;
    opacity: 0;
    transform: translate(0, 20px);
    transition: opacity .6s, transform .6s;
    transition-delay: 1.2s; }
  main.supply-chain .reporting-reduction-image .graph-03 {
    width: 10.88235294%;
    position: absolute;
    top: 5.50660793%;
    right: 29.50980392%;
    filter: drop-shadow(14px 14px 12px rgba(149, 170, 210, 0.5));
    will-change: filter;
    opacity: 0;
    transform: translate(0, 20px);
    transition: opacity .6s, transform .6s;
    transition-delay: 1.5s; }
  main.supply-chain .reporting-reduction-image .graph-04 {
    width: 10.88235294%;
    position: absolute;
    bottom: 0;
    right: 9.11764706%;
    filter: drop-shadow(14px 14px 12px rgba(149, 170, 210, 0.5));
    will-change: filter;
    opacity: 0;
    transform: translate(0, 20px);
    transition: opacity .6s, transform .6s;
    transition-delay: 1.8s; }
  main.supply-chain .reporting-reduction-image .reduce-image {
    width: 56.76470588%;
    position: absolute;
    top: 10.79295154%;
    left: 0; }
    main.supply-chain .reporting-reduction-image .reduce-image.is-active .reduce-image__graph {
      opacity: 1;
      transform: translate(0, 0px); }
      main.supply-chain .reporting-reduction-image .reduce-image.is-active .reduce-image__graph .bg {
        opacity: 1; }
      main.supply-chain .reporting-reduction-image .reduce-image.is-active .reduce-image__graph svg .mask {
        stroke-dashoffset: 0; }
    main.supply-chain .reporting-reduction-image .reduce-image.is-active .reduce-image__popup {
      opacity: 1;
      transform: translate(0, 0px); }
    main.supply-chain .reporting-reduction-image .reduce-image.is-active .reduce-image__comment {
      opacity: 1;
      transform: translate(0, 0px); }
    main.supply-chain .reporting-reduction-image .reduce-image__graph {
      filter: drop-shadow(13.78px 13.78px 23.63px rgba(149, 170, 210, 0.5));
      will-change: filter;
      opacity: 0;
      transform: translate(0, 20px);
      transition: transform .6s, opacity .6s; }
      main.supply-chain .reporting-reduction-image .reduce-image__graph .bg {
        width: 84.62867012%;
        position: absolute;
        top: 48.63221884%;
        left: 9.1537133%;
        opacity: 0;
        transition: opacity .6s;
        transition-delay: 1.2s;
        mix-blend-mode: multiply;
        will-change: filter; }
      main.supply-chain .reporting-reduction-image .reduce-image__graph .lineWrap {
        position: absolute;
        left: 9.1537133%; }
      main.supply-chain .reporting-reduction-image .reduce-image__graph .line-01 {
        width: 84.62867012%;
        top: 31.91489362%; }
      main.supply-chain .reporting-reduction-image .reduce-image__graph .line-02 {
        width: 84.62867012%;
        top: 48.93617021%; }
      main.supply-chain .reporting-reduction-image .reduce-image__graph .line-03 {
        width: 84.62867012%;
        top: 48.63221884%; }
      main.supply-chain .reporting-reduction-image .reduce-image__graph svg {
        display: block;
        width: 100%; }
        main.supply-chain .reporting-reduction-image .reduce-image__graph svg .mask {
          stroke-dasharray: 500;
          stroke-dashoffset: 500;
          transition: stroke-dashoffset 1.2s, stroke-dasharray 1.2s;
          -webkit-transition: stroke-dashoffset 1.2s, stroke-dasharray 1.2s;
          will-change: stroke-dashoffset;
          transition-delay: 0s; }
    main.supply-chain .reporting-reduction-image .reduce-image__popup {
      position: absolute;
      display: block;
      width: 23.1433506%;
      top: -14.89361702%;
      left: 21.07081174%;
      filter: drop-shadow(0px 5.89px 11.79px rgba(0, 0, 0, 0.25));
      opacity: 0;
      transform: translate(0, 20px);
      transition: transform 0.6s, opacity 0.6s;
      transition-delay: 1.8s; }
    main.supply-chain .reporting-reduction-image .reduce-image__comment {
      filter: drop-shadow(0 6.29px 6.29px rgba(0, 0, 0, 0.25));
      will-change: filter;
      display: inline-block;
      position: absolute;
      opacity: 0;
      transform: translate(0, 20px);
      transition: transform .6s, opacity .6s; }
    main.supply-chain .reporting-reduction-image .reduce-image .comment-01 {
      width: 20.37996546%;
      top: 46.50455927%;
      left: 30.22452504%;
      transition-delay: 1.2s; }
    main.supply-chain .reporting-reduction-image .reduce-image .comment-02 {
      width: 15.19861831%;
      top: 28.2674772%;
      left: 51.29533679%;
      transition-delay: 1.4s; }
    main.supply-chain .reporting-reduction-image .reduce-image .comment-03 {
      width: 16.58031088%;
      top: 58.05471125%;
      right: 15.37132988%;
      transition-delay: 1.6s; }

main.tcfd .mt160 {
  margin-top: 160px; }
  @media only screen and (max-width: 1440px) {
    main.tcfd .mt160 {
      margin-top: 11.11111111vw; } }
  @media only screen and (max-width: 767px) {
    main.tcfd .mt160 {
      margin-top: 80px; } }

main.tcfd .c-main-visual__top__text {
  width: 48%;
  z-index: +1; }
  @media only screen and (max-width: 767px) {
    main.tcfd .c-main-visual__top__text {
      width: 100%; } }

main.tcfd .c-main-visual__top__image {
  width: 50.9623431%;
  position: relative;
  margin-top: -40px;
  margin-right: -3.7%; }
  @media only screen and (max-width: 1440px) {
    main.tcfd .c-main-visual__top__image {
      margin-top: -2.77777778vw;
      margin-right: -3.7%; } }
  @media only screen and (max-width: 767px) {
    main.tcfd .c-main-visual__top__image {
      margin-top: 36px;
      width: 100%;
      margin-right: 0; } }
  main.tcfd .c-main-visual__top__image .main-image {
    padding-top: 66.99507389%;
    position: relative; }
    main.tcfd .c-main-visual__top__image .main-image.is-active .circle span:before {
      width: 100%;
      height: 100%; }
    main.tcfd .c-main-visual__top__image .main-image.is-active .line span:before {
      width: 100%;
      opacity: 1; }
    main.tcfd .c-main-visual__top__image .main-image.is-active .line span:after {
      opacity: 1; }
    main.tcfd .c-main-visual__top__image .main-image.is-active .text {
      opacity: 1; }
    main.tcfd .c-main-visual__top__image .main-image.is-active .image-01 {
      opacity: 1; }
    main.tcfd .c-main-visual__top__image .main-image .circle {
      width: 57.79967159%;
      height: 86.2745098%;
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0, -50%); }
      main.tcfd .c-main-visual__top__image .main-image .circle span {
        position: absolute;
        left: 50%;
        bottom: 0%;
        transform: translate(-50%, 0);
        border-radius: 50%;
        width: 100%;
        height: 100%; }
        main.tcfd .c-main-visual__top__image .main-image .circle span:before {
          content: "";
          width: 0%;
          height: 0%;
          display: block;
          position: absolute;
          border-radius: 50%;
          left: 50%;
          bottom: 0%;
          transform: translate(-50%, 0);
          background: linear-gradient(to right, #0077F5, #1660AF);
          transition: width 0.8s, height 0.8s;
          transition-delay: 1.2s; }
        main.tcfd .c-main-visual__top__image .main-image .circle span:nth-of-type(2) {
          width: 78.40909091%;
          height: 78.40909091%; }
          main.tcfd .c-main-visual__top__image .main-image .circle span:nth-of-type(2):before {
            transition: width 0.7s, height 0.7s;
            transition-delay: 0.8s;
            background: linear-gradient(to right, #67B0FF, #2890FF); }
        main.tcfd .c-main-visual__top__image .main-image .circle span:nth-of-type(3) {
          width: 60.79545455%;
          height: 60.79545455%; }
          main.tcfd .c-main-visual__top__image .main-image .circle span:nth-of-type(3):before {
            transition: width 0.6s, height 0.6s;
            transition-delay: 0.4s;
            background: linear-gradient(to right, #B4D8FF, #58A5F8); }
        main.tcfd .c-main-visual__top__image .main-image .circle span:nth-of-type(4) {
          width: 41.47727273%;
          height: 41.47727273%; }
          main.tcfd .c-main-visual__top__image .main-image .circle span:nth-of-type(4):before {
            transition: width 0.5s, height 0.5s;
            background: linear-gradient(to right, #D6EAFF, #B4D4F6); }
    main.tcfd .c-main-visual__top__image .main-image .line span {
      height: 0.26954178%;
      display: block;
      position: absolute;
      z-index: +1; }
      main.tcfd .c-main-visual__top__image .main-image .line span:before {
        content: "";
        width: 0%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        transition: width .5s, opacity .5s;
        transition-delay: 1.6s;
        opacity: 0; }
      main.tcfd .c-main-visual__top__image .main-image .line span:after {
        content: "";
        width: 5px;
        height: 5px;
        display: block;
        border-radius: 50%;
        position: absolute;
        top: -2px;
        right: -2px;
        transition: opacity .5s;
        opacity: 0;
        transition-delay: 1.6s; }
        @media only screen and (max-width: 767px) {
          main.tcfd .c-main-visual__top__image .main-image .line span:after {
            width: 1vw;
            height: 1vw;
            top: -0.4vw;
            right: -0.4vw; } }
      main.tcfd .c-main-visual__top__image .main-image .line span:nth-of-type(1) {
        width: 8.8%;
        transform: rotate(-35deg);
        transform-origin: top left;
        top: 22.6%;
        left: 50.6%; }
        main.tcfd .c-main-visual__top__image .main-image .line span:nth-of-type(1):before {
          background: #0F59A7; }
        main.tcfd .c-main-visual__top__image .main-image .line span:nth-of-type(1):after {
          background: #0F59A7; }
      main.tcfd .c-main-visual__top__image .main-image .line span:nth-of-type(2) {
        width: 10.6%;
        transform: rotate(-18deg);
        transform-origin: top left;
        left: 57.4%;
        top: 45.2%; }
        main.tcfd .c-main-visual__top__image .main-image .line span:nth-of-type(2):before {
          background: #0F74EE; }
        main.tcfd .c-main-visual__top__image .main-image .line span:nth-of-type(2):after {
          background: #0F74EE; }
      main.tcfd .c-main-visual__top__image .main-image .line span:nth-of-type(3) {
        width: 10.6%;
        transform: rotate(10deg);
        transform-origin: top left;
        left: 56.8%;
        bottom: 39.70588235%; }
        main.tcfd .c-main-visual__top__image .main-image .line span:nth-of-type(3):before {
          background: #2890FF; }
        main.tcfd .c-main-visual__top__image .main-image .line span:nth-of-type(3):after {
          background: #2890FF; }
      main.tcfd .c-main-visual__top__image .main-image .line span:nth-of-type(4) {
        width: 8.5%;
        transform: rotate(40deg);
        transform-origin: top left;
        left: 51.6%;
        bottom: 23%; }
        main.tcfd .c-main-visual__top__image .main-image .line span:nth-of-type(4):before {
          background: #668EBB; }
        main.tcfd .c-main-visual__top__image .main-image .line span:nth-of-type(4):after {
          background: #668EBB; }
    main.tcfd .c-main-visual__top__image .main-image .text {
      position: absolute;
      width: 17.89819376%;
      left: 20.03284072%;
      top: 49%;
      transform: translate(0, -50%);
      opacity: 0;
      transition: opacity .5s;
      transition-delay: 1.6s; }
    main.tcfd .c-main-visual__top__image .main-image .image-01 {
      width: 43.84236453%;
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0;
      transition: opacity .5s;
      transition-delay: 1.6s; }

main.tcfd .c-main-visual__col3 {
  margin-top: 46px; }

main.tcfd .c-whole {
  padding-top: 160px; }
  @media only screen and (max-width: 1440px) {
    main.tcfd .c-whole {
      padding-top: 11.11111111vw; } }
  @media only screen and (max-width: 767px) {
    main.tcfd .c-whole {
      padding-top: 44px; } }

main.tcfd .what-is-image {
  position: relative;
  padding-top: 67.4904943%; }
  main.tcfd .what-is-image.is-active > div {
    opacity: 1;
    transform: translate(0, 0); }
  main.tcfd .what-is-image > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #1CA9D0;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 7px;
    filter: drop-shadow(4px 9px 17px #95bcde);
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px); }
    main.tcfd .what-is-image > div img {
      display: block;
      width: 71.48288973%; }

main.tcfd .assess-climate-risks-image {
  position: relative;
  padding-top: 89.95215311%; }
  main.tcfd .assess-climate-risks-image.is-active .image-01 {
    opacity: 1;
    transform: translate(0, 0); }
  main.tcfd .assess-climate-risks-image.is-active .image-02 {
    opacity: 1;
    transform: translate(0, 0); }
  main.tcfd .assess-climate-risks-image .image-01 {
    position: absolute;
    width: 86.28389155%;
    bottom: 0;
    left: 0;
    filter: drop-shadow(13px 13px 11px rgba(149, 170, 210, 0.5));
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px); }
  main.tcfd .assess-climate-risks-image .image-02 {
    position: absolute;
    width: 32.85486443%;
    top: 0;
    right: 0;
    filter: drop-shadow(13px 13px 11px rgba(149, 170, 210, 0.5));
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .6s; }

main.tcfd .define-climate-image {
  position: relative;
  padding-top: 63.32767402%; }
  main.tcfd .define-climate-image.is-active .image-01 {
    opacity: 1;
    transform: translate(0, 0); }
  main.tcfd .define-climate-image.is-active .image-02 {
    opacity: 1;
    transform: translate(0, 0); }
  main.tcfd .define-climate-image.is-active .image-03 {
    opacity: 1;
    transform: translate(0, 0); }
  main.tcfd .define-climate-image .image-01 {
    width: 94.05772496%;
    position: absolute;
    left: 0;
    bottom: 0;
    filter: drop-shadow(13px 13px 11px rgba(149, 170, 210, 0.5));
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px); }
  main.tcfd .define-climate-image .image-02 {
    width: 38.70967742%;
    position: absolute;
    top: 0;
    right: 11.54499151%;
    filter: drop-shadow(13px 13px 11px rgba(149, 170, 210, 0.5));
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: .6s; }
  main.tcfd .define-climate-image .image-03 {
    width: 30.05093379%;
    position: absolute;
    top: 24.12868633%;
    right: 0;
    filter: drop-shadow(13px 13px 11px rgba(149, 170, 210, 0.5));
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px);
    transition-delay: 1.2s; }

main.tcfd .evaluate-business-impact-image {
  position: relative;
  max-width: 940px;
  margin: 0 auto; }
  main.tcfd .evaluate-business-impact-image.is-active .image-01 {
    opacity: 1;
    transform: translate(0, 0); }
  main.tcfd .evaluate-business-impact-image .image-01 {
    width: 100%;
    filter: drop-shadow(13px 13px 11px rgba(149, 170, 210, 0.5));
    will-change: filter;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px); }

main.tcfd .develop-strategies-image {
  position: relative;
  padding-top: 88.96434635%; }
  main.tcfd .develop-strategies-image.is-active .image-01 {
    opacity: 1;
    transform: translate(0, 0); }
  main.tcfd .develop-strategies-image .image-01 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .6s, transform .6s;
    opacity: 0;
    transform: translate(0, 20px); }

.l-footer .l-footer__nav-sub-list {
  margin: 8px 0 0;
  padding: 0 0 0 16px;
  list-style: none;
}
.l-footer .l-footer__nav-text--sub {
  margin-top: 6px;
}
.l-footer .l-footer__logo img {
  max-width: 300px;
}
@media screen and (max-width: 767.98px) {
  .l-footer .l-footer__certifications {
    gap: 10px;
    margin-top: 36px;
  }
  .l-footer .l-footer__certification {
    width: calc(50% - 5px);
    max-width: 124px;
    min-height: 84px;
  }
  .l-footer .l-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 1.875rem;
  }
}

.l-footer .l-footer__certifications {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
}
.l-footer .l-footer__certification {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 124px;
  min-height: 92px;
  padding: 0;
}
.l-footer .l-footer__certification img {
  display: block;
  width: 100%;
  height: auto;
}

.l-content.l-content--blog + .l-footer {
  padding-bottom: 5rem;
}
.l-content--blog .p-blog-float {
  position: static;
  z-index: 1;
  width: 100%;
  max-width: 68.75rem;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  justify-content: center;
}
.l-content--blog .p-blog-float .p-blog-float__button {
  color: #182d55;
  border-color: #d7dbe3;
  background-color: #fff;
}
.l-content--blog .p-blog-float .p-blog-float__button-link {
  min-width: 240px;
}
.l-content--blog .p-blog-float__share {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  border: 1px solid #ededee;
  border-radius: 0.5rem;
  box-shadow: none;
  transition: none;
  display: none;
}
.l-content--blog .p-blog-float__share.-is-active {
  transform: none;
  display: flex;
  margin-top: 16px;
}
@media screen and (max-width: 767.98px) {
  .l-content.l-content--blog + .l-footer {
    padding-bottom: 7.125rem;
  }
  .l-content--blog .p-blog-float {
    padding: 0;
  }
  .l-content--blog .p-blog-float .p-blog-float__button-link {
    min-width: 100%;
    width: 100%;
  }
  .l-content--blog .p-blog-float__share {
    max-width: none;
  }
}

@media screen and (min-width: 1186px) {
  .p-home-kv .p-home-kv__data {
    max-width: 86rem;
  }
  .p-home-kv .p-home-kv__data-wrap {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    width: 100%;
  }
  .p-home-kv .p-home-kv__data-item {
    flex: 0 1 auto;
    min-width: 0;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .p-home-kv .p-home-kv__data-text-num {
    font-size: clamp(3rem, 4.2vw, 3.75rem);
  }
  .p-home-kv .p-home-kv__data-text-alpha {
    font-size: clamp(2.5rem, 3.6vw, 3.125rem);
  }
  .p-home-kv .p-home-kv__data-text-percent,
  .p-home-kv .p-home-kv__data-text-plus {
    font-size: clamp(2.25rem, 3.2vw, 2.75rem);
  }
  .p-home-kv .p-home-kv__data-icon {
    flex: 0 0 4.75rem;
    padding-right: 0;
    padding-left: 0;
  }
  .p-home-kv .p-home-kv__data-icon-image {
    width: 4.75rem;
  }
}

@media screen and (min-width: 1186px) and (max-width: 1300px) {
  .p-home-kv .p-home-kv__data {
    max-width: 78rem;
  }
  .p-home-kv .p-home-kv__data-item {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
  .p-home-kv .p-home-kv__data-text-bottom {
    font-size: 0.8125rem;
  }
  .p-home-kv .p-home-kv__data-icon {
    flex-basis: 4rem;
  }
  .p-home-kv .p-home-kv__data-icon-image {
    width: 4rem;
  }
}

@media screen and (min-width: 768px) {
  .l-footer .l-footer__inner {
    display: flex;
  }
  .l-footer .l-footer__nav-item + .l-footer__nav-item {
    margin-left: 0;
  }
  .l-footer .l-footer__nav-item {
    width: 10rem;
  }
}

@media screen and (max-width: 960px) {
  .l-footer .l-footer__inner {
    display: flex;
    flex-direction: column;
  }
  .l-footer .l-footer__nav {
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 1.875rem;
  }
}