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

.movie-button {
            position: sticky;
            top: 10%;
            left: 20px;
            z-index: 5;
            width: 80px;
            height: 80px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .movie-button:hover {
            transform: scale(1.05);
        }

        .button-circle {
            width: 100%;
            height: 100%;
            background-color: #ff0000;
            border-radius: 50%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }

        .movie-button:hover .button-circle {
            background-color: #ff3333;
        }

        .play-icon {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 0 10px 16px;
            border-color: transparent transparent transparent #ffffff;
            z-index: 2;
            transition: transform 0.3s ease, border-color 0.3s ease;
        }

        .movie-button:hover .play-icon {
            transform: scale(1.1);
            border-color: transparent transparent transparent #ffff00;
        }

        .rotating-text {
            position: absolute;
            width: 140%;
            height: 140%;
            top: -20%;
            left: -20%;
            animation: rotate 10s linear infinite;
        }

        .movie-button:hover .rotating-text {
            animation-play-state: paused;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        /* Updated modal styles with transitions */
        .modal {
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s ease;
            align-items: center;
            justify-content: center;
        }

        .modal.active {
            opacity: 1;
            visibility: visible;
            background-color: rgba(0, 0, 0, 0.8);
        }

        .modal-content {
            position: relative;
            width: 90%;
            max-width: 960px;
            transform: scale(0.7);
            opacity: 0;
            transition: all 0.5s ease;
        }

        .modal.active .modal-content {
            transform: scale(1);
            opacity: 1;
        }

        .modal-close {
            position: absolute;
            top: -40px;
            right: 0;
            color: white;
            font-size: 30px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 5px;
            transition: transform 0.3s ease;
        }

        .modal-close:hover {
            transform: scale(1.1);
        }

        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        }

        #youtubePlayer{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        @media screen and (max-width: 600px) {
            .movie-button {
                top: 40%;
                left: 80%;
                bottom: auto;
                width: 60px;
                height: 60px;
            }

            .play-icon {
                border-width: 8px 0 8px 12px;
            }
        }

/* -------------------------------------------------------------*/
/* -----------------MV、スプリットテキスト----------------------*/
#mv-top{
gap: 10rem !important;
}
@media screen and (max-width: 1000px){
#mv-top{
    gap: var(--wp-column-gap) !important;
}
}


.mv-text{
overflow: hidden;
text-align: center;
}
.mv-text p{
    font-weight: bold;
    line-height: 1;
font-family: "Michroma";
    letter-spacing: 0.05em;
}
.mv-text-up{
font-size: 8rem;
}
.mv-text-low{
font-size: 6rem;
}


.mv-text-up{
/*  transform: translateY(100px); */
overflow: hidden;
line-height: 1.5;
margin-bottom: 7px;
padding-top: 10px;
}
.mv-text-low{
/*  transform: translateY(-100px); */
overflow: hidden;
line-height: 1.5;
padding-bottom: 10px;
margin-top: 10px;
}
.line{
border: 1px solid white;
overflow: hidden;
}
@media screen and (max-width: 1000px){
.mv-text-up{
font-size: 6rem;
}
mv-text-low{
font-size: 5rem;
}
}
@media screen and (max-width: 600px){
.mv-text-low{
font-size: 3rem;
}
}



/* -----------------MV、スプリットテキストここまで--------------*/
/* -------------------------------------------------------------*/
/* ------------------------------------------------------------*/
/* ----------------------見出しGSAP----------------------------*/
.text-deco{
display: inline-block;
overflow: hidden;
}
.text-deco h2{
	margin: 0;
}

