@charset "utf-8"; /* CSS Document */

/**slick基礎**/
[class*="_SlDes"]{ opacity: 0; transition: opacity .1s linear;}
[class*="_SlDes"].slick-initialized{ opacity: 1;}
[class*="_SlDes"] .slick-list li.slick-slide img{ max-width: 100%;}
[class*="_SlDes"] [class*="arrow-"]{display: inline-block; width: 2.5em; height: 2.5em; position: absolute; top: 0; bottom: 0; margin: auto;/* background-image: url(../img/arr_black.svg); width: 3em; height: 3em; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;*/ cursor: pointer; z-index: 101; }
[class*="_SlDes"] [class*="arrow-"]:before{ display: inline-block; width: 75%; height: 75%; content: ""; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform:scale(1, 1) rotate(45deg) ; position: absolute; top:0; bottom: 0; left:0; right:0; margin: auto;}
[class*="_SlDes"] .arrow-prev{ left:2vw;}
[class*="_SlDes"] .arrow-next{ right:2vw; }
[class*="_SlDes"] .arrow-next:before{ transform:scale(1, 1) rotate(-135deg);}

[class*="_SlDes"] .uniq-dots{position: absolute; bottom:3em; display: flex; width: 100%; justify-content: center; gap:1em; flex-wrap: wrap;}
[class*="_SlDes"] .uniq-dots li{ height: 0.5em; width: 5em; padding: 0!important; cursor: pointer;}
[class*="_SlDes"] .uniq-dots li button{ display: block; border: 0; background: #fff; height: 100%; width: 100%; outline: none; line-height: 0px; font-size: 0px; color: transparent; cursor: pointer;}
[class*="_SlDes"] .uniq-dots li.slick-active button{ background: #000;}

/**slick右寄せデザインセット**/
[class*="RightAli"][class*="_SlDes"]{width: 100%; position: relative;}
[class*="RightAli"][class*="_SlDes"]:after{content: ""; width: 160px; height: 100%; display: block; position: absolute; top: 0; left:0; background-color: #fff;}
[class*="RightAli"][class*="_SlDes"] li{ padding-right: 0.2rem; position: relative; height: auto;}
[class*="RightAli"][class*="_SlDes"] li>a,
[class*="RightAli"][class*="_SlDes"] li>div{display: flex; flex-direction: column; height: 100%;}
[class*="RightAli"][class*="_SlDes"] li a:hover{opacity:1;}
[class*="RightAli"][class*="_SlDes"] li .event_img{aspect-ratio: 8 / 7; position: relative;}
[class*="RightAli"][class*="_SlDes"] li .event_img:after{content:""; width: 100%; height: 100%; display: block; background-color: rgb(0 0 0 / 50%); position: absolute; top:0; left: 0; transition: background-color 0.3s ease;}
[class*="RightAli"][class*="_SlDes"] li a:hover .event_img:after{background-color: rgb(0 0 0 / 0%);}
[class*="RightAli"][class*="_SlDes"] li .event_img img{}
/*[class*="RightAli"][class*="_SlDes"] li .event_txt{background-color: var(--comm-Lightgray); padding: 0.75em 2.5em 0.75em 1em; background-image: url(../img/arr_MaruWHT.svg);background-repeat: no-repeat;background-position: right 1em center; background-size: 1em auto; height: 100%;display: flex; align-items: center;}*/
[class*="RightAli"][class*="_SlDes"] li .event_txt{ color: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; padding: 1em 3em 1em 1em; flex-direction: column; justify-content: flex-end; background-image: url(../img/arr_MaruWHT.svg); background-repeat: no-repeat; background-position: right 1em bottom 1em; background-size: 1em auto;}
[class*="RightAli"][class*="_SlDes"] li a:hover .event_txt{ background-image: url(../img/arr_MaruBLK.svg); }
[class*="RightAli"][class*="_SlDes"].slick-slider .slick-track{display: flex!important;}

/*
[class*="RightAli"][class*="_SlDes"] li[data-slick-index="-1"]:before,
[class*="RightAli"][class*="_SlDes"] li[data-slick-index="-2"]:before,
[class*="RightAli"][class*="_SlDes"] li[data-slick-index="-3"]:before,
[class*="RightAli"][class*="_SlDes"] li[data-slick-index="-4"]:before,
[class*="RightAli"][class*="_SlDes"] li[data-slick-index="-5"]:before,
[class*="RightAli"][class*="_SlDes"] li[data-slick-index="-6"]:before,
[class*="RightAli"][class*="_SlDes"] li[data-slick-index="-7"]:before{background-color: #fff; width: 100%; height:100%; content:""; display: block; cursor: default; position: absolute; left:0; top:0; z-index: 22;}

.wth_sliRight.remove-padding [class*="RightAli"][class*="_SlDes"] li[data-slick-index="-1"]:before,
.wth_sliRight.remove-padding [class*="RightAli"][class*="_SlDes"] li[data-slick-index="-2"]:before,
.wth_sliRight.remove-padding [class*="RightAli"][class*="_SlDes"] li[data-slick-index="-3"]:before,
.wth_sliRight.remove-padding [class*="RightAli"][class*="_SlDes"] li[data-slick-index="-4"]:before,
.wth_sliRight.remove-padding [class*="RightAli"][class*="_SlDes"] li[data-slick-index="-5"]:before,
.wth_sliRight.remove-padding [class*="RightAli"][class*="_SlDes"] li[data-slick-index="-6"]:before,
.wth_sliRight.remove-padding [class*="RightAli"][class*="_SlDes"] li[data-slick-index="-7"]:before{display: none;}
*/

/**slick右寄せデザインセットCustmize01**/
[class*="RightAli"][class*="_Staff"][class*="_SlDes"] li{ padding-right: 0.4rem; }
[class*="RightAli"][class*="_Staff"][class*="_SlDes"] li>*{ display: block!important; }
[class*="RightAli"][class*="_Staff"][class*="_SlDes"] li .event_img{aspect-ratio: 3 / 2; }
[class*="RightAli"][class*="_Staff"][class*="_SlDes"] li .event_txt{ background-image: none!important; position: static; background-color: #fff; padding: 0.75em 0.5em; display: block;background-size: 1em auto; height: auto; color: #000;}

[class*="RightAli"][class*="_Staff"][class*="_SlDes"] li .event_txt small{display: inline-block; font-size: var(--font-SS); margin-left: 1rem;}
[class*="RightAli"][class*="_Staff"][class*="_SlDes"] li .event_txt [class*="txt_link"]{margin-top: 1em; text-align: left;}
[class*="RightAli"][class*="_Staff"][class*="_SlDes"] li .event_txt [class*="txt_link"]>*{font-size:var(--font-S); }


/**slick右寄せデザインセットCustmize02**/
.RightMrg_SlDes.slick-slider .slick-track{}
.wth_sliRight .slick-slide{padding-right: 0.4rem;}
.wth_sliRight .first_li.slick-slide{position: relative; }

/**
.wth_sliRight .first_li.slick-slide[data-slick-index="0"]:after{background-color: #fff; width: 100%; height:100%; content:""; display: block; cursor: default; position: absolute; left:-100%; top:0; z-index: 22;}
.wth_sliRight .first_li.slick-slide[data-slick-index="0"]:before{background-color: #fff; width: 100%; height:100%; content:""; display: block; cursor: default; position: absolute; left:-200%; top:0; z-index: 22;}**/
.wth_sliRight.remove-padding{}
.wth_sliRight.remove-padding .slick-slide{}
.wth_sliRight.remove-padding .first_li.slick-slide:after,
.wth_sliRight.remove-padding .first_li.slick-slide:before{display: none;}


/**slick事例デザインセット**/
[class*="case"][class*="_SlDes"]{}
[class*="case"][class*="_SlDes"] li{ }
[class*="case"][class*="_SlDes"] li a{display: block; aspect-ratio: 1 / 1; position: relative; }
[class*="case"][class*="_SlDes"] li a:hover{opacity:1;}
[class*="case"][class*="_SlDes"] li a img{ }
[class*="case"][class*="_SlDes"] li a .slcase_txt{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; font-size: var(--font-S); color: #fff; gap: 0.75rem; background-color: rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease; padding: 1.6rem;}
[class*="case"][class*="_SlDes"] li a:hover .slcase_txt{background-color: rgba(0, 0, 0, 0.0);}
[class*="case"][class*="_SlDes"] li a .slcase_title{font-size:var(--font-L); }
[class*="case"][class*="_SlDes"] li a .slcase_user{font-size:var(--font-S); padding-right: 2em;}
[class*="case"][class*="_SlDes"] .slick-track{display:flex; gap: 0.2rem;}
.square_group + [class*="case"][class*="_SlDes"]{margin-top: 0.2rem;}


@media screen and (max-width: 760px) {
    /**slickカスタマイズ**/
    [class*="_SlDes"] .slick-list li.slick-slide img{ }
    [class*="_SlDes"] [class*="arrow-"]{ top: 0; bottom: 0; width: 1.25em; height: 1.25em; }
    [class*="_SlDes"] [class*="arrow-"]:before{ }
    [class*="_SlDes"] .arrow-prev{}
    [class*="_SlDes"] .arrow-next{}
    [class*="_SlDes"] .uniq-dots{bottom: 7rem; padding: 0 3em; gap: 1rem 4%;}
    [class*="_SlDes"] .uniq-dots li{ height: 0.5em; width: 22%;}
    [class*="_SlDes"] .uniq-dots li button{}
    [class*="_SlDes"] .uniq-dots li.slick-active button{ }

    /**slick右寄せデザインセット**/
    [class*="RightAli"][class*="_SlDes"]{width: 100%;}
    [class*="RightAli"][class*="_SlDes"]:after{width: 1.6rem;}
    [class*="RightAli"][class*="_SlDes"] li{ }
    [class*="RightAli"][class*="_SlDes"] li>a,
    [class*="RightAli"][class*="_SlDes"] li>div{}
    [class*="RightAli"][class*="_SlDes"] li a:hover{}
    [class*="RightAli"][class*="_SlDes"] li .event_img{}
    [class*="RightAli"][class*="_SlDes"] li .event_img:after{}
    [class*="RightAli"][class*="_SlDes"] li a:hover .event_img:after{background-color: rgb(0 0 0 / 50%);}
    [class*="RightAli"][class*="_SlDes"] li .event_img img{}
    [class*="RightAli"][class*="_SlDes"] li .event_txt{ font-size: var(--font-S); padding: 1em 2.5em 1em 1em; background-position: right 1rem bottom 1rem; background-size: 1rem auto; }
    [class*="RightAli"][class*="_SlDes"] li a:hover .event_txt{}

    /**slick右寄せデザインセットCustmize01**/
    [class*="RightAli"][class*="_Staff"][class*="_SlDes"]{opacity:1; display: flex; flex-wrap: wrap; gap:0.4rem;}
    [class*="RightAli"][class*="_Staff"][class*="_SlDes"]:after{display: none;}
    [class*="RightAli"][class*="_Staff"][class*="_SlDes"] li{ width:calc(50% - 0.2rem); max-width: initial; margin-right: 0; padding-right: 0; padding-bottom: 8rem;}
    [class*="RightAli"][class*="_Staff"][class*="_SlDes"] li:nth-last-child(-n+2){ padding-bottom: 0;}
    [class*="RightAli"][class*="_Staff"][class*="_SlDes"] li .event_img{ }
    [class*="RightAli"][class*="_Staff"][class*="_SlDes"] li .event_txt{padding: 0.75em 0.25em; background-image:none!important;}
    [class*="RightAli"][class*="_Staff"][class*="_SlDes"] li .event_txt small{display: block; font-size: var(--font-SS); margin-left: 0;}

    /**slick事例デザインセット**/
    [class*="case"][class*="_SlDes"]{}
    [class*="case"][class*="_SlDes"] li{ }
    [class*="case"][class*="_SlDes"] li a{ }
    [class*="case"][class*="_SlDes"] li a:hover{opacity:1;}
    [class*="case"][class*="_SlDes"] li a img{ }
    [class*="case"][class*="_SlDes"] li a .slcase_txt{font-size: var(--font-S); padding: 0.9rem;}
    [class*="case"][class*="_SlDes"] li a:hover .slcase_txt{}
    [class*="case"][class*="_SlDes"] li a .slcase_title{font-size:var(--font-S); line-height: 1.2;}
    [class*="case"][class*="_SlDes"] li a .slcase_user{font-size:var(--font-SS); line-height: 1.2;}
    [class*="case"][class*="_SlDes"] .slick-track{}
    .square_group + [class*="case"][class*="_SlDes"]{}

}