/* 基本フォント設定 */
html {
    scroll-behavior: smooth;
}

body {
    font-feature-settings: "halt";
}

/* レスポンシブフォントサイズの設定 */
:root {
    font-size: calc(100vw / 24);
}

@media screen and (min-width: 1024px) {
    :root {
        font-size: clamp(10px, calc(1000vw / 1024), 22px);
    }
}

/* 流れる文字アニメーション */
.flow-font01 {
    position: relative;
    overflow: hidden;
    white-space: nowrap;

    /* 横幅を画面の98%に設定（vwはビューポート幅の単位です） */
    /* 最小高さを設定 */
}

#footer_catch_txt {
    display: inline-block;
    animation: flowing-text 15s linear infinite;
    width: 98vw;
}

#footer_catch_txt img {
    height: 100%;
    width: auto;
    display: block;
    max-width: none;
    object-fit: contain;
}

@keyframes flowing-text {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* スマートフォン用の調整 */
@media screen and (max-width: 768px) {
    .flow-font01 {
        min-height: 3rem;
        position: relative;
    }

    #footer_catch_txt {
        animation: flowing-text 10s linear infinite;
        height: 2.5rem;
        position: relative;
    }

    #footer_catch_txt img {
        width: 98vw !important;
        height: auto !important;
        max-width: none !important;
    }
}

/* GSAPパララックス効果 */
.parallax-container {
    position: relative;
    overflow: hidden;
}

.parallax-bg-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    will-change: transform;
    z-index: -1;
}

/* スマートフォンではパララックスを無効化（パフォーマンス向上） */
@media screen and (max-width: 768px) {
    .parallax-bg-element {
        position: static;
        height: auto;
        background-attachment: scroll;
    }
}

/* 横スクロールアニメーション用 */
.horizontal-section {
    /* min-height: 60vh; */
    /* background: #f8f9fa; */
    overflow: visible;
    position: relative;
}

.horizontal-container {
    height: 100%;
    display: flex;
    align-items: stretch;
}

.horizontal-scroll {
    display: flex;
    align-items: stretch;
    gap: 3.5rem;
    padding: 0 4rem;
    width: max-content;
}

.scroll-item {
    min-width: 450px;

    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
    transition: all 0.3s ease;
}

.scroll-item:hover {}

.scroll-item h3 {}

.scroll-item p {}

.scroll-item .mt-4 {}

.scroll-item .mt-4 div {}

