body {
    margin: 0;
}

/* 画像表示部分全体のレイアウト */
.carousel {
    position: relative;    /* 画像位置の基準に指定(1) */             
    width: 100vw;
    height:96vh;
    margin: 0 auto;         /* 左右の余白を自動計算（画面中央に配置） */
    overflow: hidden;       /* はみ出さないようにする */
    background-color: #fff;
	margin-top: 50px;
}

/* 画像の羅列部分 */
.slides {                 
    position: relative;     /* 画像位置の基準に指定(2) */
    width:100%;
    height:100%;
	overflow: hidden;
	
}

/* 全画像共通設定 */
.slide {
    position: absolute;     /* 基準場所(2)に配置 (個々の画像が全部同じ場所に表示される) */
    inset: 0;               /* 範囲100%に設定 */
    display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    transition: transform 0.7s ease,opacity 0.7s ease;      /* transform(画像の変化)と、画像の不透明度は0.7秒かけて変化する */
	background-repeat: no-repeat;
	background-position: center;
}

/* ここから諸々の画像モードのレイアウト */
/* 表示モード */
.slide.current{
    transform: translateX(0)scale(1);
}
/* 右待機モード */
.slide.standby-right {
    transform:translateX(200%)scale(0.7);       /* X軸正の方向（右）へslide（画像）横幅の200%だけ、画像サイズを半分にしながら移動 */
}
/* 左待機モード */
.slide.standby-left {
    transform:translateX(-200%)scale(0.7);
}
/* 非表示モード */
.slide.instant {
    transition: none !important;
}
/* 縮小モード */
.slide.shrink{
    transform: translateX(0)scale(0.7);
}
/* 表示移動モード（画面外から画面の中央へ移動するモード） */
.slide.center-small {
    transform: translateX(0)scale(0.7);
}
/* モードここまで */

/* 個々の画像への個別設定（他の設定がない場合削除推奨） */
.slide1 {                   
}

.slide2 .slide-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.slide3 {
        background-image: url("../images/topimages/xect-image.png");
	background-size: cover;
}

.slide4 {
   background-image: url("../images/topimages/main-top-pc.png");
	background-size: cover;
}



/* 字幕のレイアウト */
.caption {
    position: absolute;
    left: 10%;
    bottom: 120px;
    opacity: 1;
    color: white;
    font-size: 30px;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.7s ease,transform 0.7s ease;
}

/* ここから字幕の諸々のモードのレイアウト */
/* 表示モード */
.caption.current {
    left: 10%;
}
/* 左待機モード */
.caption.standby-left {
    transform: translateX(calc(-50% - 100vw));
}
/* 右待機モード */
.caption.standby-right {
    transform: translateX(calc(-50% + 100vw));
}
/* 非表示モード */
.caption.instant {
    transition: none !important;
}

/* ここまで */

/* 画像下部の諸々の操作機構全体のレイアウト */
.controls{
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 24px;
    width: min(1200px, 90%);
    z-index: 10;
}

/* 動作切り替えボタン */
.toggle-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(10px);
    color:#0D6EB8;
    font-size: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
    flex-shrink: 0;
}

.toggle-btn:hover {
    background: rgba(255,255,255,.3);
    transform: scale(1.08);
}

.toggle-btn:active {
    transform: scale(0.95);
}

.progress-container {
    width: calc(90% - 80px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 40px;
    overflow: hidden;
}

/* 画像遷移ボタンの設定 */
.progress-container button{
    width: 10px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background-color: rgba(13,110,184,.85);
    cursor: pointer;
    transition: .3s;
}

.progress-container button:hover{
    background: white;
    transform: scale(1.2);
}

.progress-container button:active {
   background: white;
    transform: scale(1.4);
}

.segment{
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,.25);
    border-radius: 999px;
    overflow: hidden;
}

.segment-bar{
    width: 0;
    height: 100%;
    background: #0D6EB8;
}
/* タブレット */
@media screen and (max-width: 1024px) {
	.carousel{
			margin-top: 0px;
		height:100vh;
	}

	.slide2 .slide-video{
		 transform: scale(1.15);
}

.slide3 {
background-size: 150%;
}

.slide4 {
	background-size: contain;
}
	
}

/* スマホ */
@media screen and (max-width: 767px) {
	  
	.slide2 .slide-video{
       transform: scale(1.3);
}


.slide4 {
background-size: cover;
background-image: url("../images/topimages/main-top-sp.png");
}


}