.head-line{
border: 5px solid black;
}
.line-white{
border: 5px solid white;
}
.text-deco h2{
font-size: 2.5rem;
font-weight: bold;
overflow: hidden;
font-family: "Michroma";
line-height: 1.5;
}
.head-jp{
font-size: 1.5rem;
font-weight: bold;
margin-top: -15px;
line-height: 2;
}
/* ----------------------見出しGSAPここまで--------------------*/
/* ------------------------------------------------------------*/
.button{
    display: block ;
    position : relative ;
    width : 240px ;
    height : 60px ;
    background: rgb(153,191,187);
    background: radial-gradient( rgba(93,108,107,.3) 0%, rgba(95,162,158,0) 90%);
    box-shadow : 0 0 24px rgba(116,132,145,1) ;
    transition : all .7s ease ;
}
.button::before{
    content : '' ;
    position : absolute ;
    z-index : 2 ;
    top : -4px ;
    left : 0 ;
    width : 160px ;
    height : 10px ;
    border-radius : 50% ;
    background: rgb(170,255,240);
    background: radial-gradient( rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33%, rgba(255,255,255,0) 100%);
}
.button::after{
    content : '' ;
    position : absolute ;
    z-index : 2 ;
    bottom : -4px ;
    right : 0 ;
    width : 160px ;
    height : 10px ;
    border-radius : 50% ;
    background: rgb(170,255,240);
    background: radial-gradient( rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33%, rgba(255,255,255,0) 100%);
}
.button__wrapper{
    width : 100% ;
    height :100% ;
    clip-path: polygon(0% 0%, 0 100%, 0.7% 100%, 0.7% 3%, 99.3% 3%, 99.3% 98%, 0% 98%, 0% 100%, 100% 100%, 100% 0%);
    background-color:hsla(0,0%,100%,1);
    background-image:
    radial-gradient(at 0% 0%, hsla(180,100%,98%,1) 0px, transparent 50%),
    radial-gradient(at 29% 0%, hsla(189,100%,78%,1) 0px, transparent 50%),
    radial-gradient(at 0% 48%, hsla(355,0%,100%,1) 0px, transparent 50%),
    radial-gradient(at 100% 62%, hsla(340,0%,100%,1) 0px, transparent 50%),
    radial-gradient(at 90% 98%, hsla(169,88%,83%,1) 0px, transparent 50%),
    radial-gradient(at 26% 100%, hsla(240,0%,44%,1) 0px, transparent 50%),
    radial-gradient(at 79% 0%, hsla(336,0%,51%,1) 0px, transparent 50%);
}
.button__box{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    position : absolute ;
    z-index : 1 ;
    top : 3% ;
    left : 0.8% ;
    width : 98.4% ;
    height : 94% ;
    color : rgba(255,255,255,.7) ;
    letter-spacing : 2px ;
    background: rgb(255,255,255);
    background: linear-gradient(120deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 50%);
    transition : all 1s ease ;
}
.button__box::before{
    content : '' ;
    position : absolute ;
    z-index : -1 ;
    top : 0 ;
    left : 0 ;
    width : 100% ;
    height : 100% ;
    background : linear-gradient( 120deg , rgba(255,255,255,.4),rgba(255,255,255,0)) ;
    clip-path : path('M215.98,12.57c8.09,0,16.1,.12,24.02,.33V0H0V44.89C53.01,25.06,130.12,12.57,215.98,12.57Z');
}
.button--round{
    border-radius : 30px ;
}
.button--round .button__wrapper{
    clip-path: path('M210,1c15.99,0,29,13.01,29,29s-13.01,29-29,29H30C14.01,59,1,45.99,1,30S14.01,1,30,1H210m0-1H30C13.43,0,0,13.43,0,30s13.43,30,30,30H210c16.57,0,30-13.43,30-30S226.57,0,210,0h0Z');
}
.button--round .button__box{
    border-radius : 30px ;
    overflow : hidden ;
}
.button:hover{
    box-shadow : 0 0 24px rgba(116,132,145,0) ;
}
.button:hover .button__box{
    letter-spacing : 8px ;
    color : rgba(255,255,255,1) ;
}
/* ----------------------ガラスボタンここまで-------------------*/
/* -------------------------------------------------------------*/

/* ------------------------------------------------------------*/
/* -----------------------サービスセクション流れ出る文字-------------------------*/

.service-container p {
    width: fit-content;
    font-size: 4rem;
    font-weight: bold;
    color: white;
    white-space: nowrap; /* 改行を阻止 */
    font-family: "Michroma", sans-serif;
    text-align: center;
    margin: 0 auto;
    background: none;
    padding: 0;
}
.text span{
    transition: color .5s;
}
.text span.is-active{
color:rgb(241 0 0);
}
.container{
    width: 100%;
}