.job-tags {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.job-tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #f1f3f4;
    color: #333;
    font-size: 0.75rem;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

/* スマートフォン用の調整 */
@media screen and (max-width: 768px) {
    .horizontal-section {}

    .horizontal-scroll {
        display: flex;
        gap: 1.75rem;
        padding: 0 1.875rem;
    }

    .scroll-item {
        min-width: 87.5vw;
        /* スタイルは必要に応じて追加 */
    }

    .scroll-item h3 {
        /* スタイルは必要に応じて追加 */
    }

    .scroll-item p {
        /* スタイルは必要に応じて追加 */
    }

    .scroll-item .mt-4 div {
        /* スタイルは必要に応じて追加 */
    }

    .job-tags {
        /* スタイルは必要に応じて追加 */
    }

    .job-tag {
        /* スタイルは必要に応じて追加 */
    }
}

/* テキスト表示アニメーション */
.fadeIn {
    opacity: 0;
}

.fadeIn.is-show {
    animation: fadeIn forwards 0.8s 1 ease 0.2s normal;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade_main {
    overflow: hidden;
    width: 100%;
}

.fade_main img {
    transform: translate3d(0, 109%, 0);
    opacity: 0;
}

.fade_main.is-show img {
    animation: fade_mainAnime forwards 0.6s 1 ease 1s normal;
}

@keyframes fade_mainAnime {
    0% {
        opacity: 0;
        transform: translate3d(0, 109%, 0);
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Firefoxでアニメーション時の画像ぶれを回避 */
.text01,
.text02 {
    transform: rotate(0.0001deg);
}

/* テキスト用の下から上にスライドアニメーション */
.fade_text {
    overflow: hidden;
    width: 100%;
}

.fade_text p,
.fade_text h1,
.fade_text h2,
.fade_text h3,
.fade_text h4,
.fade_text h5,
.fade_text h6,
.fade_text span,
.fade_text div {
    transform: translate3d(0, 109%, 0);
    opacity: 0;
}

.fade_text.is-show p,
.fade_text.is-show h1,
.fade_text.is-show h2,
.fade_text.is-show h3,
.fade_text.is-show h4,
.fade_text.is-show h5,
.fade_text.is-show h6,
.fade_text.is-show span,
.fade_text.is-show div {
    animation: fade_textAnime forwards 0.6s 1 ease 1s normal;
}

@keyframes fade_textAnime {
    0% {
        opacity: 0;
        transform: translate3d(0, 109%, 0);
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* シンプルなフェードインアニメーション用のクラス */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* パララックス効果用のクラス */
.parallax {
    transform: translateZ(0);
    /* ハードウェアアクセラレーションを有効化 */
    will-change: transform;
    /* ブラウザに最適化を促す */
}

.parallax-slow {
    transform: translateY(var(--parallax-offset, 0px));
}

.parallax-fast {
    transform: translateY(var(--parallax-offset, 0px));
}

.parallax-reverse {
    transform: translateY(calc(var(--parallax-offset, 0px) * -1));
}

/* ハンバーガーメニューボタンのスタイル */
.hamburger {
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 9999 !important;
    position: fixed !important;
}

.hamburger:active {
    transform: scale(0.95);
}

/* ハンバーガーメニューボタンのタップ領域を拡大 */
.hamburger div {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* About画像スライダーのスタイル */
.about-swiper {
    width: 100%;
    height: auto;
    pointer-events: none;
    /* タップやクリックを無効化 */
}

.swiper.about-swiper {
    width: 120%;
    margin-left: -10%;

    /* 左の余白を調整 */
}

/* About画像スライダーのスタイル */
.about-swiper .swiper-slide {
    width: 22rem !important;
    /* 固定幅 */
    height: 16rem !important;
    /* 固定高さ */
    flex-shrink: 0;
    margin-right: 1.5rem;
    /* 追加の余白（24px） */
}

.about-swiper .swiper-slide:first-child {
    margin-left: 0;
    /* 最初のスライドの左余白を0に */
}

.about-swiper .swiper-slide>div {
    width: 100% !important;
    height: 100% !important;
}

.about-swiper .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    /* 比率を保ちながらコンテナにフィット */
    object-position: center;
    /* 中央寄せ */
}

/* レスポンシブ対応 */
@media (min-width: 1024px) {
    .about-swiper .swiper-slide {
        width: 30rem !important;
        /* PC用の固定幅 */
        height: 20rem !important;
        /* PC用の固定高さ */
        margin-right: 2rem;
        /* PC用の追加余白（32px） */
    }
}

/* ====================================
   About画像スライドショー（CSSアニメーション版）
   ==================================== */

/* スライドショーコンテナ */
.about-slideshow {
    position: relative;
    width: 20rem;
    /* スマホ: 固定幅 320px */
    height: 12.5rem;
    /* スマホ: 高さ 200px */
    max-width: 100%;
    margin-bottom: 1.5rem;
    overflow: hidden;
    border-radius: 0.75rem;
    /* 角丸（12px） */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: #f5f5f5;
}

/* スライド画像の共通スタイル */
.about-slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: about-slideshow-animation 18s infinite;
    /* 3枚 × 3秒 = 9秒 */
}

/* アニメーション定義 */
@keyframes about-slideshow-animation {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    /* 3秒間表示（33.3%） */
    33.3% {
        opacity: 1;
    }

    38.3% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* 本社用の画像（スライドショー1） */
.about-slide-1-img1 {
    background-image: url('https://seisyou1991.com/wp-content/themes/Seisyou1991/img/about/about-main-01.jpg');
    animation-delay: 0s;
}

.about-slide-1-img2 {
    background-image: url('https://seisyou1991.com/wp-content/themes/Seisyou1991/img/about/about-main-02.jpg');
    animation-delay: 6s;
}

.about-slide-1-img3 {
    background-image: url('https://seisyou1991.com/wp-content/themes/Seisyou1991/img/about/about-main-03.jpg');
    animation-delay: 12s;
}

/* 西三河営業所用の画像（スライドショー2） */
.about-slide-2-img1 {
    background-image: url('https://seisyou1991.com/wp-content/themes/Seisyou1991/img/about/about-gaikan_1.jpg');
    animation-delay: 0s;
}

.about-slide-2-img2 {
    background-image: url('https://seisyou1991.com/wp-content/themes/Seisyou1991/img/about/about-gaikan_2.jpg');
    animation-delay: 6s;
}

.about-slide-2-img3 {
    background-image: url('https://seisyou1991.com/wp-content/themes/Seisyou1991/img/about/about-gaikan_3.jpg');
    animation-delay: 12s;
}

/* PC用のスタイル調整 */
@media (min-width: 1024px) {
    .about-slideshow {
        width: 39rem;
        /* PC: 固定幅 480px */
        height: 23.25rem;
        /* PC: 高さ 300px */
        border-radius: 1rem;
        /* PC: 角丸を大きく（16px） */
        margin-bottom: 2rem;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }
}

/* ====================================
   /About画像スライドショー
   ==================================== */

/* 沿革項目のフェードインアニメーション */
.history-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.history-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 沿革項目の順次表示アニメーション（JavaScriptで制御） */

/* service_itemの画像アニメーション（縮小から拡大） */
.service_item {
    position: relative;
    min-height: 300px;
    /* スマートフォン用の高さ */
}

.service_item .service-img {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.7);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    will-change: transform;
    /* パフォーマンス向上 */
    width: 100%;
    /* 画像を少し拡大 */
    height: 100%;
    left: 0;
    /* 中央配置のための調整 */
    top: 0;
}

.service_item .service-img:first-of-type {
    opacity: 0;
    position: relative;
}

.service_item.is-show .service-img {
    transform: scale(1);
}

.service_item.is-show .service-img:first-of-type {
    animation: serviceImageAnime forwards 0.8s 1 ease 0.2s normal;
}

@keyframes serviceImageAnime {
    0% {
        opacity: 1;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 画像切り替えアニメーション */
.service_item .service-img.active {
    opacity: 1;
}

.service_item .service-img.inactive {
    opacity: 0;
}

/* our-service-01のbefore要素アニメーション用のスタイル（GSAP版） */
#our-service-01::before {
    top: var(--before-top);
}

@media (min-width: 64rem) {
    #our-service-01::before {
        top: var(--before-top);
    }
}

/* .lg\:before\:w-\[5\.75rem\] の左から伸びるアニメーション用のスタイル（GSAP版） */
.lg\:before\:w-\[5\.75rem\] {
    position: relative;
}

.lg\:before\:w-\[5\.75rem\]::before {
    content: '';
    position: absolute;
    bottom: -1.125rem;
    left: 0;
    width: var(--before-width, 0rem);
    height: 0.3125rem;
    transition: width 0.2s ease-out;
}

@media (min-width: 64rem) {
    .lg\:before\:w-\[5\.75rem\]::before {
        width: var(--before-width, 0rem);
        transition: width 0.2s ease-out;
    }
}

/* サービス見出し用の青色線アニメーション（複数対応） */
.service-title-line {
    position: relative;
}

.service-title-line::before {
    content: '';
    position: absolute;
    bottom: -1.5rem;
    left: 0.25rem;
    width: var(--service-line-width, 0rem);
    height: 0.3125rem;
    background-color: #00a5e7;
    transition: width 0.8s ease-out;
    z-index: 1;
}

@media (min-width: 64rem) {
    .service-title-line::before {
        bottom: -2.5rem;
        left: 0.25rem;
        width: var(--service-line-width, 0rem);
        height: 0.5rem;
        transition: width 0.8s ease-out;
    }
}

/* アニメーション実行時 */
.service-title-line.is-active::before {
    width: var(--service-line-width, 6.5rem);
}

@media (min-width: 64rem) {
    .service-title-line.is-active::before {
        width: var(--service-line-width, 11.5rem);
    }
}

.swiper-wrapper {
    transition-timing-function: linear !important;
}

/* サービス画像の背景アニメーション（複数対応） */
.service-image-bg {
    position: relative;
}

/* 
  通常のサービス画像背景のアニメーション
  スマホ（1023px以下）の場合は、背景が左からスライドします。
*/
.service-image-bg::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -1.25rem;
    /* スマホ時の初期値。PCは下のメディアクエリで上書き */
    width: calc(100% + 1.25rem);
    height: 100%;
    background-color: #dbdbdb;
    transition: all 1.2s ease-out;
    z-index: 1;
}

/* 
  PC（画面幅1024px以上）の場合はleftを0に戻します。
  これにより、PCでは背景が通常位置からアニメーションします。
*/
@media (min-width: 64rem) {
    .service-image-bg::before {
        left: 0;
        width: 100%;
    }
}

/* アニメーション実行時 */
.service-image-bg.is-active::before {
    bottom: -1.25rem;
    left: 0rem;
}

@media (min-width: 64rem) {
    .service-image-bg.is-active::before {
        bottom: -2.5rem;
        left: 2.5rem;
    }
}

/* 2個目のサービス画像背景用（スマホ時のみ左寄せ） */
/* 
   .service-image-bg-seand クラスは、2個目のサービス画像背景に付与してください。
   スマホ（1023px以下）の場合のみ、背景が左寄せになります。
*/
.service-image-bg-second {
    position: relative;
}

/* スマホ時のみ適用（PCでは通常の.service-image-bgと同じ挙動） */
@media (max-width: 1023px) {
    .service-image-bg-second::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        /* 左寄せ */
        width: 100%;
        height: 100%;
        background-color: #dbdbdb;
        transition: all 1.2s ease-out;
        z-index: 1;
    }

    /* アニメーション実行時 */
    .service-image-bg-second.is-active::before {
        bottom: -1.25rem;
        left: -1.25rem;
    }
}

/* 
  .seisyou-swiper-container クラスの要素をクリックやタッチできないようにします。
  pointer-events: none; を指定することで、マウスやタッチ操作を無効化します。
  これにより、ユーザーはこの要素を操作できなくなります。
*/
.seisyou-swiper-container {
    pointer-events: none;
    /* クリックやタッチを無効化 */
}


/* スマホ時の画像サイズ調整 */
@media screen and (max-width: 1023px) {
    .seisyou-swiper-container {
        width: 300% !important;

    }
}


/* スマホ向けレイアウト（1024px未満のみ表示） */
@media screen and (max-width: 1023px) {
    .kv-wrapper-sp {
        overflow: hidden;
    }

    /* 英語テキスト部分 */
    .kv-en-sp {
        position: absolute;
        bottom: 2rem;
        /* 40px */
        left: 1.25rem;
        /* 20px */
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        /* 8px */
        z-index: 2;
    }

    .kv-en-sp img {
        width: 11.25rem;
        /* 180px */
    }

    .kv-en-sp img:last-child {
        width: 16rem;
        /* 210px */
    }

    /* 日本語テキスト */
    .kv-jp-sp {
        position: absolute;
        bottom: -0.7rem;
        /* 40px */
        left: 1.25rem;
        /* 20px */
        z-index: 2;
        opacity: 0;
    }

    .kv-jp-sp img {
        width: 21.25rem;
        /* 260px */
    }

    /* 会社名（縦配置） */
    .kv-company-sp {
        position: absolute;
        top: -12rem;
        right: 0.8rem;
        /* transform-origin: bottom right; */
        /* z-index: 2; */
        /* width: 7%; */
        height: 100%;
        opacity: 0;
    }

    .kv-company-sp img {
        height: 5.5rem;
        /* 64px */
        width: auto;
    }
}



/* 初期状態：左から入ってくる感じ＋わずかにスキューでスピード感 */
.kv-en-sp img {
    opacity: 0;
    transform: translateX(-60px) skewX(-6deg);
    filter: blur(1px);
    transition:
        transform .55s cubic-bezier(.22, .61, .36, 1),
        opacity .55s cubic-bezier(.22, .61, .36, 1),
        filter .55s cubic-bezier(.22, .61, .36, 1);
    will-change: transform, opacity, filter;
}

/* 表示トリガー後（クラス付与後） */
.kv-en-sp.is-inview img {
    opacity: 1;
    transform: translateX(0) skewX(0);
    filter: blur(0);
}

/* ステップ表示（シュッ…シュッ…シュッ…） */
.kv-en-sp.is-inview img:nth-child(1) {
    transition-delay: .32s;
}

.kv-en-sp.is-inview img:nth-child(2) {
    transition-delay: .64s;
}

.kv-en-sp.is-inview img:nth-child(3) {
    transition-delay: .96s;
}

/* PC向けキャッチコピーアニメーション */
@media screen and (min-width: 1024px) {
    /*
    ▼アニメーションの速度（時間）は「transition: ... 2s ...」の「2s」で指定しています。
    ▼「左から右へ」は、transformのtranslateX(-300px)からtranslateX(0)へ変化させることで実現しています。
    ▼2秒かけて左から右へスライドしながら表示されるアニメーションです。
    */

    .kv-en-pc {}

    .kv-en-pc img {
        opacity: 0;
        /* 最初は透明 */
        transform: translateX(-300px) skewX(-6deg);
        /* 左に300px移動＋少し傾ける */
        filter: blur(1px);
        /* ぼかし効果 */
        /* 
        transitionプロパティでアニメーションの速度や動きを指定します。
        ここで「2s」がアニメーションの時間（2秒）です。
        cubic-bezierは動き方（イージング）を細かく調整するものです。
        */
        transition:
            transform 1s cubic-bezier(.22, .61, .36, 1),
            opacity 0.7s cubic-bezier(.22, .61, .36, 1),
            filter 0.7s cubic-bezier(.22, .61, .36, 1);
        will-change: transform, opacity, filter;
        /* ブラウザにアニメーションの最適化を指示 */
    }

    .kv-en-pc.is-inview img {
        opacity: 1;
        /* 完全に表示 */
        transform: translateX(0) skewX(0);
        /* 元の位置・傾きなし（左→右へ移動） */
        filter: blur(0);
        /* ぼかしなし */
    }

    .kv-jp-pc {
        opacity: 0;
    }

    .kv-jp-pc.is-inview img {
        opacity: 1;

    }


    .kv-copy-pc img {
        opacity: 0;
    }

    .kv-copy-pc.is-inview img {
        opacity: 1;

    }
}

/* スクロールバーを非表示にするクラス */
.scrollbar-hide {
    /* Firefox */
    scrollbar-width: none;
    /* IE and Edge */
    -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
    /* Chrome, Safari, Opera */
    display: none;
}


.swiper-slide {
    width: 150% !important;
    flex-shrink: 0;
}

@media screen and (max-width: 1024px) {
    .swiper-slide {
        width: 250% !important;
    }
}

/* 斜め線のアニメーション*/
#sub_main_bg {
    --slider-rotation: 32deg;
    --slider-bg-delay: 0ms;
    --ease-power4-inout: linear;
    --color-primary: #00a5e7;
    --before-top: 82rem;
    --before-height: 48rem;
    --slider-duration: 1.2s;
    position: relative;
    /* 親要素にrelativeを追加 */
}

@media screen and (max-width: 1024px) {
    #sub_main_bg {
        --before-top: 47rem;
        --before-height: 36rem;
        --slider-duration: 0.6s;
    }
}

#sub_main_bg::before {
    position: absolute;
    top: var(--before-top);
    left: 0;
    width: 100%;
    height: var(--before-height);
    content: "";
    background-color: var(--color-primary);
    transform: skewY(calc(var(--slider-rotation) * -1)) scaleX(0);
    transform-origin: left bottom;
    z-index: 1;
    pointer-events: none;
    transition: transform var(--slider-duration) var(--slider-bg-delay) var(--ease-power4-inout);

}

