/*---------- スライダー start ----------*/

/* ========== memo start ==========

#.bl_everyone用のカスタム設定は3箇所（画像の比率 aspect-ratio違い）

# youtubeを入れる場合の参考htmlソース
<!-- ========================= -->
<!-- スライド 1 -->
<!-- ========================= -->
	<article class="carousel-item">
	<div class="slide-name">Vol.01　そうすけ君　平野校</div>
	<div class="slide-fukidashi">
		<div class="slide-title">小2で暗算名人。</div>
		<div class="slide-text">3年10カ月で最高ステージ「X12」クリア！</div>
	</div>
	<!-- 画像リンクの場合 -->
	<a class="slide-media" href="https://www.instagram.com/reel/DbVK0iAhMyv/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==&igsi=MzRlODBiNWFlZA==
	" target="_blank" rel="noopener">
	  <img src="images/everyone_01.jpg" alt="" />
	</a>

	<!-- YouTube動画を表示する場合画像の代わりにiframeを入れます。-->
	<!--<div class="slide-media slide-video">
	  <iframe
		src="https://www.youtube.com/embed/動画ID"
		title="YouTube動画"
		allow="
		  accelerometer;
		  autoplay;
		  clipboard-write;
		  encrypted-media;
		  gyroscope;
		  picture-in-picture;
		  web-share;
		"
		allowfullscreen
	  ></iframe>
	</div>-->
	<!-- /YouTube動画... -->

	</article>

<!-- ========================= -->
<!-- /スライド 1 end -->
<!-- ========================= -->

========== /memo end ========== */



/* =========================================
   セクション
========================================= */

.carousel-section {
    width: 100%;
    padding: 0 0 80px;
}


/* =========================================
   カルーセル全体
========================================= */

.carousel-container {
    position: relative;
    width: calc(100% - 160px);
    max-width: 1280px;
    margin: 0 auto;
}


/* =========================================
   スライド表示領域
========================================= */
.carousel-viewport-wrap {
	display: block;
	border: solid var(--color-yellow) 9px;
	border-radius: 25px;
	padding: 60px;/*-枠内padding-*/
	margin: auto 25px;
	background-color: #fff;
}
.carousel-viewport {
    width: 100%;
    overflow: hidden;
}


/* =========================================
   スライドを横並びにする
========================================= */

.carousel-track {
    display: flex;
    gap: 24px;
    will-change: transform;
    touch-action: pan-y;
}


/* =========================================
   各スライド
========================================= */

.carousel-item {
    /*
        JavaScriptで
        1枚 / 2枚 / 3枚
        の幅を設定します。
    */
    flex: 0 0 calc(
        (100% - 48px) / 3
    );
    min-width: 0;
    padding: 0;
	text-align: center;
}



/* =========================================
   タイトル集合
========================================= */
.slide-name {
	display: inline-block;
	padding: 0.5em 1.25em;
	font-size: 12px;
	font-weight: bold;
	border: solid 4px var(--color-yellow);
	background-color: #fff;
	color:#000;
	text-align: center;
	line-height: 1;
	border-radius: 15px;
	position: relative;
	z-index: 1;
}
.slide-fukidashi {
	display: block;
	position: relative;
	padding: 1em 0.5em 0.5em;
	background-color: var(--color-yellow);
	color:#000;
	border-radius: 20px;
	margin-top: -0.6em;
	max-height: 54px;/*追加*/
}
.slide-fukidashi:after {
	content:'';
	position: absolute;
	 width: 20px;
	height: 10px;
	background-color: var(--color-yellow); /* 三角形の色 */
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	bottom:-10px;
}
.slide-fukidashi .slide-title {
    margin-bottom: 7px;
    font-size: 22px;
	font-size: clamp(16px,1.7vw,22px);
    font-weight: 700;
    line-height: 1.2;
	letter-spacing: 0;
}
/*テキスト*/
.slide-fukidashi .slide-text {
    font-size: 14px;
	font-size: clamp(10px,1.1vw,14px);
	font-weight: bold;
    line-height: 1.2;
	letter-spacing: 0;
}


/* =========================================
   メディア
========================================= */

.slide-media {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 22px;
	background-color: #ccc;
	margin-top: 22px;
	aspect-ratio:400 / 234;
}
/*----- .bl_everyoneカスタム設定 */
.bl_everyone .slide-media {
	aspect-ratio: 33 / 59;
	box-sizing: border-box;
	/*グラデ背景*/
	background: linear-gradient(322deg,rgba(79, 91, 213, 1) 0%, rgba(243, 60, 161, 1) 50%, rgba(255, 139, 88, 1) 100%);
}


