/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 27 2026 | 13:48:17 */
/*==================================================
SERVICE SLIDER
CSS ①-1
Variable / Reset / Layout
==================================================*/


/*==================================================
VARIABLE
==================================================*/

:root{

    /* Layout */

    --slider-height:60vh;
    --slider-min-height:520px;

    --panel-gap:0px;

    --content-left:60px;
    --content-bottom:55px;

    --content-width:420px;

    /* Font */

    --category-size:16px;

    --title-size:50px;

    --text-size:20px;

    --button-size:14px;

    --close-title-size:40px;

    /* Animation */

    --duration:.6s;

    --ease:cubic-bezier(.22,.61,.36,1);

    /* Color */

    --white:#ffffff;

    --border:rgba(255,255,255,.15);

    --overlay:

        linear-gradient(

            90deg,

            rgba(0,0,0,.45),

            rgba(0,0,0,.18),

            rgba(0,0,0,.05)

        );

}


/*==================================================
RESET
==================================================*/

.service-slider,
.service-slider *{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

.service-slider{

    position:relative;

    width:100%;

    overflow:hidden;

    color:var(--white);

    isolation:isolate;

}

.service-slider a{

    color:inherit;

    text-decoration:none;

}

.service-slider img{

    display:block;

    width:100%;

    height:auto;

}

.service-slider button{

    border:none;

    background:none;

    font:inherit;

    cursor:pointer;

}



/*==================================================
WRAPPER
==================================================*/

.service-slider__wrapper{

    position:relative;

    width:100%;

}



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

.service-slider__list{

    display:flex;

    width:100%;

    height:var(--slider-height);

    min-height:var(--slider-min-height);

    overflow:hidden;

}



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

.service-panel{

    position:relative;

    flex:1;

    overflow:hidden;

    transition:

        flex var(--duration) var(--ease);

}

.service-panel.is-active{

    flex:3.8;

}

.service-slider__list:hover .service-panel{

    flex:.9;

}

.service-slider__list:hover .service-panel:hover{

    flex:3.8;

}



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

.service-panel:not(:first-child){

    border-left:1px solid var(--border);

}



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

.service-panel__link{

    position:relative;

    display:block;

    width:100%;

    height:100%;

}



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

.service-panel__inner{

    position:relative;

    width:100%;

    height:100%;

    z-index:5;

}



/*==================================================
MOBILE NAV
==================================================*/

.service-mobile-nav{

    display:none;

}



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

.service-panel__link:focus-visible{

    outline:2px solid var(--white);

    outline-offset:-6px;

}



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

@media (max-width:1200px){

:root{

    --slider-height:60vh;

    --slider-min-height:420px;

    --content-left:45px;

    --content-bottom:45px;

    --content-width:360px;

    --title-size:40px;

    --text-size:15px;

    --close-title-size:50px;

}

}



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

@media (max-width:768px){

:root{

    --slider-height:auto;

    --slider-min-height:auto;

    --content-left:28px;

    --content-bottom:28px;

    --content-width:auto;

    --title-size:30px;

    --text-size:14px;

    --close-title-size:18px;

}

.service-slider{

    overflow:visible;

}

.service-slider__list{

    position:relative;

    display:block;

    height:auto;

    min-height:auto;

}

.service-panel{

    display:none;

    width:100%;

    height:420px;

}

.service-panel.is-active{

    display:block;

}

.service-mobile-nav{

    display:flex;

    gap:10px;

    overflow-x:auto;

    padding:18px 20px;

    background:#111;

    scrollbar-width:none;

}

.service-mobile-nav::-webkit-scrollbar{

    display:none;

}

.service-mobile-nav__item{

    flex:0 0 auto;

    min-width:110px;

    padding:12px 18px;

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

    color:#fff;

    font-size:13px;

    transition:.3s;

}

.service-mobile-nav__item.is-active{

    background:#fff;

    color:#000;

}

}
/*==================================================
SERVICE SLIDER
CSS ①-2
Panel / Background / Overlay
==================================================*/


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

.service-panel__image{

    position:absolute;

    inset:0;

    z-index:1;

    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;

    transition:
        opacity .45s ease;

}


/*==================================================
TEMP BACKGROUND
後から画像に変更してください
==================================================*/

.service-panel__image--web{

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

}

.service-panel__image--graphic{

background-image:url("https://masa-art-design.com/wp-content/uploads/2026/06/PC_s02.jpg");

}

.service-panel__image--3d{

background-image:url("https://masa-art-design.com/wp-content/uploads/2026/06/PC_s03.jpg");

}




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

.service-panel__overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:
    linear-gradient(

        90deg,

        rgba(0,0,0,.35),

        rgba(0,0,0,.15),

        rgba(0,0,0,.05)

    );

}


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