/* アニメーション実行時 */
#sub_main_bg.is-active::before {
    transform: skewY(calc(var(--slider-rotation) * -1)) scaleX(1);
}


/* 斜め線のアニメーション*/
#sub_main_bg__service {
    --slider-rotation: 32deg;
    --slider-bg-delay: 0ms;
    --ease-power4-inout: linear;
    --color-primary: #00A5E7;
    --before-top: 82rem;
    --before-height: 48rem;
    --slider-duration: 1.2s;
    position: relative;
    /* 親要素にrelativeを追加 */
}

@media screen and (max-width: 1024px) {
    #sub_main_bg__service {
        --before-top: 39rem;
        --before-height: 32rem;
        --slider-duration: 0.6s;
    }
}

#sub_main_bg__service::before {
    position: absolute;
    top: var(--before-top);
    left: 0;
    width: 100%;
    height: var(--before-height);
    content: "";
    background-color: var(--color-primary);
    transform: skewY(calc(var(--slider-rotation) * -1)) scaleX(0);
    transform-origin: left bottom;
    z-index: 1;
    pointer-events: none;
    transition: transform var(--slider-duration) var(--slider-bg-delay) var(--ease-power4-inout);

}

/* アニメーション実行時 */
#sub_main_bg__service.is-active::before {
    transform: skewY(calc(var(--slider-rotation) * -1)) scaleX(1);
}

