@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
*/

.top_imgbox {
	gap: 0 !important;
	margin: 20px;
}
.top_imgbox_content {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
.top_imgbox_content .wp-block-image {
	margin-bottom: 0;
	border: 1px solid green;
}
.top_imgbox img {
	width: auto;
	border: 1px solid green;
}
.top_imgbox_txt {
	position: absolute;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	top: 34%;
}
.top_imgbox_subtxt {
	font-size: 16px;
	top: 27%;
}
.top_imgbox_btn {
	position:absolute;
	bottom: 20%;
	min-width: 200px;
}
.top_imgbox_btn a {
	position: relative;
	background: none;
	border: 1px solid #fff;
	border-radius: 0;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	padding: 17px;
	min-width: 200px;
	box-shadow: none !important;
}
.top_imgbox_btn a::after {
	content: "";
	position: absolute;
	width: 40px;
	height: 1px;
	background-color: #fff;
	top: 50%;
	right: -15px;
}
.top_imgbox_btn a:hover {
	background:rgba(255,255,255,0.8);
	color: #655E99;
}
@media screen and (max-width: 782px){
	.top_imgbox img {
		height: auto;
		border-right: none;
		border-bottom: 1px solid #fff;
	}
	.top_imgbox_txt {
		top: 29%;
		font-size: 25px;
	}
	.top_imgbox_subtxt {
		top: 22%;
		font-size: 14px;
	}
	.top_imgbox_btn a {
		font-size: 16px;
		padding: 16px;
	}
	.top_imgbox_btn {
		bottom: 20%;
	}
}

.test_border {
	border-bottom: 1px solid #111;
}
.height500 {
	height: 500px;
	margin: 0 20px;
}
.green_bdr {
	border: 1px solid green;
	margin: 20px;
}
.gap0 {
	gap: 0 !important;
}
.mg20 {
	margin: 20px;
}
.bg_green {
	background-color: green;
}
.bg_black {
	background-color: black;
}
.footer {
	gap: 0 !important;
}
.footer_column {
	gap: 0 !important;
}
.slider {
            width: 100%;
            background-color: green;
            overflow: hidden;
            white-space: nowrap; /* テキストを1行に並べる */
        }

        /* スライドするテキスト */
        .slider-text {
            display: inline-block;
            padding-left: 100%;
            animation: slide 20s linear infinite;
        }

        /* アニメーションの定義 */
        @keyframes slide {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(-100%);
            }
        }
.text-contact {
	color: #fff;
	font-size: 100px;
	margin-right:20px;
}

.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 10s infinite linear; /* アニメーションの時間を指定 */
}

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

.loop-slider .swell-block-column figure::before {
    padding-top: 19%; 
    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: cover;
    object-position: center;
}

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

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

    to {
        transform: translateX(calc(-100% - (1.5rem * 4))); /* gapの分も含めて調整 */

    }
}