@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/




/* ===========================================
   WordPress用 画像スライドアニメーション
   使い方: 画像ブロック・メディアとテキストブロックに「slide-reveal」クラスを追加
=========================================== */

.slide-reveal {
    position: relative !important;
    overflow: hidden !important;
}

.slide-reveal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3498db;
    z-index: 2;
    transform: translateX(0);
    transition: transform 1s ease;
}

.slide-reveal.revealed::before {
    transform: translateX(100%);
}

/* カラーバリエーション */
.slide-reveal.red::before { background: #e74c3c; }
.slide-reveal.green::before { background: #27ae60; }
.slide-reveal.purple::before { background: #9b59b6; }
.slide-reveal.orange::before { background: #f39c12; }
.slide-reveal.black::before { background: #2c3e50; }
.slide-reveal.gradient::before { background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); }

/* スピードバリエーション */
.slide-reveal.slow::before { transition: transform 2s ease; }
.slide-reveal.fast::before { transition: transform 0.5s ease; }

/* 遅延バリエーション */
.slide-reveal.delay-1::before { transition-delay: 0.2s; }
.slide-reveal.delay-2::before { transition-delay: 0.5s; }
.slide-reveal.delay-3::before { transition-delay: 1s; }

/* 左スライド用 */
.slide-reveal.left.revealed::before { transform: translateX(-100%); }

/* イージングバリエーション */
.slide-reveal.ease::before { 
    transition: transform 1s ease !important; 
}

.slide-reveal.ease-in::before { 
    transition: transform 1s ease-in !important; 
}

.slide-reveal.ease-out::before { 
    transition: transform 1.1s ease-out !important; 
}

.slide-reveal.ease-in-out::before { 
    transition: transform 1s ease-in-out !important; 
}

.slide-reveal.bounce::before { 
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; 
}






/* ================================ ループスライダー ここから ================================== */
.loop-slider {
    display: flex;
    overflow: hidden;
		gap: 1.5rem;
}

.loop-slider .wp-block-group__inner-container,
.loop-slider .swell-block-columns {
    display: contents;
}

.loop-slider .swell-block-columns__inner {
    flex-wrap: nowrap;
    animation: infinity-scroll-left 20s infinite linear; /* アニメーションの時間を指定 */
}

.loop-slider .swell-block-column figure {
    width: 200px; /* 画像の横幅を指定（パソコン） */
    position: relative;
}

.loop-slider .swell-block-column figure::before {
    padding-top: 65%; /* 画像の縦横比を指定 */
    display: block;
    content: "";
}

.loop-slider .swell-block-column figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center;
}

@media screen and (max-width: 959px) {
    .loop-slider .swell-block-column figure {
        width: 300px; /* 画像の横幅を指定（スマホ） */
    }
}

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

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

.service-visu-group {
	border-left: 3px solid red;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.service-va-group {
	border-left: 3px solid green;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.service-m-group {
	padding-top: 32px !important;
	padding-bottom: 32px !important;
}

.strength-column {
	.top-m-group {
		border-radius: 8px;
	}
}

/* ================================ ループスライダー ここまで ================================== */