/* 斜め線のアニメーション*/
#our-service-01 {
    --slider-rotation: 32deg;
    --slider-bg-delay: 0ms;
    --ease-power4-inout: linear;
    --color-primary: #00a5e7;
    --before-top2: 82rem;
    --before-height2: 48rem;

}

@media screen and (max-width: 1024px) {
    #our-service-01 {
        --before-top2: 47rem;
        --before-height2: 36rem;
        --slider-duration: 0.6s;
    }
}

#our-service-01::before {
    position: absolute;
    top: var(--before-top2);
    left: 0;
    width: 100%;
    height: var(--before-height2);
    content: "";
    background-color: var(--color-primary);
    transform: skewY(calc(var(--slider-rotation) * -1)) scaleX(0);
    transform-origin: left bottom;
    z-index: 1;
    pointer-events: none;
    /* 
      斜め線アニメーションのトランジション（アニメーションの動き方と時間を指定します）
      スマホ（画面幅1024px以下）の場合は短く（0.6秒）、PCは1.2秒にします。
      下のメディアクエリでスマホ用の設定を上書きしています。
    */
    /* transitionの時間（duration）もカスタムプロパティ（定数）として定義できます */
    transition: transform var(--slider-duration, 1.2s) var(--slider-bg-delay) var(--ease-power4-inout);
}

