/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 25 2026 | 14:22:40 */
/*==================================================
RESET
==================================================*/

.service-slider *,
.service-slider *::before,
.service-slider *::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

.service-slider a{

    color:inherit;
    text-decoration:none;

}


/*==================================================
SECTION
==================================================*/

.service-slider{

    position:relative;

    width:100%;
    height:70vh;

    min-height:420px;

    overflow:hidden;

    background:#000;

    color:#fff;

}


/*==================================================
SLIDER
==================================================*/

.slider{

    display:flex;

    width:100%;
    height:100%;

    list-style:none;

}


/*==================================================
PANEL
==================================================*/

.panel{

    position:relative;

    flex:1;

    overflow:hidden;

    cursor:pointer;

    transition:
        flex .75s cubic-bezier(.22,.61,.36,1);

}


/* 初期状態 */

.panel.active{

    flex:3.8;

}


/* Hover */

.slider:hover .panel{

    flex:.9;

}

.slider:hover .panel:hover{

    flex:3.8;

}


/*==================================================
BORDER
==================================================*/

.panel:not(:first-child){

    border-left:1px solid rgba(255,255,255,.12);

}


/*==================================================
LINK
==================================================*/

.panel-link{

    position:relative;

    display:block;

    width:100%;
    height:100%;

}


/*==================================================
BACKGROUND
==================================================*/

.panel-bg{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1);

    transition:
        transform 6s ease,
        filter .5s ease;

}


/* 仮背景 */

.bg-web{

    background:#1b3f7a;
    background-image: url("https://masa-art-design.com/wp-content/uploads/2026/06/pc01_02.jpg");
}

.bg-graphic{

    background:#92315f;

}

.bg-3d{

    background:#3a3a3a;

}


/*==================================================
OVERLAY
==================================================*/

.panel-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(0,0,0,.78),

        rgba(0,0,0,.42),

        rgba(0,0,0,.10)

    );

    transition:.45s;

}


/*==================================================
HOVER
==================================================*/

.panel:hover .panel-bg{

    transform:scale(1.08);

}

.panel:hover .panel-overlay{

    background:

    linear-gradient(

        90deg,

        rgba(0,0,0,.60),

        rgba(0,0,0,.22),

        rgba(0,0,0,0)

    );

}


/*==================================================
INNER
==================================================*/

.panel-inner{

    position:relative;

    width:100%;
    height:100%;

    z-index:5;

}


/*==================================================
LINE
==================================================*/

.panel::after{

    content:"";

    position:absolute;

    top:0;
    right:0;

    width:1px;
    height:100%;

    background:rgba(255,255,255,.15);

    z-index:10;

}


/*==================================================
INITIAL ANIMATION
==================================================*/

.panel{

    opacity:0;

    transform:translateX(40px);

    animation:panelFade .8s forwards;

}

.panel:nth-child(1){

    animation-delay:.10s;

}

.panel:nth-child(2){

    animation-delay:.20s;

}

.panel:nth-child(3){

    animation-delay:.30s;

}


@keyframes panelFade{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/*==================================================
BACKGROUND MOVE
==================================================*/

.panel:hover .panel-bg{

    animation:bgZoom 8s linear infinite alternate;

}

@keyframes bgZoom{

    0%{

        transform:
        scale(1.08)
        translate(0,0);

    }

    100%{

        transform:
        scale(1.12)
        translate(-20px,-10px);

    }

}


/*==================================================
ACTIVE
==================================================*/

.panel.active .panel-bg{

    transform:scale(1.05);

}


/*==================================================
FOCUS
==================================================*/

.panel-link:focus-visible{

    outline:2px solid #fff;

    outline-offset:-8px;

}
/*==================================================
CLOSE TITLE
==================================================*/

.panel-close-title{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    writing-mode:vertical-rl;
    text-orientation:mixed;

    font-size:18px;
    font-weight:900;

    letter-spacing:.35em;

    color:#fff;

    white-space:nowrap;

    z-index:20;

    transition:
        opacity .35s ease,
        transform .45s ease;

}

.panel:hover .panel-close-title,
.panel.active .panel-close-title{

    opacity:0;

    transform:
        translate(-50%,-50%)
        scale(.9);

}


/*==================================================
CONTENT
==================================================*/

.panel-content{

    position:absolute;

    left:45px;
    bottom:45px;

    width:360px;

    opacity:0;

    transform:
        translateY(30px);

    transition:
        all .45s cubic-bezier(.22,.61,.36,1);

    z-index:30;

}

.panel:hover .panel-content,
.panel.active .panel-content{

    opacity:1;

    transform:translateY(0);

}


/*==================================================
CATEGORY
==================================================*/

.panel-category{

    display:inline-block;

    margin-bottom:14px;

    font-size:10px;

    font-weight:600;

    letter-spacing:.30em;

    color:#fff;

    opacity:.75;

}


/*==================================================
TITLE
==================================================*/

.panel-title{

    margin-bottom:18px;

    font-size:36px;

    font-weight:900;

    line-height:1.2;

    letter-spacing:.02em;

    color:#fff;

}


/*==================================================
TEXT
==================================================*/

.panel-text{

    margin-bottom:28px;

    font-size:14px;

    line-height:1.9;

    font-weight:400;

    color:#fff;

    opacity:.92;

}


/*==================================================
BUTTON
==================================================*/

.panel-button{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 26px;

    border:1px solid rgba(255,255,255,.8);

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    transition:
        all .3s ease;

}

.panel-arrow{

    transition:
        transform .3s ease;

}

.panel-button:hover{

    background:#fff;

    color:#000;

}

.panel-button:hover .panel-arrow{

    transform:translateX(8px);

}


/*==================================================
TEXT ANIMATION
==================================================*/

.panel:hover .panel-category,
.panel.active .panel-category{

    animation:fadeUp .35s .05s both;

}

.panel:hover .panel-title,
.panel.active .panel-title{

    animation:fadeUp .45s .10s both;

}

.panel:hover .panel-text,
.panel.active .panel-text{

    animation:fadeUp .55s .15s both;

}

.panel:hover .panel-button,
.panel.active .panel-button{

    animation:fadeUp .65s .20s both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
            translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/*==================================================
TABLET
==================================================*/

@media (max-width:992px){

.panel-content{

    left:35px;
    bottom:35px;

    width:300px;

}

.panel-title{

    font-size:30px;

}

.panel-text{

    font-size:13px;

}

}


/*==================================================
SMART PHONE
==================================================*/

@media (max-width:768px){

.service-slider{

    height:auto;

    min-height:auto;

}

.slider{

    flex-direction:column;

}

.panel{

    height:280px;

    flex:none !important;

}

.panel-close-title{

    writing-mode:horizontal-tb;

    top:30px;
    left:30px;

    transform:none;

    font-size:22px;

    letter-spacing:.10em;

}

.panel:hover .panel-close-title,
.panel.active .panel-close-title{

    transform:none;

}

.panel-content{

    left:30px;
    right:30px;
    bottom:30px;

    width:auto;

    opacity:1;

    transform:none;

}

.panel-category{

    font-size:10px;

}

.panel-title{

    font-size:28px;

}

.panel-text{

    font-size:13px;

    line-height:1.8;

}

.panel-button{

    padding:12px 22px;

    font-size:13px;

}

}


/*==================================================
SMALL PHONE
==================================================*/

@media (max-width:480px){

.panel{

    height:240px;

}

.panel-title{

    font-size:24px;

}

.panel-text{

    font-size:12px;

}

.panel-button{

    padding:10px 20px;

}

}