@charset "UTF-8";

/* その他（タブレットなど） */
@media (min-width: 576px) {
	.tab-content--extend {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.tab-content--extend {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.tab-content--extend {
		max-width: 960px;
	}
}

/* PC */
@media screen and (min-width: 1081px) { /* Galaxy A24 5G,Pixel 8 などが1080pxのため */
	/* ブラウザのキャッシュ用に背景画面を設定 */
	body {
		background: #ffffff;
		background-image: url(../../portal/img/bg_main_01.svg);
		background-repeat: no-repeat;
		background-size: cover;
	}

	/*PC側の背景画面の固定*/
	body::before {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100vh; /* フォールバック */
		height: 100dvh;
		background: #ffffff;
		background-image: url(../../portal/img/bg_main_01.svg);
		background-repeat: no-repeat;
		background-size: cover;
	}

	/* モーダル表示時のposition:fixed対応 */
	body.modal-open {
		overflow-y: scroll !important;
		padding: 0 !important;
	}

	/*PC用は横幅固定*/
	.areaBg {
		/*width: 473px;*/
		width: 400px;
		background-color: #fff;
		margin-right: 10%;
		margin-left: auto;
	}

	/*背景を固定する疑似要素を削除*/
	.areaBg.areaBgTop::before {
		content: none;
	}

	/*背景を固定する疑似要素を削除*/
	.areaBg.areaBgMain::before {
		content: none;
	}

	/*背景を作成(アニメーションactbgはtheme.cssで指定)*/
	.areaBg.areaBgTop {
		background-color: #fff;
		background-image: url(../../portal/img/bg_parts_yellow.svg), url(../../portal/img/bg_parts_blue.svg), url(../../portal/img/bg_parts_red.svg);
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-size: 1000px 2500px, 800px 2500px, 800px 1500px;
		background-position: bottom -1550px left -300px, bottom -1200px left -350px, bottom -650px right -300px;
		animation: actbg 3s infinite alternate ease-in-out;
	}
	
	.areaBg.areaBgMain {
		background-image: url(../../portal/img/bg_gradation_04.svg);
		background-position: top center;
	}

	.areaBg.areaBgMain.show {
		background-color: rgba(0, 0, 0, 0.2);
	}
	
	.bgTitle,
	.areaBg,
	.footerMenu,
	.areaInputCmnt,
	.areaReaction,
	.tab-content--extend {
		width: 400px;
	}

	.bgTitle {
		display: block !important;
		position: fixed;
		bottom: 100px;
		left: 100px;
		color: var(--text-color-tertiary);
		font-weight: 400;
	}

	.bgTitle img,
	.bgTitle svg {
		margin-bottom: 25px;
	}

	.footerMenu,
	.areaInputCmnt,
	.areaReaction {
		left: auto;
	}

	.mainScrollHead {
		display: none;
	}

	.poster {
		max-width: 85%;
	}

	.plusBtnArea {
		right: 10.5vw;
	}
}

/* スマートフォン */
@media only screen and (max-width: 576px) {
	.modal-dialog--extend {
		margin: 0;
	}

	.modal-dialog--extend .modal-content {
		border-radius: 24px 24px 0 0;
	}

	.modal-dialog--extend {
		height: 100%;
		align-items: end;
	}

	.modal.fade .modal-dialog--extend {
		transition: transform 0.6s ease-in-out;
		transform: translateY(100%);
	}

	.modal.show .modal-dialog--extend {
		transform: translateY(0);
	}

	.tab-content--extend {
		width: 100vw; /* 縦スクロールバー考慮なし */
	}

}

/* タッチスクリーンでない場合（PC） */
/* スクロールバーを表示 */
/* FirefoxはWin11の設定（視覚効果）のスクロールバー常時表示ON/OFFの設定が影響するが、CSSでの対応方法はない */
.scrollBox {
	padding-bottom: 4px;
}

.scrollBox::-webkit-scrollbar {
	display: block;
	background: transparent;
	height: 10px;
}

.scrollBox::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.1);
	border-radius: 20px;
}

/* タッチスクリーンの場合 */
/* スクロールバーを非表示 */
.touch-device .scrollBox::-webkit-scrollbar {
	display: none;
}