/* アニメーション実行時 */
#our-service-01.is-active::before {
    transform: skewY(calc(var(--slider-rotation) * -1)) scaleX(1);
}



/* テキストを隠すための親要素 */
.slide-text-container {
    width: 100%;
    /* お好みの幅 */
    height: 4rem;
    /* 表示したい高さ */
    overflow: hidden;
    /* ★ これが重要！はみ出した部分を隠します */
    position: relative;
    /* 子要素の基準にする */
}

/* アニメーションさせるテキストの子要素 */
.slide-text-content {
    position: absolute;
    bottom: 0;
    /* 下からスタート */
    transform: translateY(100%);
    /* 画面外（コンテナの下）に配置 */
    /* 初期状態ではアニメーションなし */
}

/* アニメーション実行時 */
.slide-text-content.animate {
    animation: slideUpText 1.5s forwards;
    /* アニメーションの設定 */
}

/* テキストを隠すための親要素 */
.slide-text-container__service {
    width: 100%;
    /* お好みの幅 */
    height: 5rem;
    /* 表示したい高さ（PC用） */
    overflow: hidden;
    /* ★ これが重要！はみ出した部分を隠します */
    position: relative;
    /* 子要素の基準にする */
}

/* 
  スマートフォン（画面幅が768px以下）の場合は高さを調整します。
  ここでは例として3.2remにしていますが、お好みで調整してください。
  メディアクエリは「@media (max-width: 768px)」で指定します。
*/
@media (max-width: 768px) {
    .slide-text-container__service {
        height: 3.2rem;
        /* スマホ用の高さ */
    }
}