.service-panel.is-active{

    z-index:5;

}

.service-panel:hover{

    z-index:10;

}


/*==================================================
IMAGE
画像は固定
==================================================*/

.service-panel__image{

    transform:none;

}

.service-panel:hover .service-panel__image{

    transform:none;

}

.service-panel.is-active .service-panel__image{

    transform:none;

}


/*==================================================
IMAGE BRIGHTNESS
==================================================*/

.service-panel__image{

    filter:

        brightness(.92)
        contrast(1.05)
        saturate(1.05);

}


/*==================================================
HOVER
画像は変化させない
==================================================*/

.service-panel:hover .service-panel__overlay{

    background:
    linear-gradient(

        90deg,

        rgba(0,0,0,.35),

        rgba(0,0,0,.15),

        rgba(0,0,0,.05)

    );

}


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

.service-panel::after{

    content:"";

    position:absolute;

    top:0;
    right:0;

    width:1px;
    height:100%;

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

    z-index:20;

}

.service-panel:last-child::after{

    display:none;

}


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

.service-panel__inner{

    display:flex;

    align-items:flex-end;

    justify-content:flex-start;

    width:100%;
    height:100%;

}


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

.service-panel{

    transition:

        flex .65s cubic-bezier(.22,.61,.36,1);

}


/*==================================================
FIRST LOAD
==================================================*/

.service-panel{

    opacity:0;

    animation:

        serviceFade .8s forwards;

}

.service-panel:nth-child(1){

    animation-delay:.05s;

}

.service-panel:nth-child(2){

    animation-delay:.15s;

}

.service-panel:nth-child(3){

    animation-delay:.25s;

}


@keyframes serviceFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/*==================================================
CURSOR
==================================================*/

.service-panel{

    cursor:pointer;

}


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

@media (max-width:768px){

.service-panel{

    width:100%;

    height:420px;

}

.service-panel__image{

    background-position:center;

}

.service-panel::after{

    display:none;

}

.service-panel__overlay{

    background:
    linear-gradient(

        180deg,

        rgba(0,0,0,.10),

        rgba(0,0,0,.20),

        rgba(0,0,0,.55)

    );

}

}/*==================================================
SERVICE SLIDER
CSS ②
Text / Button / Animation
==================================================*/


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

.service-panel__close{

    position:absolute;

    top:50%;
    left:50%;

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

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

    font-size:var(--close-title-size);

    font-weight:900;

    letter-spacing:.35em;

    color:var(--white);

    white-space:nowrap;

    z-index:30;

    opacity:1;

    transition:
        opacity .35s ease,
        transform .45s var(--ease);

}


/* 開いたら閉じタイトルを消す */

.service-panel.is-active .service-panel__close,
.service-panel:hover .service-panel__close{

    opacity:0;

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

}


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

.service-panel__content{

    position:absolute;

    left:var(--content-left);

    bottom:var(--content-bottom);

    width:var(--content-width);

    z-index:40;

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .45s ease,
        transform .55s var(--ease);

}


/* 開いたパネルのみ表示 */

.service-panel.is-active .service-panel__content,
.service-panel:hover .service-panel__content{

    opacity:1;

    transform:translateY(0);

}


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

.service-panel__category{

    margin-bottom:14px;

    color:var(--white);

    font-size:var(--category-size);

    font-weight:600;

    letter-spacing:.35em;

    opacity:.75;

}


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

.service-panel__title{

    margin-bottom:18px;

    color:var(--white);

    font-size:var(--title-size);

    font-weight:900;

    line-height:1.15;

    letter-spacing:.02em;

}


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

.service-panel__text{

    margin-bottom:34px;

    color:var(--white);

    font-size:var(--text-size);

    line-height:1.9;

    opacity:.92;

}


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

.service-panel__button{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 28px;

    border:1px solid rgba(255,255,255,.45);
	
	 background:rgba(255,255,255,.12);

    color:rgba(255,255,255,.75);

    font-size:var(--button-size);

    font-weight:700;

    letter-spacing:.10em;

    transition:
        all .3s ease;

}


/*==================================================
ARROW
==================================================*/

.service-panel__arrow{

    transition:
        transform .3s ease;

}


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

.service-panel:hover .service-panel__button{

    background:#fff;

    color:#000;

}

