.gp-top-overlay {
      position: absolute;
      z-index: 2;
  }

  .gp-top-logo {
      max-width: 200px;
      width: 20%;
      height: auto;
      min-width: 85px;
      left: 0;
      top: 0;
      /*position: absolute;*/
      z-index: 2;
  }

  .gp-pr-40p {
      padding-right: 40%;
  }

  /* WOW.js enhancement: smoother easing + subtle blur on enter */
  .animated {
      animation-duration: 1.1s;
      animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform, opacity, filter;
  }

  @keyframes fadeInUpMin {
      0% {
          opacity: 0;
          transform: translate3d(0, 16px, 0) scale(0.992);
          filter: blur(10px);
      }

      60% {
          opacity: 1;
          transform: translate3d(0, 2px, 0) scale(0.998);
          filter: blur(0);
      }

      100% {
          opacity: 1;
          transform: none;
          filter: blur(0);
      }
  }

  /* optional: respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
      .animated {
          animation-duration: 1ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 1ms !important;
      }
  }

  .glass-effect {
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border-radius: 16px;
  }

  /* グローバルナビゲーション透過効果 */
  .navbar-glass {
      background: rgb(255, 255, 255) !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
  }

  /* モバイル対応（統合） */
  @media (max-width: 991.98px) {
      .glass-effect {
          background: rgba(255, 255, 255);
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
          border-radius: 12px;
      }

      .navbar-glass {
          background: rgba(255, 255, 255) !important;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
      }
  }

  .fullscreen .modal-dialog {
      margin: 0 0 0 0;
      max-width: 100% !important;
      width: 100% !important;
      height: 100% !important;
      ;
      min-height: 100% !important;
      ;
      padding: 0;
      ;
  }

  .fullscreen .modal-content {
      height: 100%;
      min-height: 100%;
      border-radius: 0;
      background: rgba(36, 36, 36, 0.90);
      overflow: auto;
  }

  .fullscreen .modal-content .modal-header {
      border: 0px;
  }

  .fullscreen .modal-content button {
      opacity: 1;
  }

  .fullscreen .modal-content button span {
      color: #fff;
      font-weight: 1;
      font-size: 26px;
      text-shadow: none;
  }

  .fullscreen .modal-body .modal-logo img {
      width: 158px;
      padding-bottom: 84px;
  }

  .fullscreen .modal-body ul {
      padding: 0 0 0 0;
  }

  .fullscreen .modal-body li {
      padding-bottom: 43px;
  }

  .fullscreen .modal-body a {
      color: #fff;
      font-size: 16px;
  }

  .fullscreen .modal-body .social img {
      width: 56px;
      margin: 8px;
  }

  .modal-title {
      color: #fff;
  }

  .layer_top {
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      z-index: 0;
  }

  .top-size {
      height: 90vh;
  }

  .layer_top:nth-of-type(1) {
      background-image: url(https://www.gree-hairproduce.com/img/img_top03sp.jpg);
  }

  .layer_top:nth-of-type(2) {
      background-image: url(https://www.gree-hairproduce.com/img/img_top01sp.jpg);
  }

  .layer_top:nth-of-type(3) {
      background-image: url(https://www.gree-hairproduce.com/img/img_top02sp.jpg);
  }




  @media (min-width: 576px) {

      /* ≥576px(sm) */
      .layer_top:nth-of-type(1) {
          background-image: url(https://www.gree-hairproduce.com/img/img_top01.jpg);
      }

      .layer_top:nth-of-type(2) {
          background-image: url(https://www.gree-hairproduce.com/img/img_top02.jpg);
      }

      .layer_top:nth-of-type(3) {
          background-image: url(https://www.gree-hairproduce.com/img/img_top03.jpg);
      }


  }



  @media (min-width: 768px) {

      /* ≥768px(md) */
      #top_contents01 {
          background: url(https://www.gree-hairproduce.com/img/pic_gree01.jpg);
          background-repeat: no-repeat;
          background-position: right center;
          background-repeat: no-repeat;
          background-size: 65% auto;
          z-index: -1;
      }
  }

  @media (min-width: 992px) {

      /* >=992 */
      #P_01-Gree_01 {
          background: url(https://www.gree-hairproduce.com/img/common/tsuda_01.jpg);
          background-position: left center;
          background-repeat: no-repeat;
          background-size: 65% auto;
          height: 100%;
          z-index: -1;
          min-height: 500px;
      }

      #P_02-Gree_02 {
          background: url(https://www.gree-hairproduce.com/img/common/tiba_02.jpg);
          background-position: right center;
          background-repeat: no-repeat;
          background-size: 65% auto;
          height: 100%;
          z-index: -1;
      }

      #P_03-Bench_01 {
          background: url(https://www.gree-hairproduce.com/img/common/img_bench.jpg);
          background-position: left center;
          background-repeat: no-repeat;
          background-size: 65% auto;
          height: 100%;
          z-index: -1;
      }

      #P_04-Gree_03 {
          background: url(https://www.gree-hairproduce.com/img/common/img_regaro.jpg);
          background-position: right center;
          background-repeat: no-repeat;
          background-size: 65% auto;
          height: 100%;
          z-index: -1;
      }

      #P_05-lib_01 {
          background: url(https://www.gree-hairproduce.com/img/common/img_lib.jpg);
          background-position: left center;
          background-repeat: no-repeat;
          background-size: 65% auto;
          height: 100%;
          z-index: -1;
      }
  }

  @media (min-width: 1200px) {}

  @media (min-width: 1600px) {}

  /* v1.11 hero-heading-image-only: 2025-11-11 */
  /* Heroセクション用CSS */
  .hero-section {
      height: 90vh;
      min-height: 90vh;
      min-height: calc(var(--vh, 1vh) * 90);
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .hero-heading {
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      transition: transform 0.3s;
      /* 画像のみ表示にするため背景・余白は除去 */
  }

  .hero-heading img {
      /* 画像サイズで表示（従来の見た目に合わせてvw基準） */
      width: 28.854vw;
      height: auto;
      display: block;
      filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
  }

  .hero-scroll {
      bottom: 42px;
      bottom: 2.188vw;
      height: 72px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      width: 62px;
      z-index: 10;
  }

  .hero-scroll .scroll-text {
      color: #fff;
      display: block;
      font-family: "Montserrat", -apple-system, BlinkMacSystemFont, Segoe UI, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
      font-size: 12px;
      letter-spacing: 0.2em;
      text-align: center;
  }

  .hero-scroll .scroll-line {
      background: #fff;
      bottom: 0;
      display: block;
      height: 46px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      width: 1px;
      animation: scrollLine 2s infinite;
  }

  @keyframes scrollLine {
      0% {
          height: 46px;
          opacity: 1;
      }

      50% {
          height: 20px;
          opacity: 0.5;
      }

      100% {
          height: 46px;
          opacity: 1;
      }
  }

  .hero-swiper-container {
      -webkit-clip-path: polygon(0 5.5%, 100% 0%, 100% 94.4%, 0 100%);
      clip-path: polygon(0 5.5%, 100% 0%, 100% 94.4%, 0 100%);
      height: 100%;
      position: relative;
  }

  .hero-swiper-container .swiper {
      height: 100%;
      width: 100%;
      overflow: hidden;
      /* スライドがはみ出ないように */
  }

  /* v1.22 fadeエフェクト用のCSS設定 */
  .hero-swiper-container .swiper-wrapper {
      transition-timing-function: linear !important;
  }

  .hero-swiper-container .swiper-slide {
      background: #ccc;
      height: 90vh;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      will-change: opacity;
  }

  /* v1.23 画像はHTMLに直接指定（CSSから削除） */

  /* レスポンシブ対応（Bootstrap5のブレークポイントに合わせる） */
  @media (max-width: 991.98px) {
      .hero-heading {
          top: calc(50% + 14px);
          top: calc(50% + 3.733vw);
      }

      .hero-heading img {
          width: 48vw;
          filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
      }

      .hero-scroll {
          bottom: 42px;
      }

      .hero-swiper-container {
          -webkit-clip-path: polygon(0 7.5%, 100% 0%, 100% 92.4%, 0 100%);
          clip-path: polygon(0 7.5%, 100% 0%, 100% 92.4%, 0 100%);
      }
  }

  /* ブログカルーセル用CSS */
  .blogSwiper {
      padding: 20px 0 60px;
      width: 100%;
  }

  .blogSwiper .swiper-wrapper {
      align-items: stretch;
  }

  .blogSwiper .swiper-slide {
      height: auto;
      display: flex;
  }

  .blogSwiper .swiper-slide>* {
      width: 100%;
  }

  /* v1.0 ブログカルーセル画像の高さ確保 */
  .blogSwiper .card-img-top {
      position: relative;
      overflow: hidden;
      /* アスペクト比3:2のフォールバック（古いブラウザ対応） */
      padding-top: 66.666%;
      /* モダンブラウザ用 */
      aspect-ratio: 3 / 2;
  }

  /* aspect-ratio対応ブラウザではpadding-topを無効化 */
  @supports (aspect-ratio: 3 / 2) {
      .blogSwiper .card-img-top {
          padding-top: 0;
      }
  }

  .blogSwiper .card-img-top img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .blogSwiper .swiper-button-next,
  .blogSwiper .swiper-button-prev {
      color: #262626;
      background: rgba(255, 255, 255, 0.8);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;
  }

  .blogSwiper .swiper-button-next:hover,
  .blogSwiper .swiper-button-prev:hover {
      background: rgba(255, 255, 255, 1);
      transform: scale(1.1);
  }

  .blogSwiper .swiper-button-next::after,
  .blogSwiper .swiper-button-prev::after {
      font-size: 20px;
      font-weight: bold;
  }

  .blogSwiper .swiper-pagination {
      bottom: 20px;
  }

  .blogSwiper .swiper-pagination-bullet {
      background: #262626;
      opacity: 0.3;
  }

  .blogSwiper .swiper-pagination-bullet-active {
      opacity: 1;
  }

  @media (max-width: 767.98px) {
      .blogSwiper {
          padding: 20px 0 50px;
      }

      .blogSwiper .swiper-button-next,
      .blogSwiper .swiper-button-prev {
          width: 40px;
          height: 40px;
      }

      .blogSwiper .swiper-button-next::after,
      .blogSwiper .swiper-button-prev::after {
          font-size: 16px;
      }
  }


  /* v1.24 recruit-banner_card: 正方形化対応 */
  .recruit-banner {
      margin-top: 0;
  }

  .recruit-banner_card {
      background: #262626;
      color: #fff;
      padding: 18px;
      padding: 1.25rem;
      /* 正方形にする */
      aspect-ratio: 1 / 1;
      display: flex;
      flex-direction: column;
  }

  .recruit-banner_link {
      border: 1px solid rgba(255, 255, 255, 0.9);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 1.5rem;
      padding: 2.5rem 1.5rem;
      transition: opacity 0.3s ease, transform 0.3s ease;
      /* 親要素の高さに合わせる */
      height: 100%;
      /* 文字が溢れないように */
      overflow: hidden;
      box-sizing: border-box;
  }

  .recruit-banner_link.is-hover_op:hover,
  .recruit-banner_link.is-hover_op:focus-visible {
      opacity: 0.7;
      transform: translateY(-6px);
  }


  .recruit-banner_detail {
      font-weight: 500;
      line-height: 1.8;
      font-size: 1rem;
      /* 文字が溢れないように */
      word-break: keep-all;
      overflow-wrap: break-word;
      /* 最大行数を制限（必要に応じて調整） */
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .recruit-banner_cta {
      border: 1px solid #fff;
      padding: 0.85rem 2.5rem;
      letter-spacing: 0.3em;
  }

  @media (min-width: 768px) {
      .recruit-banner_card {
          padding: 2.5rem;
      }

      .recruit-banner_link {
          padding: 2rem 1.5rem;
          gap: 1.25rem;
      }

      .recruit-banner_detail {
          font-size: 1.125rem;
          -webkit-line-clamp: 5;
      }
  }

  .text-truncate_x {
      --line: 2;
      display: -webkit-box;
      -webkit-line-clamp: var(--line);
      -webkit-box-orient: vertical;
      overflow: hidden;
  }