/* アニメーションさせるテキストの子要素 */
.slide-text-content__service {
    position: absolute;
    bottom: 0;
    /* 下からスタート */
    transform: translateY(100%);
    /* 画面外（コンテナの下）に配置 */
    /* 初期状態ではアニメーションなし */
}

/* アニメーション実行時 */
.slide-text-content__service.animate {
    animation: slideUpText 1.5s forwards;
    /* アニメーションの設定 */
}

/* アニメーションの定義 */
@keyframes slideUpText {
    0% {
        transform: translateY(100%);
        /* 開始時: 下に隠れている */
        opacity: 0;
        /* 開始時: 透明 */
    }

    100% {
        transform: translateY(0);
        /* 終了時: 元の位置に戻る */
        opacity: 1;
        /* 終了時: 不透明 */
    }
}

/* 共通のフェードインアニメーション（GSAP版） */
.fade-in-element {
    opacity: 0;
    /* GSAPが直接opacityを制御するため、transitionは不要 */
}

/* 共通のフェードインアニメーション（GSAP版） */
.fade-in-element__slow {
    opacity: 0;
    /* GSAPが直接opacityを制御するため、transitionは不要 */
}

/* フッター用のグラデーション背景 */
.footer-gradient-bg {
    background: linear-gradient(to bottom,
            rgb(2, 61, 147) 0%,
            /* 上: 明るい青紫 */
            rgb(18, 41, 94) 100%
            /* 下: 最も濃い青紫 */
        ) !important;
    min-height: 100vh !important;
    background-position: 0% 0% !important;
    /* 最小高さを画面の高さに設定 */
}

