@charset "utf-8";
/* CSS Document */


.section_AirportsByTheNumbers {
  background-color: #00146e;
  position: relative;
  @media screen and (max-width: 767px) {
    padding-bottom: 50px;
	.hide-sp {display: none;}
  }

  @media screen and (min-width: 768px) {
    min-height: 1080px;
  }
	
  .notice_picture {
    color: #ff4272;
    font-weight: 600;
    font-size: 1.4rem;
    padding: .5em 1em;

    position: absolute;
    width: fit-content;
    height: fit-content;
    bottom: 0;
    right: 0;
    background-color: #fff;
    display: none;

    @media screen and (min-width: 768px) {
      font-size: 1.6rem;
      display: block;
    }
  }

  .section-inner {
    position: relative;
  }
  
  .section-ttl {
    text-align: left;
    .section-ttl__en {
      color: #00aff0;
    }
    .section-ttl__jp {
      color: #fff;
    }
    @media screen and (min-width: 768px) {
      margin-bottom: 40px;
    }
  }

  .text {
    color: #fff;
    .mt1em {margin-top: 1em;}
  }



  .information_wrapper {
    @media screen and (max-width: 767px) {
      width: calc(670% / 7.50);
      margin-left: auto;
      margin-right: auto;
      
      .information {
        margin-top: 20px;
        &:nth-of-type(1){margin-top: 0;}


        &.is-open {
          .is_drawer_contents {
            grid-template-rows: 1fr; /* 中身の高さまで自動伸長 */
          }

          .is_header .information_drawer_btn span:nth-of-type(2) {
            transform: rotate(0deg); 
          }
        }
      }
    }

    @media screen and (min-width: 768px) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 20, 110, 0.8);
      z-index: 100;

      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      transition: opacity 0.4s ease, visibility 0.4s ease;

      &.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
    }
    .information {
      .NahaAirport {}
      /*NahaAirport */

      background-color: #fff;
      padding: 24px;


      @media screen and (min-width: 768px) {
        padding: 40px;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        z-index: 10;

        width: 710px;

        &.is-active {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
        }
      }
    }
    /* information */

    .is_header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding-bottom: 25px;
      border-bottom: 1px solid #00146e;

      .is_left {
        .area {
          color: #00aff0;
          font-size: 15px;
          font-weight: bold;
          margin-bottom: 0.5em;
        }
        .airport {
          font-size: 24px;
          font-weight: bold;
          color: #00146e;

        }

      }
      .information_drawer_btn {
        aspect-ratio: 1;
        width: 39px;
        height: 39px;
        background-color: #00146e;

        position: relative;

        span {
          position: absolute;
          width: 15px;
          height: 2px;
          background-color: #fff;

          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;

          transform: rotate(0deg);
          transition: all .8s cubic-bezier(0.16, 1, 0.3, 1);

          &:nth-of-type(1) {}
          &:nth-of-type(2) {
            transform: rotate(90deg);
          }
        }

        @media screen and (min-width: 768px) {
          position: absolute;
          top: 0;
          right: 0;

          cursor: pointer;

          span {
            &:nth-of-type(1){transform: rotate(45deg);}
            &:nth-of-type(2){transform: rotate(135deg);}
          }
        }
      }
    }
  }
  /* information_wrapper */

  .is_drawer_contents {
    color: #00146e;
    

    .airport_information_list {

      li {
        margin-top: 20px;
      }
      .line_header {
        font-size: 15px;
        font-weight: bold;
        line-height: 1.5;
        
        position: relative;
        
        @media screen and (min-width: 768px) {
          font-size: 20px;
        }
        
        &:after {
          content: "";
          position: absolute;
          left: 0;
          /* 1行目の上下中央に配置（上から 50% = 1行目の中心） */
          top: calc(1.5em / 2); 
          transform: translateY(-50%);
          
          width: 100%;
          height: 5px; /* ドットが収まる最小限の高さ */

          /* 背景ドットの設定 */
          background-image: radial-gradient(circle, #00146e 2px, transparent 2.5px);
          background-size: 15px 100%;
          background-repeat: repeat-x;
          background-position: left center;
        }

        &.icon_01,
        &.icon_02,
        &.icon_03,
        &.icon_04,
        &.icon_05 {
          span:nth-of-type(2) {text-indent: 2em;}
          span:nth-of-type(1) {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            grid-column-gap: .5em;
            
            &:before {
              content: "";
            }
          }
        }
        &.icon_01 span:before {
          width: 15px;
          height: 15px;
          background: url(../img/top/data_icon_human.svg) center center/contain no-repeat;
        }
        &.icon_02 span:before {
          width: 15px;
          height: 11px;
          background: url(../img/top/data_icon_to.svg) center center/contain no-repeat;
        }
        &.icon_03 span:before {
          width: 15px;
          height: 12.5px;
          background: url(../img/top/data_icon_plane.svg) center center/contain no-repeat;
        }
        &.icon_04 span:before {
          width: 10px;
          height: 15px;
          background: url(../img/top/data_icon_trunk.svg) center center/contain no-repeat;
        }
        &.icon_05 span:before {
          width: 14px;
          height: 15px;
          background: url(../img/top/data_icon_787.svg) center center/contain no-repeat;
        }

        span {
          position: relative; /* ::before より上に表示するため */
          z-index: 1;
          padding-right: 0.5em;
          display: block;
          width: fit-content;
          background-color: #fff;
        }
      }

      .subheader {
        line-height: 1;
        font-size: 10px;
      }


      .line_sentence {
        display: flex;
        align-items: baseline;
        justify-content: flex-end;

        font-size: 26px;
        font-weight: bold;
        margin-top: 0.25em;
        @media screen and (min-width: 768px) {
          font-size: 40px;
        }
      }

      .ml1em {margin-left: 1em;}
      
      .line_sentence_double dl {
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        grid-column-gap: 1em;

        dt {
          font-size: 12px;
          font-weight: bold;
        }

        dd {
          display: flex;
          align-items: baseline;
          justify-content: flex-end;

          font-size: 26px;
          font-weight: bold;
          @media screen and (min-width: 768px) {
            font-size: 40px;
          }
        }
      }

      .qty {
        font-size: 11.5px;
        font-weight: bold;
        @media screen and (min-width: 768px) {
          font-size: 18px;
        }
      }
    }

    @media screen and (max-width: 767px) {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.4s ease;
      
      > * {
        overflow: hidden;
      }
    }
  }



  /* Airport animation */
  .airport_animation {
    position: relative;


    margin-top: 45px;
    @media screen and (min-width: 768px) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      margin-top: 100px;
    }

    picture {
      display: block;
    }

    .airportname {
      color: #00aff0;
      font-weight: bold;
      font-size: 24px;

      position: absolute;
      @media screen and (min-width: 768px) {
        cursor: pointer;
      }
      

      &.naha {
        top: -1%;
        right: .5%;
        @media screen and (min-width: 768px) {
          top: 47.3%;
          right: 3.3%;
          .airport_ja {line-height: 1.1;}
        }
      }

      &.miyako {
        top: 15.7%;
        left: 11%;
        @media screen and (min-width: 768px) {
          width: fit-content;
          left: unset;
          top: 76.2%;
          right: 16%;

          .airport_ja {line-height: 1.1;}
        }
      }
      
      &.ishigaki {

        @media screen and (min-width: 768px) {
          width: fit-content;
          top: 58%;
          left: 9.5%;
          line-height: 1.1;
        }
        @media screen and (max-width: 767px) {
          top: unset;
          bottom: 4.5%;
          left: 0;
        }
      }

      @media screen and (min-width: 768px) {
        font-size: 30px;
      }

      .airport_en {
        line-height: 1;
        @media screen and (min-width: 768px) {
          line-height: 1.25;
          font-size: 32px;
        }
      }

      .airport_ja {
        font-size: 15px;
        @media screen and (min-width: 768px) {
          font-size: 20px;
        }
        @media screen and (max-width: 767px) {margin-top: 0.5em;}
      }

      .md-text-right {
        @media screen and (min-width: 768px) {
          text-align: right;
        }
      }
    }


    .is_time {
      display: flex;
      align-items: baseline;
      justify-content: flex-start;

      font-size: 30px;
      font-weight: bold;
      line-height: 1;
      color: #00aff0;
      position: absolute;

      @media screen and (min-width: 768px) {
        /* font-size: 80px; */
        font-size: 92px;
      }

      .min {
        font-size: 10px;
        font-weight: bold;
        margin-left: 4px;
        @media screen and (min-width: 768px) {
          font-size: 27px;
          margin-left: 12px;
        }
      }

      &:before {
        content: "";
        width: 32.5px;
        height: 27.5px;
        display: block;
        background: url(../img/top/airport_plane.svg) center center/contain no-repeat;
        margin-right: 5px; 

        @media screen and (min-width: 768px) {
          width: 65px;
          height: 54px;
          margin-right: 15px;
        }
      }


      &.naha-ishigaki {
        top: 29%;
        left: 22%;
        @media screen and (min-width: 768px) {
          top: 38.2%;
          left: 21.8%;
        }   
      }

      &.naha-miyako {
        left: 58%;
        top: 50%;
        @media screen and (min-width: 768px) {
          top: 60.4%;
          left: 58%;
        }   
      }
      &.miyako-ishigaki {
        top: 64%;
        left: 31%;
        @media screen and (min-width: 768px) {
          top: 77%;
          left: 36.8%;
        }   
      }

    }
    /* is time */

    &.scrollIn {
      .is_time {
        transform: translateX(-75vw);
        opacity: 0;
        transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1);

        > span:not(.min) {
          display: inline-block; /* translateY を有効化 */
          opacity: 0;
          transform: translateY(-80px);
        }
      }

      .airportname {
        opacity: 0;
        transition: opacity 0.4s ease;
      }
    }

    &.scrollIn.is-active {
      .airportname {
        opacity: 1;

        &.naha { transition-delay: 0s; }
        &.miyako { transition-delay: 0.125s; }
        &.ishigaki { transition-delay: 0.25s; }
      }

      .is_time {
        transform: translateX(0);
        opacity: 1;

        &.naha-ishigaki {
          transition-delay: 0.125s;
        }

        &.naha-miyako {
          transition-delay: 0.25s;
        }

        &.miyako-ishigaki {
          transition-delay: 0.375s;
        }
      }
    }
  }
  /* airport_animation */

}

@keyframes easeOutElasticFromTop {
  0% {
    transform: translateY(-80px);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* easeInQuad */
  }
  
  /* 2. 着地 ➔ 減速しながら跳ね上がる */
  12% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutQuad */
  }
  
  /* 3. 跳ね上がりの頂点 ➔ 再び急落下 */
  24% {
    transform: translateY(-30px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  
  /* 4. 着地 ➔ 小さく跳ね上がる */
  36% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  /* 5. 頂点 ➔ 落下 */
  54% {
    transform: translateY(-7.5px);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  
  /* 6. 着地 ➔ 微小な跳ね上がり */
  74% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  90% {
    transform: translateY(-1.8px);
  }
  
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.esg-item-box {
  @media screen and (min-width: 768px) {
    margin-top: 0;
  }
}