/* =========================================
   画像
========================================= */

.slide-media img {
    display: block;
    width: 100%;
    height: auto;
	
	/*デフォルト 縦横比*/
    aspect-ratio: 16 / 9;

    object-fit: cover;
    transition: transform 0.3s ease;
}
/*----- .bl_everyoneカスタム設定 */
.bl_everyone .slide-media .el_imageFrame {
	/*枠無しの標準設定
	aspect-ratio: 33 / 59;
	height: 100%;*/
	/*擬似borderのために、画像領域は縮小*/
	width: calc(100% - 18px);
	height: calc(100% - 18px);
	position: absolute;
	top:9px;left:9px;
	border-radius: 16px;
	overflow: hidden;
}
.bl_everyone .slide-media img {
	aspect-ratio: 33 / 59;
	height: 100%;
}

/* =========================================
   画像リンクのホバー
========================================= */

a.slide-media:hover img {
    transform: scale(1.04);
}


/* =========================================
   YouTube
========================================= */

.slide-video {
    aspect-ratio: 16 / 9;
    background-color: #000;
}
/*----- .bl_everyoneカスタム設定 */
.bl_everyone .slide-video {
	aspect-ratio: 33 / 59;
}

.slide-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


/* =========================================
   左右ナビゲーションボタン
========================================= */

.carousel-button {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 56px;
    height: 56px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background-color: #ffd600;
    color: #ffffff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


/* =========================================
   左ボタン
========================================= */

.carousel-button-prev {
    left: -50px;
}
.carousel-button-prev > span {
	content: '';
	width: 11px;
	height: 11px;
	border-top: solid 2px #fff;
	border-left: solid 2px #fff;
	position: absolute;
	left: 23px;
	transform: rotate(-45deg);
	top: 21px;
}

/* =========================================
   右ボタン
========================================= */

.carousel-button-next {
    right: -50px;
}
.carousel-button-next > span {
	content: '';
	width: 11px;
	height: 11px;
	border-bottom: solid 2px #fff;
	border-right: solid 2px #fff;
	position: absolute;
	right: 23px;
	transform: rotate(-45deg);
	top: 21px;
}

/* =========================================
   ボタンホバー
========================================= */

.carousel-button:hover {
    background-color: #f5c800;

    transform:
        translateY(-50%)
        scale(1.08);
}


/* =========================================
   ボタン無効状態
========================================= */

.carousel-button:disabled {
    opacity: 0.4;
    cursor: default;
}


/* =========================================
   タブレット //2コラム
   768px ～ 1099px //default 1099
========================================= */

@media screen and (max-width: 1280px) {
	.carousel-viewport-wrap {
		padding: 30px;/*-枠内padding-*/
	}
    .carousel-container {
        width: calc(100% - 120px);
    }
    .carousel-item {
        flex-basis: calc(
            (100% - 24px) / 2
        );
    }
    .carousel-button-prev {
        left: -60px;
    }
    .carousel-button-next {
        right: -60px;
    }
}


/* =========================================
   スマートフォン
   767px以下 //1114で切り替え
========================================= */

@media screen and (max-width: 767px) {
	.carousel-viewport-wrap {
		padding: 15px;/*-枠内padding-*/
	}
    .carousel-section {
        padding: 50px 0;
    }
    .carousel-container {
        width: calc(100% - 30px);
    }
    .carousel-track {
        gap: 15px;
    }

    .carousel-item {
        flex-basis: 100%;
        padding: 0px;
        border-radius: 0px;
		/*---*/
		flex: 0 0 calc(
			(100% - 24px)
		);
    }

    .slide-title {
        font-size: 20px;
    }

    .slide-text {
        font-size: 14px;
    }

    /*
        スマホでは矢印を
        枠外に少しだけ配置
    */
    .carousel-button {
        width: 44px;
        height: 44px;
        font-size: 30px;
    }

    .carousel-button-prev {
        left: -10px;
    }

    .carousel-button-next {
        right: -10px;
    }
	.carousel-button-prev > span {
		left: 18px;
		top: 14px;
	}
	.carousel-button-next > span {
		right: 18px;
		top: 14px;
	}

}
/*---------- スライダー end ----------*/