/* フッター用のグラデーション背景（before疑似要素版） */
.footer-gradient-bg-extend {
    position: relative;
    width: 100%;
}

.footer-gradient-bg-extend::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300vh;
    /* 画面の3倍の高さでページの一番下までカバー */
    background: linear-gradient(to bottom,
            rgb(2, 61, 147) 0%,
            /* 上: 明るい青紫 */
            rgb(18, 41, 94) 100%
            /* 下: 最も濃い青紫 */
        );
    z-index: -1;
}


.footer_contact_bg {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: transparent !important;


}

.footer_contact_bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 画面の3倍の高さでページの一番下までカバー */
    background: linear-gradient(to bottom,
            rgb(255, 255, 255) 0%,
            rgb(2, 61, 147) 10%,
            /* 上: 明るい青紫 */
            rgb(18, 41, 94) 100%
            /* 下: 最も濃い青紫 */
        ) !important;
    z-index: -2;
}

/* レスポンシブフォントサイズクラス */
.responsive-text {
    /* 
        画面幅が800px以下のときは2rem、1440px以上のときは3.5remになります。
        それ以外の幅では、2remから3.5remまでなめらかに大きくなります。
        clamp関数は「最小値, 推奨値, 最大値」の順で指定します。
        ここでは、最小値2rem、最大値3.5rem、推奨値は800pxから1440pxの間で線形に変化します。
    */
    font-size: clamp(2rem, calc(2rem + (100vw - 800px) * 2.34375 / 640), 3.5rem) !important;
    /* 
    最小値: 2.5rem (800px以下)
    最大値: 3.5rem (1920px以上)
    計算式: 2.5rem + (画面幅 - 800px) * 0.001
    */
}

/* より細かい調整が必要な場合の代替案 */
.responsive-text-alt {
    font-size: calc(2.5rem + (100vw - 800px) * 0.000892857) !important;
    /* 
    計算式: 2.5 + (画面幅 - 800) * 0.000892857
    800px: 2.5rem
    1920px: 3.5rem
    */
}

/* ホバー・タッチアニメーション */
.hover-scale {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.hover-scale:hover,
.hover-scale:active {
    transform: scale(1.05);
}

.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.hover-lift:hover,
.hover-lift:active {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.hover-glow {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.hover-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.hover-glow:hover::before,
.hover-glow:active::before {
    left: 100%;
}

.hover-rotate {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-rotate:hover,
.hover-rotate:active {
    transform: rotate(2deg) scale(1.02);
}

.hover-slide {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.hover-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(2, 61, 147, 0.1), rgba(18, 41, 94, 0.1));
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.hover-slide:hover::after,
.hover-slide:active::after {
    transform: translateX(0);
}

/* パルスアニメーション */
.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* バウンスアニメーション */
.bounce-animation {
    animation: bounce 1s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* フェードイン + スライドアップ */
.fade-slide-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-slide-up.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 3D効果 */
.hover-3d {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.hover-3d:hover,
.hover-3d:active {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg) scale(1.02);
}

/* グラデーションアニメーション */
.gradient-animation {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* パララックス効果（削除） */

/* 画像の拡大効果（枠内に収める） */
.image-zoom-container {
    overflow: hidden;
    position: relative;
    border-radius: inherit;
}

.image-zoom-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-zoom-container:hover img {
    transform: scale(1.2);
}

/* パララックス + ズーム効果（削除） */


/* ブラー効果のCSS */
.blur-img {
    filter: blur(20px);
    transform: scale(1.1);
    transition: filter 1.5s ease-out, transform 1.5s ease-out;
}

.blur-img.blur-removed {
    filter: blur(0px);
    transform: scale(1.0);
}

/* 親要素からはみ出さないように制御 */
.blur-reveal {
    overflow: hidden;
}