@charset "utf-8";
.thumb_slide{
    --repeat:6;
    // width: 100%;
    // margin-top: 20px;
    
    @include tab{
        width: 100%;
    }
    @include tab{--repeat:4;}
    @include bp480{--repeat:3;}
    // flex: 1;
    // img{
    //     border-radius: 10px;
    // }
    .slick-track{
        display: block;
    }
	.slick-slide{ //li
        margin: unset;
        padding-inline: unset;
		img{
			width: 100%!important;
            // aspect-ratio: 4/3;
            object-fit: contain;
            
		}
	}
	ul.slick-dots{
        --g:1.5vmin;
        transform: unset;
        margin-top: var(--g);
        display: grid;
        grid-template-columns: repeat(var(--repeat), 1fr);
        grid-template-rows: auto;
        gap: var(--g);
        position: unset !important;
        @include sp{
            grid-template-columns: repeat(3, 1fr);
        }
        
	}
	ul.slick-dots li{ //サムネの１枚
        margin: 0;
        // margin-right: 10px;margin-bottom: 10px;
    	height: auto!important;
        width: 100%;
        // flex: 0 0 25%;
		// width: calc(100% / 5 - 10px);
        @include bp960{
            // flex-basis: 33.33%;
            // width: calc(100% / 4 - 10px);
        }
        img{
            object-fit: cover;
            // aspect-ratio: unset!important;
            // height: var(--dotH)!important;
            // max-height: var(--dotH);
            // border-radius: 5px;
        }
	}
    --dotH: 14vh;
    --arrowW: 5vmin;
    --dotsBottom: calc(var(--dotH)/2 - var(--arrowW)/2 );
    --pad: 3%;
    --arrowPosition:103%;
    @include tab{
        --arrowPosition:110%;
        
    }
    .slick-prev{
		left: -2vmin;
        left: unset;
        right: var(--arrowPosition);
	}
	.slick-next{
		right: -2vmin;
        right: unset;
        left: var(--arrowPosition);

	}
	.slick-prev, .slick-next{
        // color: var(--ff);
        font-family: var(--icon);
        font-weight: 900;
        z-index: 10;
        background-color: var(--arrowBG);
        border-radius: var(--arrowR);
        width: var(--arrowW);height: var(--arrowW);
        opacity: .5;
        top: unset;
        bottom: var(--dotsBottom);
        transform: none;
        &:hover{
            opacity: 1;
        }
        
	}
    --arrowC: #000;
    --arrowBG: #fff;
    --arrowR: 1000px;
    --arrowFZ: 3vmin;

	.slick-prev:before, .slick-next:before{
		color: var(--arrowC)!important;
		font-size: var(--arrowFZ);
        font-family: var(--icon);
        font-weight: 900;
        opacity: 1;
        content: var(--btnAF);
        // display: none!important;
        @include bp480{
        }
    }
    .slick-prev{scale: -1 1;}
}
[class*=fl] > .slide_custom{
    ul li{width: 100%;}
    ul li img{width: 100%!important;}
    @include tab{
        order: 1;        
    }
}
:not([class*=img]).slide_custom .slick-dots img:is(#contents *){
    aspect-ratio: 1;
}
.slide_sync{
    --g:3vmin;
    gap: 2em var(--g);
    .main{
        &.noArrow .slick-arrow{display: none!important;}
        .slick-prev, .slick-next{
            width: 40px;
            height: 60px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 0;
            top: 100%;
            transform: translate(0, -100%);
            z-index: 1;
            &::before{
                opacity: 1;
                font-family: var(--icon);
                color: var(--mc);
                font-weight: 900;
                font-size: 24px;
            }
        }
        .slick-prev{
            left: 0;
            &::before{
                content: '\f104';
            }
        }
        .slick-next{
            right: 0;
            &::before{
                content: '\f105';
            }
        }
        li{
            img:is(#contents *){
                width: 100% !important;
                // @include of-cover;
            }

        }
    }
    .thumb ul{
        --repeat:4;
        @include sp{--repeat:3;}
        display: grid;
        grid-template-columns: repeat(var(--repeat), 1fr);
        grid-template-rows: auto;
        gap: var(--g);
        position: unset !important;
        li{
            // width: 32%;
            cursor: pointer;
            // margin-bottom: 10px;

            img{
                transition: 0.3s;
                width: 100% !important;
                // @include of-cover;
            }
            &:hover{
                img{
                    opacity: 0.9;
                }
            }
        }
    }
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.ul_slide:is(section div){
    &.noDetail .detail{display: none!important;}
    &.noTag .blog_text ul{display: none!important;}
    &.noDot :is(.slick-dots, .slick-arrow){display: none!important;}
    &.noArrow .slick-arrow{display: none!important;}
    &:after{display: none;}
    &.noDate .blog_date{display: none!important;}
    padding-inline: unset;
    max-width: calc(100% + var(--g));
    margin-right: calc(var(--g)*-1 );
    .slick-list{
        overflow: hidden;
        border-radius: var(--rad);
        li{
            border-radius: var(--rad);
            margin-right: var(--g);
        }
        &.layer{
            article{
                display: grid;place-items: center;
            }
        }
    }
    img:is(#contents img){
        width: 100%;
        object-fit: cover;
    }
    // **********sns同型**********
    .slick-prev{
		left: calc(var(--g)*.0);
	}
	.slick-next{
        right: calc(var(--g)*1);
        // @include bp1200{right: 5%;}
        // @include tab{right: 5%;}
        // @include bp480{right: 5%;}
	}
	.slick-prev, .slick-next{
		z-index: 1;

        font-size: 2em;
        width: 1.5em;
        height:  1.5em;
        top: 50%;
        transform: translateY(-50%);
        &:is(.noText *){top: 50%;}
	}
	.slick-prev:before, .slick-next:before{
		color: var(--ff);
        font-size: inherit;
        font-family: var(--icon);
        display: inline-block;
        content: "\f054";
        font-weight: 900;
    }
    .slick-prev:before {
        scale: -1 1;
    }
    // &:has(.slick-dots):not(.noDot){
    //     padding-block-end: calc( var(--dot)*2 );
    // }
    --dot: 20px;
    .slick-dots li{
        width: var(--dot);
        height: var(--dot);
    }
    .slick-dots li button{
        // display: grid;place-items: center;
        width: var(--dot);
        height: var(--dot);
    }
    .slick-dots li button:before{
        // width: var(--dot);
        // height: var(--dot);
        position: unset;
        font-size: calc(var(--dot)/2 );
    }
    .slider p {
        font-size: 2rem;
        font-weight: bold;
        line-height: 100px;
        color: #666;
        margin: 10px;
        text-align: center;
        background-color: #e0e0e0;
    }
    .buttons {
        display: flex;
        justify-content: center;
    }

    .buttons .button {
        margin: 8px;
        border: 1px solid #000;
        color: #000;
        padding: 8px;
        text-align: center;
        width: 8em;
        transition: all 300ms ease;
    }

    .buttons .button:hover {
    cursor: pointer;
        background-color: var(--ac);
        color: #fff;
        transition: all 300ms ease;
    }
    .slick-dots li.slick-active button:before{
        color: var(--mc);
    }
    .slick-dots{
        width: fit-content;
        left: 50%;transform: translateX(-50%);
        bottom: unset;top: calc(100% );
        display: flex;
        justify-content: center;
    }
    .slick-dots li button{
        outline: none;
    }
    
}
.toright,.toleft{
    .slick-list{
        overflow: visible;
    }
    .im{
        padding: 3.33%;
        
    }
    img{
        width: 100%!important;
        height: 100%!important;
        object-fit: cover;
        // border-radius: 8px;
        aspect-ratio: 4/3;
        background: url(/images/home/Gframe.png) no-repeat center/100% 100%;
        padding: 6.5% 1%;
    }
}

.thumb_slide.__scroll{
    --num:5;
    --minus:calc(var(--num) - 1 );
    @include tab{--num:4;}
    &.col3{--num:3;}
    &.col4{--num:4;}
    &.col5{--num:5;}
    &.col6{--num:6;}
    &.col7{--num:7;}
    &.col5,
    &.col6,
    &.col7{
        @include tab{
            --num:4;
        }
    }
    .scroll-hint-icon-wrap{
        height: 15vh;
        top: unset; bottom: 0;
    }
    img:is(#contents *){
        // aspect-ratio: 1;
        // object-fit: cover;
        max-height: calc(66vh );
        background-color: #fff; 
    }
    ul.slick-dots{
        @extend %scrollBarX;
        --g:5%;
        transform: unset;
        margin-top: var(--g);
        display: flex;
        gap: var(--g);
        position: unset !important;
        overflow-x: scroll;
        width: 100%;
        justify-content: flex-start;
        li{
            flex:1 0 calc((100% - var(--g)*var(--minus)) / var(--num));
        }
        @include sp{
            grid-template-columns: repeat(3, 1fr);
        }
        img:is(#contents *){
            // aspect-ratio: 1;
            object-fit: contain;
            max-height: calc(15vh );
            background-color: #fff; 
        }
	}
}
.thumb_slide{
    --repeat:6;
    // width: 100%;
    // margin-top: 20px;
    
    @include tab{
        width: 100%;
    }
    @include tab{--repeat:4;}
    @include bp480{--repeat:3;}
    // flex: 1;
    // img{
    //     border-radius: 10px;
    // }
    .slick-track{
        display: block;
    }
	.slick-slide{ //li
        margin: unset;
        padding-inline: unset;
		img{
			width: 100%!important;
            // aspect-ratio: 4/3;
            object-fit: contain;
            
		}
	}
	ul.slick-dots{
        --g:1.5vmin;
        transform: unset;
        margin-top: var(--g);
        display: grid;
        grid-template-columns: repeat(var(--repeat), 1fr);
        grid-template-rows: auto;
        gap: var(--g);
        position: unset !important;
        @include sp{
            grid-template-columns: repeat(3, 1fr);
        }
        
	}
	ul.slick-dots li{ //サムネの１枚
        margin: 0;
        // margin-right: 10px;margin-bottom: 10px;
    	height: auto!important;
        width: 100%;
        // flex: 0 0 25%;
		// width: calc(100% / 5 - 10px);
        @include bp960{
            // flex-basis: 33.33%;
            // width: calc(100% / 4 - 10px);
        }
        img{
            object-fit: cover;
            // aspect-ratio: unset!important;
            // height: var(--dotH)!important;
            // max-height: var(--dotH);
            // border-radius: 5px;
        }
	}
    --dotH: 14vh;
    --arrowW: 5vmin;
    --dotsBottom: calc(var(--dotH)/2 - var(--arrowW)/2 );
    --pad: 3%;
    --arrowPosition:103%;
    @include tab{
        --arrowPosition:110%;
        
    }
    .slick-prev{
		left: -2vmin;
        left: unset;
        right: var(--arrowPosition);
	}
	.slick-next{
		right: -2vmin;
        right: unset;
        left: var(--arrowPosition);

	}
	.slick-prev, .slick-next{
        // color: var(--ff);
        font-family: var(--icon);
        font-weight: 900;
        z-index: 10;
        background-color: var(--arrowBG);
        border-radius: var(--arrowR);
        width: var(--arrowW);height: var(--arrowW);
        opacity: .5;
        top: unset;
        bottom: var(--dotsBottom);
        transform: none;
        &:hover{
            opacity: 1;
        }
        
	}
    --arrowC: #000;
    --arrowBG: #fff;
    --arrowR: 1000px;
    --arrowFZ: 3vmin;

	.slick-prev:before, .slick-next:before{
		color: var(--arrowC)!important;
		font-size: var(--arrowFZ);
        font-family: var(--icon);
        font-weight: 900;
        opacity: 1;
        content: var(--btnAF);
        // display: none!important;
        @include bp480{
        }
    }
    .slick-prev{scale: -1 1;}
}
#c82 {
	clear: both;
	background-color: var(--title1);
	background-image: url(../images/home/title1.jpg);
	margin:    ;
	padding:    ;
}
#c89 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c89 h3,
#c89 div {
	text-align: left;
}
#c132 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c132 h2,
#c132 div {
	text-align: center;
}
#c139 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c140 {
	clear: both;
	margin:    ;
	padding:    ;
	width: 40%;
}
#c140 ul li {
	list-style-type: none;
	text-align: left;
	float: left;
	box-sizing: border-box;
	overflow: hidden;
}
#c140 ul li { margin-right: px; }
#c140 ul li:last-child { margin-right: 0; }
#c140 > ul li:nth-of-type(2) img {
	width: 2482px;
}
#c140 > ul li:nth-of-type(3) img {
	width: 2482px;
}
#c140 > ul li:nth-of-type(4) img {
	width: 2482px;
}
#c138 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c133 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c91 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c91 h2,
#c91 div {
	text-align: left;
}
#c95 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c95 a.itext, #c95 img, #c95 video {
	width: 800px;
	height: 604px;
}
#c95 h3,
#c95 div {
	text-align: left;
}
#c136 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c137 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c137 h2,
#c137 div {
	text-align: left;
}
#c122 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c122 dl dt {
	width: 20%;
}
#c122 dl dd {
	width: 80%;
}
#c135 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c134 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c134 h2,
#c134 div {
	text-align: left;
}
#c123 {
	clear: both;
	margin:    ;
	padding:    ;
}
#c123 h3,
#c123 div {
	text-align: left;
}
#c97 {
	clear: both;
	display: none;
	margin: 30px 0  ;
	padding:    ;
}
#c97 {
	flex-direction: row;
	flex-wrap: wrap;
}
#c97 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c97 > div:nth-of-type(1) img {
	width: 400px;
}
#c97 > div:nth-of-type(2) img {
	width: 300px;
}
#c97 > div:nth-of-type(3) img {
	width: 400px;
}
#c119 {
	clear: both;
	display: none;
	margin: 30px 0  ;
	padding:    ;
}
#c119 {
	flex-direction: row;
	flex-wrap: wrap;
}
#c119 > div.box {
	box-sizing: border-box;
	overflow: hidden;
}
#c119 > div:nth-of-type(1) img {
	width: 400px;
}
#c119 > div:nth-of-type(2) img {
	width: 300px;
}
#c119 > div:nth-of-type(3) img {
	width: 400px;
}
#c119 > div:nth-of-type(4) img {
	width: 400px;
}
@media screen and (min-width: 641px) and (max-width: 834px) {
#c82 {
}
#c89 {
}
#c132 {
}
#c139 {
}
#c140 {
	width: auto;
	max-width: 40%;
}
#c138 {
}
#c133 {
}
#c91 {
}
#c95 {
}
#c136 {
}
#c137 {
}
#c122 {
}
#c135 {
}
#c134 {
}
#c123 {
}
#c97 {
	display: none;
}
#c97 {
}
#c119 {
	display: none;
}
#c119 {
}
}
@media screen and (max-width: 640px) {
#c82 {
}
#c89 {
}
#c132 {
}
#c139 {
}
#c140 {
	width: 100%;
}
#c138 {
}
#c133 {
}
#c91 {
}
#c95 {
}
#c136 {
}
#c137 {
}
#c122 {
}
#c135 {
}
#c134 {
}
#c123 {
}
#c97 {
	display: none;
}
#c97 {
}
#c119 {
	display: none;
}
#c119 {
}
}