.service-panel:hover .service-panel__button .service-panel__arrow{

    transform:translateX(8px);

}


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

.service-panel.is-active .service-panel__category,
.service-panel:hover .service-panel__category{

    animation:serviceFadeUp .35s .05s both;

}

.service-panel.is-active .service-panel__title,
.service-panel:hover .service-panel__title{

    animation:serviceFadeUp .45s .12s both;

}

.service-panel.is-active .service-panel__text,
.service-panel:hover .service-panel__text{

    animation:serviceFadeUp .55s .18s both;

}

.service-panel.is-active .service-panel__button,
.service-panel:hover .service-panel__button{

    animation:serviceFadeUp .65s .25s both;

}


/*==================================================
KEYFRAME
==================================================*/

@keyframes serviceFadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media (max-width:1200px){

.service-panel__content{

    width: 580px;
    bottom: 120px;

}

}


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

@media (max-width:768px){

.service-panel__close{

    display:none;

}

.service-panel__content{

    position:absolute;

    left:24px;

    right:24px;

    bottom:26px;

    width:auto;

    opacity:1;

    transform:none;

}

.service-panel__category{

    margin-bottom:10px;

}

.service-panel__title{

    margin-bottom:14px;

}

.service-panel__text{

    margin-bottom:22px;

    line-height:1.7;

}

.service-panel__button{

    padding:12px 22px;

}

}


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

@media (max-width:480px){

.service-panel__content{

    left:20px;

    right:20px;

    bottom:20px;

}

.service-panel__button{

    width:100%;

    justify-content:center;

}

}/*==================================================
SERVICE SLIDER
CSS ③
Responsive / Mobile
==================================================*/


/*==================================================
PC・TABLET
==================================================*/

@media (min-width:769px){

.service-slider{

    width:100%;
    height:var(--slider-height);

}

.service-slider__wrapper{

    width:100%;
    height:100%;

}

.service-slider__list{

    width:100%;
    height:100%;

}

.service-mobile-nav{

    display:none;

}

}



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

@media (max-width:768px){

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

.service-slider{

    height:auto;

    min-height:auto;

}


/*==============================
WRAPPER
==============================*/

.service-slider__wrapper{

    display:flex;

    flex-direction:column;

}


/*==============================
MAIN IMAGE
==============================*/

.service-slider__list{

    position:relative;

    width:100%;

    height:72vw;

    min-height:380px;

    max-height:520px;

}


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

.service-panel{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:

        opacity .45s ease;

}

.service-panel.is-active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


/*==============================
IMAGE
==============================*/

.service-panel__image{

    width:100%;
    height:100%;

    background-size:cover;

    background-position:center;

}


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

.service-panel__overlay{

    background:

    linear-gradient(

        180deg,

        rgba(0,0,0,.10),

        rgba(0,0,0,.20),

        rgba(0,0,0,.65)

    );

}


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

.service-panel__content{

    position:absolute;

    left:24px;

    right:24px;

    bottom:28px;

    width:auto;

    opacity:1;

    transform:none;

}


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

.service-panel__category{

    font-size:10px;

    margin-bottom:8px;

}


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

.service-panel__title{

    font-size:30px;

    margin-bottom:14px;

}


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

.service-panel__text{

    font-size:14px;

    line-height:1.8;

    margin-bottom:22px;

}


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

.service-panel__button{

    padding:12px 22px;

    font-size:13px;

}


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

.service-panel__close{

    display:none;

}


/*==================================================
BOTTOM NAVIGATION
==================================================*/

.service-mobile-nav{

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding:18px;

    background:#111;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

}

.service-mobile-nav::-webkit-scrollbar{

    display:none;

}


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

.service-mobile-nav__item{

    flex:0 0 auto;

    min-width:130px;

    padding:14px 20px;

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

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    transition:.3s;

}


/* Active */

.service-mobile-nav__item.is-active{

    background:#fff;

    color:#000;

}


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

.service-panel__category,
.service-panel__title,
.service-panel__text,
.service-panel__button{

    animation:none;

}

}



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

@media (max-width:480px){

.service-slider__list{

    height:85vw;

    min-height:320px;

}

.service-panel__content{

    left:18px;

    right:18px;

    bottom:120px;

}

.service-panel__title{

    font-size:26px;

}

.service-panel__text{

    font-size:13px;

}

.service-panel__button{

    width:100%;

    justify-content:center;

}

.service-mobile-nav{

    padding:14px;

}

.service-mobile-nav__item{

    min-width:110px;

    padding:12px 16px;

}

}