@keyframes fadeEffect {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

@keyframes img-wrap {
  100% {
    transform: translateX(-100%);
  }
}

@keyframes fadeInArc01 {
  0% {
    opacity: 0;
    scale: 0;
    transform: rotate(0deg) translateX(400px) rotate(0deg);
  }
  100% {
    opacity: 1;
    scale: 1;
    transform: rotate(180deg) translateX(0) rotate(-180deg);
  }
}

@keyframes fadeInArc02 {
  0% {
    opacity: 0;
    scale: 0;
    transform: rotate(0deg) translateX(-100px) rotate(0deg);
  }
  100% {
    opacity: 1;
    scale: 1;
    transform: rotate(180deg) translateX(-50%) rotate(-180deg);
  }
}

@keyframes fadeInArc03 {
  0% {
    opacity: 0;
    scale: 0;
    transform: rotate(0deg) translateY(-400px) rotate(0deg);
  }
  100% {
    opacity: 1;
    scale: 1;
    transform: rotate(180deg) translateY(0) rotate(-180deg);
  }
}

/*======================
 * トップページ
 =======================*/
.top {
  /*===== ファーストビューセクション =====*/
  .first-view-section {
    background-color: #f6f6f6;
    height: calc(100vh - 160px);
    position: relative;

    @media screen and (max-width: 1024px) {
      height: auto;
      margin-bottom: 100px;
    }
    @media screen and (max-height: 830px) {
      height: auto;
    }

    /*=== スライドショー ===*/
    .swiper-container {
      max-width: 1150px;
      width: 100%;
      height: 85%;
      padding: 50px 10px;
      position: relative;
      z-index: 2;
      margin: 0 auto;
    }
    .swiper-slide {
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      border: 2px solid #444444;
      overflow: hidden;
      height: 100%;
      min-height: 300px;
    }
    .swiper-slide .img-area {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .swiper-slide .img-area img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* 前・次ボタン */
    .swiper-button-next,
    .swiper-button-prev {
      color: #fff;
      background-color: orange;
      border: 2px solid #444444;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      transition: opacity 0.1s ease-out;
    }
    .swiper-button-prev:active,
    .swiper-button-next:active {
      transform: scale(0.9);
    }
    .swiper-button-fade {
      animation: fadeEffect 0.2s ease-out;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
      font-size: 24px;
    }
    .swiper-button-prev {
      left: 23.5%;
    }
    .swiper-button-next {
      right: 23.5%;
    }
    /* ページネーション */
    .swiper-pagination-bullet-active {
      background-color: #ff9800;
      box-shadow: 0px 0px 2px 2px rgba(243, 151, 35, 0.76);
    }

    @media screen and (max-width: 480px) {
      .swiper-container {
        height: 360px;
        padding: 30px 10px;
      }
    }
    @media screen and (max-width: 1024px) {
      .swiper-container {
        height: auto;
      }
      .swiper-button-prev,
      .swiper-button-next {
        display: none;
      }
    }
    @media screen and (min-width: 1480px) {
      .swiper-container {
        height: 75%;
        max-width: 1400px;
      }
      .swiper-button-prev {
        left: 24%;
      }
      .swiper-button-next {
        right: 24%;
      }

      @media screen and (max-height: 830px) {
        .swiper-container {
          height: auto !important;
        }
      }

    }

    @media screen and (max-height: 830px) {
      .swiper-container {
        height: auto !important;
      }
    }

    /*=== リンクボタン ===*/
    .link {
      display: flex;
      height: 15%;
      max-width: 1000px;
      margin: 0 auto;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    .link .link-button {
      display: flex;
      position: relative;
      overflow: hidden;
      background-color: #000;
      border: 3px solid #000;
      border-radius: 5px;
      height: 50px;
      width: 230px;
      box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.5), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
      z-index: 2;
    }
    /* アニメーション用設定 */
    .link .link-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 100%;
      transition: width 0.3s ease-out;
      z-index: 0;
    }
    .link .link-button.listen::before {
      background-color: #5eb337;
    }
    .link .link-button.program::before {
      background-color: #0db3d9;
    }
    .link .link-button.message::before {
      background-color: #f24c3d;
    }
    .link .link-button.present::before {
      background-color: #dc3ad4;
    }
    .link .link-button:hover::before {
      width: 100%;
    }
    .link .link-button .icon-area,
    .link .link-button .text-area {
      position: relative;
      z-index: 2;
    }
    /* アイコンエリア */
    .link .link-button .icon-area {
      width: 50px;
      text-align: center;
      border-radius: 2px 0 0 2px;
    }
    .link .link-button.listen .icon-area {
      background-color: #5eb337;
    }
    .link .link-button.program .icon-area {
      background-color: #0db3d9;
    }
    .link .link-button.message .icon-area {
      background-color: #f24c3d;
    }
    .link .link-button.present .icon-area {
      background-color: #dc3ad4;
    }
    .link .link-button .icon-area img {
      width: 28px;
      height: 41px;
    }
    /* ボタンテキストエリア */
    .link .link-button .text-area {
      background-color: transparent;
      color: #fff;
      flex: 1;
      text-align: center;
      line-height: 47px;
    }

    @media screen and (max-width: 480px) {
      .link .link-button .text-area {
        font-size: 14px;
      }
    }
    @media screen and (max-width: 1024px) {
      .link {
        flex-wrap: wrap;
        height: auto;
        padding: 0 10px;
      }
      .link .link-button {
        width: 48%;
      }
    }
    @media screen and (min-width: 1480px) {
      .link {
        height: 25%;
      }
    }

    /*=== ボリュームインジケーター ===*/
    .volume-indicator {
      width: 100%;
      position: absolute;
      bottom: 10px;
      display: flex;
      justify-content: space-between;
      z-index: 1;
    }
    .volume-indicator .orange01 {
      background-color: #fec779;
    }
    .volume-indicator .orange02 {
      background-color: #fbd7a3;
    }
    .volume-indicator .orange03 {
      background-color: #fae1be;
    }
    .volume-indicator .orange04 {
      background-color: #f8ecda;
    }
    .volume-indicator .volume-container {
      display: flex;
      align-items: flex-end;
      gap: 5px;
    }
    .volume-indicator .left-side {
      margin-left: 10px;
    }
    .volume-indicator .right-side {
      margin-right: 10px;
    }
    .volume-indicator .left-side .volume,
    .volume-indicator .right-side .volume {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .volume-indicator .left-side .volume span,
    .volume-indicator .right-side .volume span {
      width: 22px;
      height: 12px;
      border-radius: 2px;
    }

    @media screen and (max-width: 480px) {
      .volume-indicator {
        bottom: -120px;
        height: 80px;
      }
      .volume-indicator .left-side .volume span,
      .volume-indicator .right-side .volume span {
        width: 10px;
        height: 5px;
      }
    }
    @media screen and (min-width: 1480px) {
      .volume-indicator .left-side .volume span,
      .volume-indicator .right-side .volume span {
        width: 30px;
        height: 16px;
      }
    }
  }

  /*===== メディアセクション =====*/
  .media-section {
    background-color: #f9ac4e;
    position: relative;
    padding: 30px 10px 110px 10px;

    &::before {
      content: '';
      position: absolute;
      top: var(--link-half-height, -25%);
      left: 0;
      width: 100%;
      height: 300px;
      background-color: #f9ac4e;
      border-radius: 50px;
      z-index: 1;
    }

    .media-section-wrapper {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      margin-bottom: 15px;
    }
    @media screen and (max-width: 1024px) {
      padding-bottom: 60px;

      &::before {
        top: -30px;
        border-radius: 30px;
      }
    }
    @media screen and (max-width: 480px) {
      &::before {
        height: 60px;
      }
    }
    @media screen and (max-height: 830px) {
      padding-bottom: 60px;

      &::before {
        top: -30px;
        border-radius: 30px;
      }
    }

    /*=== 佐賀新聞・お知らせ ===*/
    .news-notice {
      width: calc(100% - 380px);
      z-index: 2;
    }
    /* 表示切り替え */
    .news-notice .tab {
      display: flex;
      border: 2px solid #444444;
      border-radius: 10px;
      margin-bottom: 30px;
      color: #0f0f0f;
      position: relative;
    }
    .news-notice .tab .tab-button {
      flex: 1;
      padding: 18px;
      cursor: pointer;
      font-size: 20px;
      text-align: center;
      background-color: #fcf0d5;
      transition: 0.3s;
      position: relative;
      letter-spacing: 2px;
    }
    .news-notice .tab .tab-button:first-child {
      border-radius: 7px 0 0 7px;
      border-right: 1px solid #444444;
    }
    .news-notice .tab .tab-button:last-child {
      border-radius: 0 7px 7px 0;
      border-left: 1px solid #444444;
    }
    .news-notice .tab .tab-button.active {
      background: #f7d71e;
      font-weight: bold;
    }
    .news-notice .tab .tab-button.active::after {
      content: '';
      position: absolute;
      bottom: -28px;
      left: 50%;
      margin-left: -17px;
      border: 14px solid transparent;
      border-top: 14px solid #444444;
      z-index: 1;
    }
    .news-notice .tab .tab-button.active::before {
      content: '';
      position: absolute;
      bottom: -24px;
      left: 50%;
      margin-left: -15px;
      border: 12px solid transparent;
      border-top: 12px solid #f7d71e;
      z-index: 2;
    }
    /* リストのベース */
    .news-notice .tab-content {
      display: none;
      height: 382px;
      background: white;
      border: 2px solid #161515;
      border-radius: 10px;
    }
    .news-notice .tab-content.active {
      display: block;
    }
    .news-notice .tab-content ul {
      margin: 20px 25px 38px 25px;
      height: 324px;
      overflow-y: auto;
      scrollbar-gutter: stable;
    }
    .news-notice .tab-content .item {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 18px 0;
      border-bottom: 1px solid #8d8d8d;
    }
    .news-notice .tab-content .item .date {
      color: #8d8d8d;
      margin-right: 20px;
    }
    .news-notice .tab-content .item .text {
      color: #0f0f0f;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    /* 佐賀新聞リスト */
    .news-notice .tab-content.newspaper .item a:hover {
      color: #ef8501;
    }
    @media screen and (max-width: 1024px) {
      .news-notice {
        width: 100%;
      }
    }
    @media screen and (max-width: 480px) {
      .news-notice .tab-content .item {
        font-size: 14px;
        flex-direction: column;
        align-items: unset;
        line-height: 16px;
      }
      .news-notice .tab-content .item .date {
        margin-bottom: 10px;
      }
      .news-notice .tab-content .item .text {
        letter-spacing: 0.5px;
        overflow: unset;
        white-space: wrap;
      }
    }

    /*=== Instagram・Facebook ===*/
    .sns {
      width: 350px;
      display: flex;
      flex-direction: column;
      z-index: 2;
    }

    /* Instagram */
    .sns .insta {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
    }
    .sns .insta .icon-logo {
      position: relative;
      width: 60px;
      margin-right: 10px;
    }
    .sns .insta .icon-logo .icon-window {
      width: 50px;
      border: 0.5px solid rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      background-color: #fff;
      overflow: hidden;
    }
    .sns .insta .icon-logo .icon {
      width: 100%;
    }
    .sns .insta .icon-logo .logo {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 20px;
      background-color: #fff;
      border-radius: 6px;
    }
    .sns .insta .follow {
      display: flex;
      align-items: center;
    }
    .sns .insta .follow img {
      width: 120px;
    }
    .sns .insta .follow span {
      margin-right: 5px;
    }
    .sns .insta .follow a {
      font-family: system-ui;
      height: 32px;
      width: fit-content;
      padding: 0 10px;
      border-radius: 8px;
      color: #fff;
      font-weight: bold;
      background-color: #0095f6;
      border: none;
      text-align: center;
      line-height: 30px;
      box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.4);
      transition: transform 0.5s ease-out;
    }
    .sns .insta .follow a:hover {
      animation: jump 1s ease-out infinite;
    }
    /* Facebook */
    .sns .facebook {
      width: 100%;
      border: 1px solid #000;
      border-radius: 2px;
      overflow: hidden;
    }
    @media screen and (max-width: 1024px) {
      .sns {
        margin: 0 auto;
      }
      .sns .insta {
        justify-content: center;
      }
    }

    /*=== ラジオウェーブ ===*/
    .radio-wave {
      width: 100%;
      overflow: hidden;
      position: relative;
    }
    .radio-wave::before {
      animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards infinite;
      background-color: #f9ac4e;
      content: '';
      inset: 0;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }
    .radio-wave img {
      width: 100%;
    }
    @media screen and (max-width: 480px) {
      &::before {
        height: 60px;
      }
    }
  }

  /*===== 番組紹介・パーソナリティセクション =====*/
  .program-section {
    position: relative;
    padding: 10px 10px 80px 10px;
    background-color: #f6f6f6;
    background-image: radial-gradient(
        circle at 100% 150%,
        #f6f6f6 24%,
        white 24%,
        white 28%,
        #f6f6f6 28%,
        #f6f6f6 36%,
        white 36%,
        white 40%,
        transparent 40%,
        transparent
      ),
      radial-gradient(
        circle at 0 150%,
        #f6f6f6 24%,
        white 24%,
        white 28%,
        #f6f6f6 28%,
        #f6f6f6 36%,
        white 36%,
        white 40%,
        transparent 40%,
        transparent
      ),
      radial-gradient(
        circle at 50% 100%,
        white 10%,
        #f6f6f6 10%,
        #f6f6f6 23%,
        white 23%,
        white 30%,
        #f6f6f6 30%,
        #f6f6f6 43%,
        white 43%,
        white 50%,
        #f6f6f6 50%,
        #f6f6f6 63%,
        white 63%,
        white 71%,
        transparent 71%,
        transparent
      ),
      radial-gradient(
        circle at 100% 50%,
        white 5%,
        #f6f6f6 5%,
        #f6f6f6 15%,
        white 15%,
        white 20%,
        #f6f6f6 20%,
        #f6f6f6 29%,
        white 29%,
        white 34%,
        #f6f6f6 34%,
        #f6f6f6 44%,
        white 44%,
        white 49%,
        transparent 49%,
        transparent
      ),
      radial-gradient(
        circle at 0 50%,
        white 5%,
        #f6f6f6 5%,
        #f6f6f6 15%,
        white 15%,
        white 20%,
        #f6f6f6 20%,
        #f6f6f6 29%,
        white 29%,
        white 34%,
        #f6f6f6 34%,
        #f6f6f6 44%,
        white 44%,
        white 49%,
        transparent 49%,
        transparent
      );
    background-size: 100px 50px;

    &::before {
      content: '';
      position: absolute;
      top: var(--link-half-height, -25%);
      left: 0;
      width: 100%;
      height: 300px;
      border-radius: 50px;
      z-index: 0;
      background-color: #f6f6f6;
      background-image: radial-gradient(
          circle at 100% 150%,
          #f6f6f6 24%,
          white 24%,
          white 28%,
          #f6f6f6 28%,
          #f6f6f6 36%,
          white 36%,
          white 40%,
          transparent 40%,
          transparent
        ),
        radial-gradient(
          circle at 0 150%,
          #f6f6f6 24%,
          white 24%,
          white 28%,
          #f6f6f6 28%,
          #f6f6f6 36%,
          white 36%,
          white 40%,
          transparent 40%,
          transparent
        ),
        radial-gradient(
          circle at 50% 100%,
          white 10%,
          #f6f6f6 10%,
          #f6f6f6 23%,
          white 23%,
          white 30%,
          #f6f6f6 30%,
          #f6f6f6 43%,
          white 43%,
          white 50%,
          #f6f6f6 50%,
          #f6f6f6 63%,
          white 63%,
          white 71%,
          transparent 71%,
          transparent
        ),
        radial-gradient(
          circle at 100% 50%,
          white 5%,
          #f6f6f6 5%,
          #f6f6f6 15%,
          white 15%,
          white 20%,
          #f6f6f6 20%,
          #f6f6f6 29%,
          white 29%,
          white 34%,
          #f6f6f6 34%,
          #f6f6f6 44%,
          white 44%,
          white 49%,
          transparent 49%,
          transparent
        ),
        radial-gradient(
          circle at 0 50%,
          white 5%,
          #f6f6f6 5%,
          #f6f6f6 15%,
          white 15%,
          white 20%,
          #f6f6f6 20%,
          #f6f6f6 29%,
          white 29%,
          white 34%,
          #f6f6f6 34%,
          #f6f6f6 44%,
          white 44%,
          white 49%,
          transparent 49%,
          transparent
        );
      background-size: 100px 50px;
    }

    @media screen and (max-width: 1024px) {
      &::before {
        top: -30px;
        border-radius: 30px;
      }
    }
    @media screen and (max-width: 480px) {
      &::before {
        height: 60px;
      }
    }

    /*=== 背景シルエット ===*/
    .bg {
      position: absolute;
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.8s ease, transform 0.8s ease;
      z-index: 1;
    }
    .bg.fade-in {
      opacity: 1;
      transform: translateY(0);
    }
    .bg01 {
      width: 320px;
      top: -80px;
      left: -20px;
    }
    .bg02 {
      width: 250px;
      top: 25%;
      right: 0;
    }
    .bg03 {
      width: 230px;
      top: 50%;
      left: 0;
    }
    .bg04 {
      width: 320px;
      top: 75%;
      right: -10px;
    }
    @media screen and (max-width: 1024px) {
      .bg01 {
        top: -40px;
        width: 250px;
      }
      .bg04 {
        width: 250px;
      }
    }
    @media screen and (max-width: 480px) {
      .bg01 {
        left: -40px;
        width: 150px;
      }
    }

    /*=== タイトル ===*/
    .top-section-title {
      margin-bottom: 60px;
      position: relative;
      z-index: 2;
    }
    .top-section-title .sub {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
    }
    .top-section-title .sub span {
      margin-left: 20px;
      font-size: 20px;
      color: #0db3d9;
    }
    .top-section-title h2 {
      text-align: center;
      font-size: 48px;
    }
    @media screen and (max-width: 480px) {
      .top-section-title {
        margin-bottom: 30px;
      }
      .top-section-title .sub span {
        margin-left: 10px;
        font-size: 14px;
      }
      .top-section-title h2 {
        font-size: 28px;
      }
    }

    /*=== 各番組 ===*/
    .program-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      max-width: 1260px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .card {
      width: 400px;
      height: 490px;
      border: 3px solid #000;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
      background-color: #fff;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    @media (hover: hover) {
      .card:hover {
        transform: scale(1.05);
        z-index: 3;
      }
    }
    .card .img-area {
      width: 100%;
      height: 250px;
      overflow: hidden;
      padding-top: 4%;
    }
    .card .img-area img {
      display: block;
      width: 92%;
      margin: 0 auto;
    }
    .card .program-name {
      font-size: 20px;
      text-align: center;
      font-weight: bold;
      margin-top: 20px;
    }
    .card .overview {
      padding: 20px;
    }
    .card .overview .airdate {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
      font-size: 14px;
    }
    .card .overview .personality {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-bottom: 15px;
      font-size: 14px;
      line-height: 19px;
    }
    .card .overview .discription {
      line-height: 24px;
      letter-spacing: 1px;
    }
    @media screen and (max-width: 1024px) {
      .program-wrapper {
        justify-content: center;
      }
    }
    @media screen and (max-width: 480px) {
      .card {
        width: 100%;
        height: auto;
        min-height: 400px;
      }
    }
  }

  /*===== ラジオ広告セクション =====*/
  .radio-ad-section {
    padding-top: 80px;
    padding-bottom: 120px;
    position: relative;

    @media screen and (max-width: 1024px) {
      padding: 40px 10px 50px 10px;
    }

    /*=== 背景シルエット ===*/
    .bg {
      position: absolute;
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.8s ease, transform 0.8s ease;
      z-index: 1;
    }
    .bg.fade-in {
      opacity: 1;
      transform: translateY(0);
    }
    .bg01 {
      width: 300px;
      top: -150px;
      left: -20px;
    }
    .bg02 {
      width: 150px;
      top: 30%;
      right: 0;
    }
    @media screen and (max-width: 1024px) {
      .bg01 {
        top: -40px;
        width: 120px;
      }
      .bg02 {
        width: 45px;
      }
    }

    /*=== タイトル ===*/
    .top-section-title {
      margin-bottom: 60px;
      position: relative;
      z-index: 2;
    }
    .top-section-title .sub {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
    }
    .top-section-title .sub span {
      margin-left: 20px;
      font-size: 20px;
      color: #5eb337;
    }
    .top-section-title h2 {
      text-align: center;
      font-size: 48px;
    }
    @media screen and (max-width: 480px) {
      .top-section-title {
        margin-bottom: 30px;
      }
      .top-section-title .sub span {
        margin-left: 10px;
        font-size: 14px;
      }
      .top-section-title h2 {
        font-size: 28px;
      }
    }

    /*=== 概要 ===*/
    .overview {
      position: relative;
      max-width: 1100px;
      margin: 0 auto;
      z-index: 2;
    }

    /*=== 説明 ===*/
    .overview .offering {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 40px;
    }
    /* イラスト部分 */
    .overview .offering .radio-illust {
      width: 40%;
      transform: scale(0);
      opacity: 0;
      box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
      transition: transform 0.5s ease-out, opacity 0.5s ease-out;
      transform-origin: center center;
      border-radius: 10px;
      border: 1px solid;
    }
    .overview .offering .radio-illust.visible {
      transform: scale(1);
      opacity: 1;
    }
    /* 説明部分 */
    .overview .offering .text-area {
      width: 55%;
    }
    .overview .offering .text-area h3 {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 40px;
    }
    .overview .offering .text-area p {
      font-size: 16px;
      line-height: 26px;
      letter-spacing: 1px;
      margin-bottom: 30px;
    }
    .overview .offering .link-button a {
      margin-right: auto;
      border-radius: 10px;
      background-color: #000;
      width: fit-content;
      padding: 17px 25px;
      float: right;
      box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.4);
      transition: transform 0.5s ease-out;
    }
    .overview .offering .link-button a span {
      color: #fff;
      margin-right: 10px;
      font-size: 20px;
    }
    .overview .offering .link-button a:hover {
      animation: jump 1s ease-out infinite;
    }
    @media screen and (max-width: 1024px) {
      .overview .offering .radio-illust {
        width: 100%;
        margin-bottom: 30px;
      }
      .overview .offering .text-area {
        width: 100%;
      }
      .overview .offering .text-area h3 {
        font-size: 18px;
        text-align: center;
        margin-bottom: 20px;
      }
      .overview .offering .link-button {
        text-align: center;
      }
      .overview .offering .link-button a {
        padding: 15px 20px;
        float: none;
      }
      .overview .offering .link-button a span {
        font-size: 16px;
      }
    }

    /*=== 料金表 ===*/
    .fee-table {
      overflow-x: auto;
    }
    .fee-table table {
      width: 1100px;
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 10px;
      border: 2px solid #5eb337;
      overflow: hidden;
    }
    .fee-table th,
    td {
      padding: 10px;
      vertical-align: middle;
      border-right: 1px solid #5eb337;
      border-bottom: 1px solid #5eb337;
      text-align: center;
    }
    .fee-table th {
      padding: 15px;
      font-weight: bold;
      background: radial-gradient(rgb(161 207 140) 3px, transparent 4px),
        radial-gradient(rgb(161 207 140) 3px, transparent 4px), linear-gradient(#c8ecb6 4px, transparent 0),
        linear-gradient(
          45deg,
          transparent 44px,
          transparent 45px,
          #c6c5c5 45px,
          #c6c5c5 46px,
          transparent 47px,
          transparent 65px
        ),
        linear-gradient(
          -45deg,
          transparent 44px,
          transparent 45px,
          #c6c5c5 45px,
          #c6c5c5 46px,
          transparent 47px,
          transparent 65px
        ),
        #c8ecb6;
      background-size: 65px 65px, 65px 65px, 100% 6px, 65px 65px, 65px 65px;
      background-position: 32px 32px, 0 0, 0 0, 0 0, 0 0;
    }
    .fee-table td {
      background-color: #fff;
      line-height: 20px;
    }
    .fee-table td li {
      list-style: disc;
      margin-left: 20px;
      margin-bottom: 5px;
      line-height: 22px;
    }
    .fee-table .br-none {
      border-right: none;
    }
    .fee-table .bb-none {
      border-bottom: none;
    }
  }

  /*===== コミュニティビジネスセクション =====*/
  .community-biz-section {
    padding-top: 80px;
    padding-bottom: 120px;
    position: relative;
    /* background-color: #f6f6f6; */
    background: linear-gradient(
        135deg,
        #f6f6f6 21px,
        #d9ecff 22px,
        #d9ecff 24px,
        transparent 24px,
        transparent 67px,
        #d9ecff 67px,
        #d9ecff 69px,
        transparent 69px
      ),
      linear-gradient(
          225deg,
          #f6f6f6 21px,
          #d9ecff 22px,
          #d9ecff 24px,
          transparent 24px,
          transparent 67px,
          #d9ecff 67px,
          #d9ecff 69px,
          transparent 69px
        )
        0 64px;
    background-color: #f6f6f6;
    background-size: 64px 128px;

    @media screen and (max-width: 1024px) {
      padding: 40px 10px 50px 10px;
    }

    /*=== 背景シルエット ===*/
    .bg {
      position: absolute;
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.8s ease, transform 0.8s ease;
      z-index: 1;
    }
    .bg.fade-in {
      opacity: 1;
      transform: translateY(0);
    }
    .bg01 {
      width: 150px;
      left: 0;
      top: -150px;
    }
    @media screen and (max-width: 1024px) {
      .bg01 {
        top: -40px;
        width: 45px;
      }
    }

    /*=== タイトル ===*/
    .top-section-title {
      margin-bottom: 60px;
      position: relative;
      z-index: 2;
    }
    .top-section-title .sub {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
    }
    .top-section-title .sub span {
      margin-left: 20px;
      font-size: 20px;
      color: #0db3d9;
    }
    .top-section-title h2 {
      text-align: center;
      font-size: 48px;
    }
    @media screen and (max-width: 480px) {
      .top-section-title {
        margin-bottom: 30px;
      }
      .top-section-title .sub span {
        margin-left: 10px;
        font-size: 14px;
      }
      .top-section-title h2 {
        font-size: 28px;
      }
    }

    /*=== 概要 ===*/
    .overview {
      position: relative;
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      z-index: 2;
    }

    /*=== イメージエリア ===*/
    .overview .image-area {
      width: 40%;
      max-width: 440px;
      height: 380px;
      position: relative;
    }
    .overview .image-area img {
      width: 100%;
    }
    .overview .image-area .circle {
      position: absolute;
      width: 220px;
      opacity: 0;
    }
    .overview .image-area .info {
      bottom: 0;
      left: 15px;
    }
    .overview .image-area .people {
      top: 0;
    }
    .overview .image-area .thought {
      bottom: 0;
      right: 15px;
    }
    .overview .image-area .info.animate {
      animation: fadeInArc01 0.8s ease-out forwards;
    }
    .overview .image-area .people.animate {
      animation: fadeInArc02 0.8s ease-out forwards;
      animation-delay: 0.3s;
    }
    .overview .image-area .thought.animate {
      animation: fadeInArc03 0.8s ease-out forwards;
      animation-delay: 0.4s;
    }
    @media screen and (max-width: 1024px) {
      .overview .image-area {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 30px;
      }
    }
    @media screen and (max-width: 480px) {
      .overview .image-area {
        width: 355px;
        height: 290px;
      }
      .overview .image-area .circle {
        width: 170px;
      }
    }

    /*=== 説明エリア ===*/
    .overview .text-area {
      width: 55%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .overview .text-area h3 {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 40px;
    }
    .overview .text-area p {
      font-size: 16px;
      line-height: 26px;
      letter-spacing: 1px;
      margin-bottom: 30px;
    }
    .overview .text-area .link-button a {
      margin-right: auto;
      border-radius: 10px;
      background-color: #000;
      width: fit-content;
      padding: 17px 25px;
      float: right;
      box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.4);
      transition: transform 0.5s ease-out;
    }
    .overview .text-area .link-button a span {
      color: #fff;
      margin-right: 10px;
      font-size: 20px;
    }
    .overview .text-area .link-button a:hover {
      animation: jump 1s ease-out infinite;
    }
    @media screen and (max-width: 1024px) {
      .overview .text-area {
        width: 100%;
      }
      .overview .text-area h3 {
        font-size: 18px;
        text-align: center;
        margin-bottom: 20px;
      }
      .overview .text-area .link-button {
        text-align: center;
      }
      .overview .text-area .link-button a {
        padding: 15px 20px;
        float: none;
      }
      .overview .text-area .link-button a span {
        font-size: 16px;
      }
    }
  }

  /*===== 避難時のためのガイドブックセクション =====*/
  .guidebook-section {
    padding-top: 80px;
    padding-bottom: 100px;
    position: relative;

    @media screen and (max-width: 1024px) {
      padding: 40px 10px 50px 10px;
    }

    /*=== 背景シルエット ===*/
    .bg {
      position: absolute;
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.8s ease, transform 0.8s ease;
      z-index: 1;
    }
    .bg.fade-in {
      opacity: 1;
      transform: translateY(0);
    }
    .bg01 {
      width: 280px;
      right: 0;
      top: -150px;
    }
    @media screen and (max-width: 1024px) {
      .bg01 {
        top: -60px;
        width: 100px;
      }
    }

    /*=== タイトル ===*/
    .top-section-title {
      margin-bottom: 60px;
      position: relative;
      z-index: 2;
    }
    .top-section-title .sub {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
    }
    .top-section-title .sub span {
      margin-left: 20px;
      font-size: 20px;
      color: #f24c3d;
    }
    .top-section-title h2 {
      text-align: center;
      font-size: 48px;
    }
    @media screen and (max-width: 480px) {
      .top-section-title {
        margin-bottom: 30px;
      }
      .top-section-title .sub span {
        margin-left: 10px;
        font-size: 14px;
      }
      .top-section-title h2 {
        font-size: 28px;
      }
    }

    /*=== 概要 ===*/
    .overview {
      position: relative;
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      z-index: 2;
    }

    /*=== ガイドブック画像 ===*/
    .overview .image-area {
      width: 40%;
      border-radius: 5px;
      overflow: hidden;
    }
    .overview .image-area img {
      width: 100%;
      box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
    }
    @media screen and (max-width: 1024px) {
      .overview .image-area {
        margin: 0 auto;
        width: 100%;
        margin-bottom: 30px;
      }
    }
    @media screen and (max-width: 480px) {
      .overview .image-area {
        width: 100%;
      }
    }

    /*=== 説明エリア ===*/
    .overview .text-area {
      width: 55%;
    }
    .overview .text-area h3 {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 40px;
      line-height: 40px;
    }
    .overview .text-area p {
      font-size: 16px;
      line-height: 26px;
      letter-spacing: 1px;
      margin-bottom: 30px;
    }
    .overview .text-area .link-button a {
      margin-right: auto;
      border-radius: 10px;
      background-color: #000;
      width: fit-content;
      padding: 17px 25px;
      float: right;
      box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.4);
      transition: transform 0.5s ease-out;
    }
    .overview .text-area .link-button a span {
      color: #fff;
      margin-right: 10px;
      font-size: 20px;
    }
    .overview .text-area .link-button a:hover {
      animation: jump 1s ease-out infinite;
    }
    @media screen and (max-width: 1024px) {
      .overview .text-area {
        width: 100%;
      }
      .overview .text-area h3 {
        font-size: 18px;
        text-align: center;
        margin-bottom: 20px;
        line-height: 26px;
      }
      .overview .text-area .link-button {
        text-align: center;
      }
      .overview .text-area .link-button a {
        padding: 15px 20px;
        float: none;
      }
      .overview .text-area .link-button a span {
        font-size: 16px;
      }
    }
  }

  /*===== バナーセクション =====*/
  .banner-section {
    padding-top: 80px;
    padding-bottom: 100px;
    position: relative;
    background-color: #f6f6f6;

    @media screen and (max-width: 1024px) {
      padding: 40px 10px 70px 10px;
    }

    /*=== 背景シルエット ===*/
    .bg {
      position: absolute;
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.8s ease, transform 0.8s ease;
      z-index: 1;
    }
    .bg.fade-in {
      opacity: 1;
      transform: translateY(0);
    }
    .bg01 {
      width: 300px;
      left: 0;
      top: -150px;
    }
    @media screen and (max-width: 1024px) {
      .bg01 {
        top: -40px;
        width: 120px;
      }
    }

    /*=== バナー ===*/
    .banners {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      max-width: 1280px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .banners a {
      width: 19%;
    }
    .banners a img {
      width: 100%;
    }
    @media screen and (max-width: 1024px) {
      .banners a {
        width: 49%;
      }
    }
    @media screen and (max-width: 480px) {
      .banners a {
        width: 100%;
      }
    }
  }
}