/* ここまでは見た目を整える記述 */
.js-move-text{ 
    transform: translateX(50%) skew(-10deg);
}

/* -----------------------サービスセクション流れ出る文字-------------------------*/
/* ------------------------------------------------------------*/
/* ------------------------------------------------------------*/
/* -----------------------サービスセクション-------------------------*/
.service
{
	background:
	linear-gradient(27deg, #0e0f14 5px, transparent 5px) 0 5px,
	linear-gradient(207deg, #0e0f14 5px, transparent 5px) 10px 0px,
	linear-gradient(27deg, #14151f 5px, transparent 5px) 0px 10px,
	linear-gradient(207deg, #14151f 5px, transparent 5px) 10px 5px,
	linear-gradient(90deg, #14151c 10px, transparent 10px),
	linear-gradient(#15151c 25%, #12131a 25%, #12131a 50%,
		transparent 50%, transparent 75%, #191b24 75%, #191b24);
	background-color: #0c0d12;
	background-size: 20px 20px;
}
.service-menu{
margin-top: -5em;
}
.menu-banner{
width: 300px;
margin: 0 auto;
filter: grayscale(1);
transition: filter 0.3s ease; /* スムーズな変化のためのトランジション */
overflow: hidden;
}
.menu-banner img {
    width: 100%; /* 元画像を親要素にフィットさせる */
    transition: transform 0.3s ease; /* スムーズなズームアニメーション */
}
.menu-banner:hover img {
    transform: scale(1.3); /* ホバー時に2倍ズーム */
}
.menu-banner:hover{
filter: grayscale(0);
}
.menu-banner-head,.menu-banner-text{
position: relative;
z-index: 2;
}
.menu-banner-head{
font-family: "Michroma";
top: 100px;
left: 0;
font-size: 2.5rem;
WHITE-SPACE: NOWRAP;
}
.menu-banner-text{
top: 80px;
left: 0;
}
.menu-car{
position: relative;
bottom: 40px;
left:50%;
z-index: 1;
width: 350px;
filter: grayscale(1);
transform: translatex(-50%);
transition: filter 0.3s ease; /* スムーズな変化のためのトランジション */
}
.menu-banner:hover+.menu-car{
filter: grayscale(0);
}
/*  ---------タブレットサイズ----------------------*/
@media screen and (max-width: 960px){
.service-menu{
margin-top: 0;
}
.service-container p{
    font-size: 3rem;
}
.menu-banner{
width: 100%;
filter: grayscale(0);
overflow: hidden;
}
.menu-banner-head{
font-family: "Michroma";
top: 40%;
left: 0%;
WHITE-SPACE: NOWRAP;
}
.menu-banner-text{
top: 35%;
left: 0%;
}
.menu-car {
        position: relative;
        bottom: 10%;
        width: 350px;
        filter: grayscale(0);
/*         transform: translatex(-50%); */
}
.wp-block-columns {
    --wp-column-gap: 6.5em;
}
}
/*  ---------タブレットサイズここまで----------------------*/
/*  ---------スマホサイズ----------------------*/
@media screen and (max-width: 600px){
	.d-card {
    margin-top: -250px!important;
}
    .menu-car {
        position: relative;
        left: 20% !important;
        width: 400px;
        transform: none; /* translatex をリセット */
    }
	.service-container p{
    font-size: 1.5rem;
}
}
/*  ---------スマホサイズここまで----------------------*/

/* -----------------------サービスセクション-----------------*/
/* ------------------------------------------------------------*/
/* ------------------------------------------------------------*/
/* -----------------------マウスストーカー---------------------*/

.flair {
    width: 20px;
    height: 20px;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    background-color: #f09629;
    outline: 1px solid #ff6347;
    outline-offset: 3px;
}
@media screen and (max-width: 781px){
.flair{
display: none;
}
/* -----------------------マウスストーカーここまで-------------*/
/* ------------------------------------------------------------*/