@charset "UTF-8";


/*---------------------------------------------------------------*\
$ranking
\*---------------------------------------------------------------*/

#ranking {
	padding: 100px 0 0;
	position: relative;
}

/* heading */
#ranking .subtitle_ranking {
	font-size: 15px;
}

#ranking .title_ranking {
	font-size: 44px;
	letter-spacing: -1px;
}

/* tabs */
input[name="parent_tab_item"],
input[name="child_tab_item"],
input[name="child_tab_item_alone"] {
	display: none;
}

#ranking .parent_tabs,
#ranking .child_tabs {
	display: flex;
	flex-wrap: wrap;
}

#ranking .parent_tabs {
	width: 96%;
	margin: 32px auto 0;
}

#ranking .child_tabs {
	width: 100%;
}

.parent_tab_item {
	width: calc(100%/3);
	height: 40px;
	background-color: #fafafa;
	font-size: 11px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	float: left;
	text-align: center;
	transition: all 0.2s ease;
}

.parent_tab_item:last-of-type {
	font-size: 10px;
}

.tab_content {
	display: none;
	width: 100%;
	margin: 28px 0 0;
}

/*選択されているタブのコンテンツのみを表示*/
#award_2024:checked~#award_2024_content,
#all_livers:checked~#all_livers_content,
#rookie_livers:checked~#rookie_livers_content {
	display: block;
}

/*選択されているタブのスタイルを変える*/
.parent_tabs input:checked+.parent_tab_item {
	background-color: #000;
	color: #fff;
}



#ranking .child_tab_item {
	width: calc(100%/4);
	font-size: 10px;
	text-align: center;
	padding: 0 0 16px 0;
	display: block;
	transition: all 0.2s;
	border-bottom: solid 1px #fff;
}

#ranking .child_tab_item_alone {
	width: 100%;
	height: 48px;
	font-size: 12px;
	text-align: center;
	display: block;
	transition: all 0.2s;
	border-bottom: solid 1px #fff;
}

/*選択されているタブのコンテンツのみを表示*/
#ranking_spring:checked~#ranking_spring_content,
#ranking_loyal:checked~#ranking_loyal_content,
#ranking_platinum:checked~#ranking_platinum_content,
#ranking_gold:checked~#ranking_gold_content,
#ranking_annual:checked~#ranking_annual_content {
	display: block;
}

/*選択されているタブのスタイルを変える*/
.child_tabs input:checked+.child_tab_item {
	border-bottom: solid 1px #36d3ee !important;
}

.child_tabs input:checked+.child_tab_item_alone {
	border-bottom: solid 1px #36d3ee !important;
}

.child_tab_item_alone {
	display: none !important;
}

/* mention */
#ranking .mention {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#ranking .each_mention {
	font-size: 10px;
	display: flex;
	align-items: flex-start;
}

#ranking .each_mention dt {
	margin: 0 2px 0 0;
}

#ranking .each_mention dt,
#ranking .each_mention dd {
	line-height: 1.2;
	font-size: 13px;
}

#ranking .inner_content {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 32px 0 0;
}

#ranking .each_liver {
	width: calc((100% - 10px)/2);
	margin: 0 0 10px 0;
	position: relative;
}

#ranking .extend_list li:nth-of-type(n+9) {
	width: calc((100% - 30px)/4) !important;
}

#ranking .thumbnail {
	width: 100%;
	background-color: #eee;
	position: relative;
}

#ranking .each_liver:nth-of-type(1) .thumbnail {
	border: solid 3px #DBA454;
}

#ranking .each_liver:nth-of-type(2) .thumbnail {
	border: solid 3px #B9B9B9;
}

#ranking .each_liver:nth-of-type(3) .thumbnail {
	border: solid 3px #B4705B;
}

#ranking .each_liver:nth-of-type(1) .rank,
#ranking .each_liver:nth-of-type(2) .rank,
#ranking .each_liver:nth-of-type(3) .rank {
	color: transparent;
	background-color: inherit;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 44px;
	height: 36px;
	top: -20px;
	left: -8px;
	z-index: 2;
}

#ranking .each_liver:nth-of-type(1) .rank {
	background-image: url(../img/ranking/icon_gold_crown.png);
}

#ranking .each_liver:nth-of-type(2) .rank {
	background-image: url(../img/ranking/icon_silver_crown.png);
}

#ranking .each_liver:nth-of-type(3) .rank {
	background-image: url(../img/ranking/icon_bronze_crown.png);
}

#ranking .rank {
	font-size: 13px;
	position: absolute;
	z-index: 5;
	padding-bottom: 2px;
	top: -6px;
	left: -5px;
	width: 22px;
	height: 22px;
	background-color: #000;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#ranking .extend_list li:nth-of-type(n+9) .rank {
	font-size: 10px !important;
	width: 20px !important;
	height: 20px !important;
}

#ranking .extend_list li:nth-of-type(n+9) .name {
	font-size: 12px !important;
}

#ranking .name {
	margin: 8px 0 0;
}

#ranking .profile {
	font-size: 12px;
	margin: 4px 0 0;
}

#ranking .extend_list li:nth-of-type(n+9) .profile {
	font-size: 10px !important;
}

#ranking .app {
	position: absolute;
	bottom: 6px;
	right: 6px;
	width: 72px;
	height: 24px;
	display: flex;
	flex-direction: column;
	padding: 0 6px;
	justify-content: center;
}

#ranking .extend_list li:nth-of-type(n+9) .app {
	width: 48px !important;
	height: 16px !important;
	bottom: 4px !important;
	right: 4px !important;
}

/* button */
#ranking .button {
	height: 48px;
	margin: 56px auto 0;
	font-size: 14px;
	width: 100%;
}




/*---------------------------------------------------------------*\
$frame
\*---------------------------------------------------------------*/

#floating_cv {
	visibility: hidden;
}


@media screen and (max-width: 600px) {

	#floating_cv {
		visibility: visible;
	}
}


.boss {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	display: flex;
	align-items: start;
	justify-content: space-between;
	background-image: url('../img/top/pc_view_background.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}


.header_bar {
	background: rgba(255, 255, 255, .6);
	width: 120px;
	height: 100vh;
	padding: 40px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.header_bar .logo {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.header_bar .qr_line {
	width: 80px;
	margin: 0 auto;
}


.catchcopy {
	max-width: 580px;
	min-width: 500px;
	width: calc(95% - 780px);
	margin: 0 auto;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.catchcopy .logo {
	width: 80%;
}

.catchcopy .number {
	padding: 20px 4%;
	border-top: solid 1px #D2D2D2;
	border-bottom: solid 1px #D2D2D2;
}

.catchcopy .wrap_badge_avex {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.catchcopy .tag_badge_avex {
	font-size: 15px;
	margin-bottom: 4px;
}

.catchcopy .badge_avex {
	width: fit-content;
	padding: 0 12px 0 14px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	border-radius: 4px;
}

.catchcopy .logo_avex_fv {
	background-image: url(../img/top/icon_avex_fv.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 36px;
	height: inherit;
}

.catchcopy .text_logo_avex {
	background-image: url(../img/top/text_logo_avex.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 68px;
	height: inherit;
}


.blank_main_frame {
	position: relative;
	width: 440px;
	height: 100vh;
}


.main_frame {
	width: 440px;
	position: absolute;
	right: 220px;
	top: 56px;
	z-index: 10;
	border-radius: 20px 20px 0 0;
	overflow: clip;
}


.menu {
	width: 220px;
	height: 100vh;
	position: relative;
	padding: 64px 0 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.menu .tagline {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 13px;
}

.menu .menu_button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	font-size: 13px;
}

.menu .icon_twitter {
	width: 20px;
}


@media screen and (min-width: 1780px) {

	.header_bar {
		width: 200px;
	}

	.header_bar .logo {
		width: 18px;
	}

	.header_bar .qr_line {
		width: 110px;
	}

	.catchcopy {
		max-width: 700px;
		width: calc(100% - 940px);
	}

	.blank_main_frame {
		width: 480px;
		margin-right: 100px;
	}

	.main_frame {
		width: 480px !important;
		right: 300px;
	}

	.menu {
		width: 200px;
	}

	.menu:before {
		position: absolute;
		display: block;
		content: '';
		left: 0;
		top: 0;
		height: 100%;
		width: 1px;
		background: #d8d8d8;
	}
}


@media screen and (max-width: 1440px) {

	.catchcopy {
		max-width: 580px;
		min-width: 500px;
		width: calc(95% - 740px);
	}

	.blank_main_frame {
		width: 410px;
	}

	.main_frame {
		width: 410px;
		right: 180px;
	}

	.menu {
		width: 180px;
	}

	.menu .menu_button {
		width: 110px;
		height: 110px;
	}
}


@media screen and (max-width: 1280px) {

	.catchcopy {
		max-width: 500px;
		min-width: 420px;
		width: calc(95% - 580px);
	}

	.blank_main_frame {
		margin-right: 50px;
	}

	.main_frame {
		right: 50px;
	}

	.menu {
		display: none;
	}
}


@media screen and (max-width: 1160px) {

	.header_bar {
		width: 120px;
		border-right: solid 1px #d8d8d8;
		background-color: inherit;
	}

	.catchcopy {
		display: none;
	}

	.blank_main_frame {
		margin: 0;
	}

	.main_frame {
		right: 0px;
		left: 0;
		margin: auto;
	}

	.menu {
		display: flex;
		width: 120px;
	}

	.menu:before {
		position: absolute;
		display: block;
		content: '';
		left: 0;
		top: 0;
		height: 100%;
		width: 1px;
		background: #d8d8d8;
	}

	.menu .menu_button {
		width: 80px;
		height: 80px;
	}
}


@media screen and (max-width: 700px) {

	.main_frame {
		right: 0;
		left: 120px;
	}

	.menu {
		display: none;
	}
}


@media screen and (max-width: 590px) {

	.header_bar {
		width: 100px;
	}

	.header_bar .qr_line {
		width: 70px;
	}

	.main_frame {
		width: 400px;
		left: 100px;
	}
}


@media screen and (max-width: 540px) {

	.header_bar {
		display: none;
	}

	.main_frame {
		left: 0;
	}
}


@media screen and (max-width: 440px) {

	.main_frame {
		width: 100%;
		top: 0;
		border-radius: 0;
	}
}


/*---------------------------------------------------------------*\
$modal - for toppage common settings
\*---------------------------------------------------------------*/

.micromodal-slide {
	visibility: hidden;
}

.micromodal-slide.is-open {
	visibility: visible;
}

.modal__overlay {
	overflow: hidden;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	right: 0;
	background-color: rgb(0, 204, 240, .8);
	z-index: 100;
}

.modal__container {
	width: 88%;
	max-width: 410px;
	padding: 40px 16px;
	max-height: 90vh;
	overflow: scroll;
	z-index: 200;
	position: relative;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
	animation: mmfadeIn 0.6s cubic-bezier(0.34, 0.07, 0.095, 0.995);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
	animation: mmfadeOut 0.6s cubic-bezier(0.34, 0.07, 0.095, 0.995);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
	animation: mmslideIn 0.4s cubic-bezier(0.73, 0.26, 0.25, 1.62);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
	animation: mmslideOut 0.4s cubic-bezier(.37, .41, .04, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
	will-change: transform;
}

.modal__close {
	width: 40px;
	height: 40px;
	position: absolute;
	z-index: 10;
	cursor: pointer;
	top: 12px;
	right: 12px;
}

.square_btn {
	display: block;
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #282828;
	/* ボタンの背景色 */
}

.square_btn::before, .square_btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	/* 棒の幅（太さ） */
	height: 14px;
	/* 棒の高さ */
	background: #fff;
	/* バツ印の色 */
}

.square_btn::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.square_btn::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* modal animation */
@keyframes mmfadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mmfadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes mmslideIn {
	from {
		transform: scale(1.3);
	}

	to {
		transform: scale(1);
	}
}

@keyframes mmslideOut {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.3);
	}
}


@media screen and (max-width: 1080px) {

	.modal__overlay {
		right: 0;
	}
}


@media screen and (max-width: 601px) {

	.modal__overlay {
		width: 100%;
	}
}


/*---------------------------------------------------------------*\
$wrap
\*---------------------------------------------------------------*/

.sticky_wrap {
	position: relative;
	border-radius: 0 0 40px 40px;
	overflow: clip;
	z-index: 3;
}



/*---------------------------------------------------------------*\
$firstview
\*---------------------------------------------------------------*/

#firstview {
	position: sticky;
	z-index: -1;
	top: -40vh;
	padding: 12px 12px 32px;
}

#firstview .inner_firstview {
	border-radius: 10px;
	padding: 56px 0 24px;
}

#firstview .headlines_fv {
	margin: 16px auto 0;
	width: calc(100% - 84px);
	position: relative;
}

#firstview .icon_avex_fv {
	background-image: url(../img/top/icon_avex_fv.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 26px;
	height: 21px;
	margin: 0 4px 0 0;
}

#firstview .keyvisual_fv {
	position: relative;
	margin: 20px auto 0;
	width: 92%;
	overflow: hidden;
	height: 350px;
}

#firstview .tag_livestar_fv {
	font-size: 14px;
}

#firstview .logo_livestar_fv {
	margin: 14px auto 0;
	width: 245px;
}

#firstview .wrap_badge_avex {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 10px 0 0 0;
	gap: 6px;
}

#firstview .tag_badge_avex {
	font-size: 10px;
}

#firstview .badge_avex {
	width: fit-content;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px 0 10px;
	gap: 4px;
	border-radius: 4px;
}

#firstview .logo_avex_fv {
	background-image: url(../img/top/icon_avex_fv.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 20px;
	height: inherit;
}

#firstview .text_logo_avex {
	background-image: url(../img/top/text_logo_avex.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 44px;
	height: inherit;
}

#firstview .bg_test {
	position: absolute;
	z-index: -2;
	bottom: -80px;
	left: 0;
	width: 100%;
	height: 80px;
}


@media screen and (min-width: 600px) {

	#firstview .headlines_fv {
		width: calc(100% - 84px);
	}
}


@media screen and (min-width: 414px) {

	#firstview .keyvisual_fv {
		height: 380px;
	}
}



/*---------------------------------------------------------------*\
$slider
\*---------------------------------------------------------------*/

#auto_slider {
	position: relative;
	z-index: 10;
	width: 100%;
}

#auto_slider .title_slider {
	font-size: 12px;
	margin: 16px auto 0;
}

#auto_slider .wrap_sliders {
	padding: 16px 0 0;
}

#auto_slider .wrap_each_slider {
	display: flex;
}

#auto_slider .wrap_each_slider:first-child {
	margin: 0 0 24px 0;
}

#auto_slider .inner_each_slider {
	display: flex;
	list-style: none;
}

#auto_slider .each_slide {
	width: calc((100vw - (100vw - 420px)) / 3.5);
	height: 56px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	border: solid 1px #fafafa;
	margin: 0 12px 0 0;
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.07);
	border-radius: 10px;
	background-color: #fff;
	overflow: hidden;
}

#auto_slider .each_slide img {
	width: 80%;
	margin: 0 auto;
}

#auto_slider .list_left {
	animation: infinity-scroll-left 20s infinite linear both;
}

#auto_slider .list_right {
	animation: infinity-scroll-right 20s infinite linear both;
}


@keyframes infinity-scroll-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

@keyframes infinity-scroll-right {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0%);
	}
}

/* #auto_slider .wrap_sliders:hover .list_left,
#auto_slider .wrap_sliders:hover .list_right {
  animation-play-state: paused;
} */


@media screen and (max-width: 600px) {

	#auto_slider .each_slide {
		width: calc(100vw / 2.5);
	}

	#auto_slider .each_slide img {
		width: 65%;
	}
}


/* slider - features section */
.features #auto_slider .wrap_sliders {
	padding: 16px 0 0;
}


/*---------------------------------------------------------------*\
$platform
\*---------------------------------------------------------------*/

.platform {
	content-visibility: auto;
	overflow: hidden !important;
}

#platform_firstview {
	padding: 32px 0 40px;
}

#platform_firstview .each_platform {
	height: 80px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	border: solid 1px #fafafa;
	/* filter: grayscale(100%); */
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.07);
	border-radius: 16px;
}

#platform_firstview .each_platform img {
	width: 100px;
	margin: 0 auto;
}

#platform_firstview img.logo_17live {
	width: 80px;
}

#platform_livestar {
	padding: 24px 0 56px;
}

#platform_livestar .each_platform {
	height: 80px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	filter: grayscale(100%);
	/* box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.07); */
	border-radius: 16px;
}

#platform_livestar .each_platform img {
	width: 100px;
	margin: 0 auto;
}

#platform_livestar img.logo_17live {
	width: 80px;
}

.splide__track {
	overflow: inherit !important;
}



/*---------------------------------------------------------------*\
$visual
\*---------------------------------------------------------------*/

.visual {
	margin: -90px 0 0 0;
}



/*---------------------------------------------------------------*\
$about
\*---------------------------------------------------------------*/

#about {
	position: relative;
	z-index: 2;
	box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.1);
	border-radius: 20px;
	padding: 64px 0 12px;
}

#about .graphic {
	position: absolute;
	background-image: url(../img/top/graphic.webp);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 200px;
	height: 400px;
	top: 40px;
	right: -35px;
	z-index: -1;
}

#about .title_about {
	font-size: 17px;
	width: calc(100% - 72px);
	margin: 0 auto
}

#about .headline_about {
	width: calc(100% - 72px);
	margin: 48px auto 0;
	font-size: 24px;
	line-height: 1.3;
}

#about .description_about {
	width: calc(72% - 36px);
	font-size: 15px;
	line-height: 2;
	margin: 40px 0 0 36px;
}

#about .title_rm {
	margin: 48px 0 0 36px;
}

#about .content_rm {
	margin: 24px 0 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	padding: 0 12px;
}

#about .each_rm_about {
	padding: 14px;
	position: relative;
	cursor: pointer;
	box-shadow: inset 0px 0px 20px rgba(255, 255, 255, 0.8);
}

#about .each_rm_about:first-of-type {
	border-radius: 24px 20px 20px 20px;
}

#about .each_rm_about:nth-of-type(2) {
	border-radius: 20px 24px 20px 20px;
}

#about .each_rm_about:nth-of-type(3) {
	border-radius: 20px 20px 20px 32px;
}

#about .each_rm_about:nth-of-type(4) {
	border-radius: 20px 20px 32px 20px;
}

#about .thummbnail_each_rm {
	width: 96px;
	background-color: #fff;
	height: 96px;
	margin: 0 12px 0 0;
	border-radius: 20px;
	overflow: hidden;
}

#about .number_each_rm {
	font-size: 15px;
}

#about .title_each_rm {
	line-height: 17px;
	margin: 16px 0 0 0px;
	padding-left: 10px;
	border-left: solid 1px #fff;
}

#about .text_line_01_rm {
	font-size: 12px;
}

#about .catch_word_rm {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 500;
	margin: 8px 0 0 0;
}

#about .catch_line_rm {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 500;
	margin: 8px 0 0 0;
}

#about .show_rm {
	width: 100%;
	height: 48px;
	font-size: 12px;
	border-radius: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 24px 0 0 0;
}

#about .info_each_rm {
	width: 100%;
}


/*---------------------------------------------------------------*\
$common
\*---------------------------------------------------------------*/

.background_tag {
	position: absolute;
	top: 15px;
	right: 0;
	left: 0;
	margin: auto;
}

#support .background_tag {
	top: 40px;
}



/*---------------------------------------------------------------*\
$livestar
\*---------------------------------------------------------------*/

#livestar {
	position: relative;
	z-index: 2;
	padding: 12px 0;
	margin-top: -100px;
	border-radius: 30px;
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
}

#livestar .introduction_livestar {
	width: calc(100% - 24px);
	position: relative;
	margin: 0 auto;
	border-radius: 22px;
	padding: 48px 0 56px;
}

#livestar .logo {
	margin: 16px auto 0;
	width: 210px;
}

#livestar .tagline {
	font-size: 13px;
	margin: 14px auto 0;
}

#livestar .description {
	width: 270px;
	line-height: 2;
	margin: 32px auto 0;
}

#livestar .subtitle_feature {
	margin: 48px 0 0 0;
	font-size: 15px;
}

#livestar .title_feature {
	font-size: 34px;
	letter-spacing: -1px;
}


/*---------------------------------------------------------------*\
$features
\*---------------------------------------------------------------*/

.features {
	margin: 24px 0 0 0;
}

.features .features_panels {
	width: calc(100% - 24px);
	margin: 0 auto;
	border-radius: 32px;
	overflow: hidden;
}

.features .features_panels>article:nth-of-type(1) {
	height: 110px;
	border-radius: 30px 30px 0 0;
	overflow: hidden;
}

.features .features_panels>div>article:nth-of-type(1),
.features .features_panels>div>article:nth-of-type(2) {
	width: calc(50% - 1px);
	height: 210px;
	margin: 2px 0 0 0;
}

.features .features_panels article:nth-of-type(2) {
	margin: 2px 0 0 0;
	padding: 24px 0 8px;
}

.features .features_panels article:nth-of-type(3) {
	height: 110px;
	border-radius: 0 0 30px 30px;
	overflow: hidden;
	margin: 2px 0 0 0;
}

.features .each_panel {
	position: relative;
	overflow: hidden;
}

.features .each_panel:first-of-child {
	border-radius: 30px 30px 0 0;
}

.features .each_panel:last-of-child {
	border-radius: 30px 30px 0 0;
}

.feature_01 {
	background-image: url(../img/top/feature_01.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 222px;
	height: 62px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}

.features canvas {
	position: absolute;
	border-radius: 30px 30px 0 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.feature_02 {
	background-image: url(../img/top/feature_02_graphic.webp);
	background-size: contain;
	background-repeat: no-repeat;
	width: 153px;
	height: 175px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}

.feature_03 {
	background-image: url(../img/top/feature_03_graphic.webp);
	background-size: contain;
	background-repeat: no-repeat;
	width: 167px;
	height: 175px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}

.title_feature_04 {
	font-size: 14px;
	line-height: 1.4;
}

.feature_05 {
	background-image: url(../img/top/feature_05_graphic.webp);
	background-size: contain;
	background-repeat: no-repeat;
	width: 376px;
	height: 110px;
	position: absolute;
	top: 0;
	left: -6%;
	margin: auto;
}


/*---------------------------------------------------------------*\
$supports
\*---------------------------------------------------------------*/

#support {
	position: relative;
	z-index: 2;
	margin-top: -100px;
	border-radius: 30px;
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
}

#support .tagline_support {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10000px;
	z-index: 100;
}

#support .content_support {
	padding: 12px 0 80px;
}

#support .introduction_support {
	padding: 40px 0 56px;
	width: calc(100% - 24px);
	margin: 0 auto;
	border-radius: 32px 32px 20px 20px;
	position: relative;
}

#support .lead_support {
	font-size: 24px;
	line-height: 1.4;
	margin: 24px 0 0 0;
}

#support .lists_support {
	width: calc(100% - 24px);
	margin: 12px auto 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, calc(50% - 5px));
}

#support .title_list {
	font-size: 15px;
	line-height: 1.3;
}

#support .description_list {
	font-size: 12px;
	line-height: 1.5;
	margin: 12px 0 0 0;
	height: 130px;
}

#support .description_height_small {
	height: 90px;
}

#support .description_height_medium {
	height: 110px;
}

#support .button_list {
	font-size: 12px;
	width: 100%;
	height: 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 14px 0 0 0;
	cursor: pointer;
}

#support .info_list {
	padding: 12px;
}

#support .each_list {
	border-radius: 20px;
	overflow: hidden;
}

#support .thumbnail_list {
	margin: 6px 6px 0 6px;
	overflow: hidden;
	background-color: #fafafa;
	border-radius: 16px 16px 0 0;
}

#support .liver_introduction {
	margin: 100px auto 0;
}

#support .wrap_titles_profile {
	width: calc(100% - 72px);
	margin: 0 auto;
}

#support .subtitle_profile {
	font-size: 15px;
}

#support .title_profile {
	font-size: 44px;
	letter-spacing: -1px;
}

#support .description_profile {
	line-height: 1.8;
	font-size: 16px;
	margin: 16px 0 0 0;
}

/* profile slider */
#support .wrapper_supports_about_ew {
	overflow-x: scroll;
}

#support .supports_about_ew {
	display: flex;
	align-items: flex-start;
	width: 2456px;
	margin: 32px auto 0;
	padding: 0 32px;
}

#support .each_support_about_ew {
	width: calc((2456px)/8);
	margin-right: 8px;
}

#support .each_support_about_ew:last-child {
	margin-right: 0%;
}


/*---------------------------------------------------------------*\
$entry
\*---------------------------------------------------------------*/

#steps {
	position: relative;
	z-index: 2;
	padding: 64px 0 0 0;
	border-radius: 30px 30px 0 0;
	box-shadow: 0px -40px 40px rgba(0, 0, 0, 0.2);
	margin-top: -100px;
}

#steps .content {
	width: calc(100% - 72px);
	z-index: 10;
	position: relative;
	margin: 0 auto;
}

#steps .subtitle_support {
	font-size: 15px;
}

#steps .title_support {
	font-size: 44px;
	letter-spacing: -1px;
}

#steps .each_step:nth-of-type(1) {
	margin: 32px 0 0 0;
	position: relative;
}

#steps .each_step:nth-of-type(2) {
	margin: 48px 0 0 0;
	position: relative;
}

#steps .each_step:nth-of-type(3) {
	margin: 48px 0 0 0;
}

#steps .arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 10px 0 10px;
	border-color: #222 transparent transparent transparent;
	bottom: -32px;
	margin: auto;
	right: 0;
	left: 69px;
}

#steps .each_step dt {
	width: 50px;
	margin-right: 24px;
}

#steps .step_number {
	font-size: 12px;
	margin: 24px 0 0 0;
}

#steps .step_number:after {
	display: block;
	content: '';
	width: 12px;
	height: 2px;
	background-color: #222;
	margin: 16px 0 0 0;
}

#steps .each_step dd {
	padding: 24px;
	width: calc(100% - 74px);
	box-shadow: inset 0px 0px 20px rgba(255, 255, 255, 0.8);
	border: solid 1px #d6f9ff;
}

#steps .step_title {
	font-size: 18px;
}

#steps .description {
	font-size: 12px;
	line-height: 1.6;
	margin: 16px 0 0 0;
}

#steps .step_button {
	font-size: 14px;
	width: 100%;
	height: 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 14px 0 0 0;
	cursor: pointer;
	position: relative;
	box-shadow: inset 0px 0px 12px rgba(255, 255, 255, 0.4);
}

#steps .step_button img {
	width: 70%;
	margin: 0 auto;
}


/*---------------------------------------------------------------*\
$faq
\*---------------------------------------------------------------*/

#qa {
	position: relative;
	z-index: 2;
	padding: 56px 0 0;
	display: flex;
}

#qa .bg_qa {
	position: absolute;
	border-radius: 0 30px 30px 0;
	top: 56px;
	left: 0;
	width: calc(100% - 36px);
	height: calc(100% - 56px);
}

#qa .wrap_title {
	width: 64px;
	padding-top: 60px;
}

#qa .wrap_title>div {
	transform: rotate(90deg) translateX(80px) translateY(56px);
	width: 180px;
	align-items: baseline;
}

#qa .title_qa {
	font-size: 17px;
}

#qa .subtitle_qa {
	font-size: 12px;
	margin: 0 0 0 16px;
}

#qa .accordion {
	width: calc(100% - 72px);
	padding: 56px 0;
	z-index: 10;
	position: relative;
}

#qa .accordion__item {
	margin-top: 1px;
	cursor: pointer;
	overflow: hidden;
}

#qa .accordion__item:first-of-type {
	border-radius: 30px 0 0 0;
}

#qa .accordion__item:last-of-type {
	margin-bottom: 0;
	border-radius: 0 0 0 30px;
}

#qa .accordion__title {
	position: relative;
	padding: 32px 14% 32px 20px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.6;
}

#qa .accordion__title::after {
	transform: rotate(90deg);
}

/* icon */
#qa .accordion__title::before,
#qa .accordion__title::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 0;
	bottom: 0;
	margin: auto 0;
	background-color: #3abec1;
	width: 10px;
	height: 2px;
	transition: all 0.3s;
}

/* アコーディオン展開時の(-)アイコン */
#qa .accordion__item.is-active .accordion__title::before {
	transform: rotate(180deg);
}

#qa .accordion__item.is-active .accordion__title::after {
	transform: rotate(180deg);
	opacity: 0;
}

#qa .accordion__content {
	display: none;
	cursor: pointer;
	padding: 0 14% 24px 16px;
	font-size: 12px;
	line-height: 1.6;
	text-align: justify;
}

#qa .accordion__content.is-open {
	display: block;
}



/*---------------------------------------------------------------*\
$ranking
\*---------------------------------------------------------------*/

/* common */
#ranking {
	padding: 84px 0 0;
	position: relative;
}

/* explain */
#ranking .explain_award {
	background-image: url('../img/top/background_ranking.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	padding: 32px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 96%;
	margin: 32px auto 0;
	border-radius: 10px 10px 0 0;
}

#ranking .graphic_award {
	width: 140px;
	margin: 0 auto;
}

#ranking .logo_award {
	width: 230px;
	margin: 16px auto 0;

}

#ranking .explain_hukidashi {
	background-color: #C09D4C;
	padding: 14px 0;
	font-size: 13px;
	width: 96%;
	margin: 0 auto;
}

#ranking .explain_ranking {
	background-image: url('../img/top/background_ranking.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	padding: 48px 0 72px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 96%;
	margin: 0 auto;
	position: relative;
	border-radius: 0 0 10px 10px;
}

#ranking .border_white {
	width: 1px;
	height: 48px;
	margin: 0 auto;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
}

#ranking .logo_ranking {
	width: 240px;
	margin: 0 auto;
}

#ranking .description_ranking {
	font-size: 14px;
	line-height: 1.8;
}

@media screen and (max-width: 600px) {

	#ranking .logo_ranking {
		width: 220px;
		margin: 0 auto;
	}

	#ranking .description_ranking {
		font-size: 13px;
	}
}


/* titles */
#ranking .border_black {
	width: 1px;
	height: 40px;
	margin: 0 auto;
}

#ranking .wrap_titles {
	margin: 16px 0 0 0;
}

#ranking .subtitle {
	font-size: 15px;
}

#ranking .headline {
	font-size: 44px;
	letter-spacing: -1px;
}

/* subject */
#ranking .subject {
	padding: 12px 0;
	border-radius: 4px;
	font-size: 13px;
	width: calc((100% - 64px));
	margin: 32px auto 0;
}

/* mention */
#ranking .mention {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: calc((100% - 40px));
	margin: 0 auto;
}

#ranking .each_mention {
	font-size: 10px;
	display: flex;
	align-items: flex-start;
}

#ranking .each_mention dt {
	margin: 0 2px 0 0;
}

#ranking .each_mention dt,
#ranking .each_mention dd {
	font-size: 10px;
}

/* content */
#ranking .inner_content {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 40px auto 0;
	width: calc((100% - 40px));
}

#ranking .each_liver {
	width: calc((100% - 12px)/2);
	margin: 0 0 10px 0;
	position: relative;
}

#ranking .extend_list li:nth-of-type(n+9) {
	width: calc((100% - 30px)/4) !important;
}

#ranking .thumbnail {
	position: relative;
}

#ranking .each_liver:nth-of-type(1) .thumbnail {
	border: solid 3px #DBA454;
}

#ranking .each_liver:nth-of-type(2) .thumbnail {
	border: solid 3px #B9B9B9;
}

#ranking .each_liver:nth-of-type(3) .thumbnail {
	border: solid 3px #B4705B;
}

#ranking .each_liver:nth-of-type(1) .rank,
#ranking .each_liver:nth-of-type(2) .rank,
#ranking .each_liver:nth-of-type(3) .rank {
	color: transparent;
	background-color: inherit;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 44px;
	height: 36px;
	top: -20px;
	left: -8px;
	z-index: 2;
}

#ranking .each_liver:nth-of-type(1) .rank {
	background-image: url(../img/ranking/icon_gold_crown.png);
}

#ranking .each_liver:nth-of-type(2) .rank {
	background-image: url(../img/ranking/icon_silver_crown.png);
}

#ranking .each_liver:nth-of-type(3) .rank {
	background-image: url(../img/ranking/icon_bronze_crown.png);
}

#ranking .rank {
	font-size: 13px;
	position: absolute;
	z-index: 5;
	padding-bottom: 2px;
	top: -6px;
	left: -5px;
	width: 22px;
	height: 22px;
	background-color: #000;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#ranking .extend_list li:nth-of-type(n+9) .rank {
	font-size: 10px !important;
	width: 20px !important;
	height: 20px !important;
}

#ranking .extend_list li:nth-of-type(n+9) .name {
	font-size: 12px !important;
}

#ranking .name {
	margin: 8px 0 0;
}

#ranking .profile {
	font-size: 10px;
	margin: 6px 0 0;
}

#ranking .extend_list li:nth-of-type(n+9) .profile {
	font-size: 10px !important;
}

#ranking .app {
	position: absolute;
	bottom: 6px;
	right: 6px;
	width: 72px;
	height: 24px;
	display: flex;
	flex-direction: column;
	padding: 0 6px;
	justify-content: center;
}

#ranking .extend_list li:nth-of-type(n+9) .app {
	width: 48px !important;
	height: 16px !important;
	bottom: 4px !important;
	right: 4px !important;
}

/* button */
#ranking .button {
	height: 48px;
	margin: 32px auto 0;
	font-size: 14px;
	width: calc((100% - 40px));
}



/*---------------------------------------------------------------*\
$topics
\*---------------------------------------------------------------*/

/* common */
#topics {
	margin: 0 auto;
	position: relative;
	z-index: 2;
	padding: 100px 0;
	border-radius: 0 0 40px 40px;
}

/* titles */
#topics .wrap_titles_cv {
	width: calc(100% - 72px);
	margin: 0 auto;
}

#topics .title_topics {
	font-size: 44px;
	letter-spacing: -1px;
}

#topics .subtitle_topics {
	font-size: 15px;
}

/* content */
#topics .content {
	width: calc(100% - 72px);
	margin: 32px auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

#topics .each_post {
	width: calc(50% - 12px);
}

#topics .each_post:first-of-type {
	width: 100%;
}

#topics .thumbnail {
	margin: 0 0 12px 0;
	border-radius: 10px;
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.07);
}

#topics .article_title {
	font-size: 13px;
	line-height: 1.4;
	margin: 8px 0 0 0;
}

#topics .others {
	width: calc(100% - 72px);
	margin: 56px auto 0;
}

#topics .content_others {
	display: grid;
	gap: 20px;
	margin: 32px 0 0 0;
}

#topics .each_mini_post {
	display: flex;
	align-items: center;
	border-bottom: solid 1px #eee;
	padding-bottom: 24px;
	gap: 20px;
}

#topics .date_other_post {
	font-size: 10px;
}

#topics .others_article_title {
	font-size: 12px;
	margin: 4px 0 0 0;
	line-height: 1.4;
}

#topics .button_more {
	width: calc(100% - 72px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: solid 1px #eee;
	height: 72px;
	font-size: 14px;
	border-radius: 80px;
	padding: 0 0 0 8%;
	margin: 40px auto 0;
}

#topics .others_title {
	font-size: 14px;
}



/*---------------------------------------------------------------*\
$CV
\*---------------------------------------------------------------*/

#cv {
	width: 96%;
	height: 620px;
	margin: 100px auto 0;
	position: relative;
}

#cv .inner_cv {
	background-image: url('../img/top/bg_cv.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 100%;
	position: relative;
}

#cv .title_cv {
	position: absolute;
	z-index: 2;
	top: 24px;
	width: 90%;
	right: 0;
	margin: auto;
	left: 0%;
}

#cv .button_cv {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	font-size: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 56px;
	margin: 0 auto;
}

#cv .text_button_cv {
	position: absolute;
	right: 0;
	display: block;
	width: 100%;
	left: 0;
	height: 100%;
	margin: auto;
	background-image: url('../img/floating_banner_sp.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 180px auto;
}


/*---------------------------------------------------------------*\
$modal - データで見るライブ配信の人気
\*---------------------------------------------------------------*/

/* common */
.title_modal>span:first-child {
	font-size: 16px;
}

.title_modal>span:last-child {
	font-size: 22px;
	margin-top: 6px;
}

.text_close_modal {
	font-size: 15px;
	cursor: pointer;
	margin: 40px 0 0 0;
}

#modal-1 .data_modal {
	background-color: #fafafa;
	margin: 24px 0 0 0;
}

#modal-1 .wrap_lead_modal {
	margin: 24px 0 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#modal-1 .batch_modal {
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 72px;
	height: 72px;
	font-size: 15px;
	line-height: 1.3;
}

#modal-1 .lead_modal {
	width: calc(96% - 72px);
	font-size: 17px;
	line-height: 1.3;
}

#modal-1 .lead_modal>span {
	font-size: 17px;
	line-height: 1.3;
}

#modal-1 .reasons_modal {
	display: grid;
	gap: 40px;
	margin: 40px 0 0 0;
}

#modal-1 .each_reason_modal {
	position: relative;
	border-radius: 20px;
	padding: 32px 20px 20px 20px;
}

#modal-1 .title_01 {
	background-image: url('../img/top/badge_01_reason_modal.png');
}

#modal-1 .title_02 {
	background-image: url('../img/top/badge_02_reason_modal.png');
}

#modal-1 .title_03 {
	background-image: url('../img/top/badge_03_reason_modal.png');
}

#modal-1 .title_reason_modal {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 242px;
	height: 31px;
	position: absolute;
	top: -9px;
	right: 0;
	left: 0;
	margin: auto;
}

#modal-1 .description_reason_modal {
	font-size: 13px;
}

#modal-1 .source_modal {
	font-size: 10px;
	color: #888;
	margin: 4px 0 0 0;
	display: block;
}


/*---------------------------------------------------------------*\
$modal - ライブ配信はどのくらい稼げるの？
\*---------------------------------------------------------------*/

#modal-2 .description_general_modal {
	margin: 32px 0 0 0;
}

#modal-2 .wrap_facts_modal {
	display: grid;
	gap: 8px;
}

#modal-2 .facts_low_modal {
	display: flex;
	gap: 8px;
}

#modal-2 .app_casestudy_modal {
	margin: 32px 0 0 0;
}

#modal-2 .wrap_facts_modal {
	margin: 24px 0 0 0;
}

#modal-2 .fact_small_modal {
	background-color: #fafafa;
	width: 48%;
}

#modal-2 .fact_large_modal {
	background-color: #fafafa;
}

#modal-2 .source_modal {
	font-size: 10px;
	color: #888;
	margin: 4px 0 0 0;
	display: block;
}


/*---------------------------------------------------------------*\
$modal - どんな人が配信をしてるの？
\*---------------------------------------------------------------*/

#modal-3 .modal__container {
	padding: 40px 0;
}

#modal-3 .inner_modal__content {
	padding: 0 16px;
}

#modal-3 .title_type_modal {
	font-size: 24px;
	line-height: 1.2;
}

#modal-3 .description_type_modal {
	margin: 32px 0 0 0;
}

#modal-3 .case_type_modal {
	margin: 32px 0 0 0;
}

#modal-3 .all_types_modal {
	display: grid;
	gap: 16px;
	margin: 24px 0 0 0;
}

#modal-3 .each_type_modal {
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

#modal-3 .each_type_modal_ex {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

#modal-3 .badge_type_modal {
	width: 56px;
	height: 56px;
	font-size: 11px;
	line-height: 1.3;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#modal-3 .graph_type_modal {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 12px;
	position: relative;
}

#modal-3 .question_type_modal {
	height: 48px;
	margin: 32px 0 0 0;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#modal-3 .question_type_modal:after {
	position: absolute;
	display: block;
	content: '';
	width: 0;
	height: 0;
	bottom: -8px;
	right: 0;
	left: 0;
	margin: auto;
	border-style: solid;
	border-width: 8px 6px 0 6px;
	border-color: #2f2f2f transparent transparent transparent;
}

#modal-3 .result_type_modal {
	width: 90%;
	margin: 0 auto;
	padding: 24px 0;
}

#modal-3 .badge_type_modal {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#modal-3 .chart>canvas,
#modal-3 .chart_02>canvas,
#modal-3 .chart_03>canvas,
#modal-3 .chart_04>canvas {
	margin: 0 auto !important;
	border-radius: 50%;
	background-color: #fff;
}

#modal-3 .people_type_modal {
	font-size: 16px;
}

#modal-3 .answer_type_modal {
	padding: 24px 0;
	font-size: 18px;
}

#modal-3 .okay_type_modal {
	margin: 8px 0 0 0;
}

#modal-3 .wrap_conclusion_type_modal {
	margin: 24px 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#modal-3 .conclusion_type_modal {
	line-height: 1.5;
}

#modal-3 .big_letter_type_modal {
	font-size: 24px;
	margin: 4px 0;
}

#modal-3 .wrap_detail_type_modal img {
	height: 56px;
	margin: 6px 0 0 0;
}

#modal-3 .source_modal {
	font-size: 10px;
	color: #888;
	margin: 4px 0 0 0;
	display: block;
	padding: 0 24px;
}


/*---------------------------------------------------------------*\
$modal - ライバープロフィール
\*---------------------------------------------------------------*/

.modal-liver-profile .modal__container {
	padding: 16px 0 40px;
}

.modal-liver-profile .modal__content {
	display: grid;
	gap: 40px;
}

.modal-liver-profile .liver_data_modal {
	display: grid;
	gap: 20px;
}

.modal-liver-profile .text_close_modal {
	margin: 0;
}

.modal-liver-profile .thumbnail_modal {
	background-color: #fafafa;
	overflow: hidden;
	border-radius: 32px;
	width: calc(100% - 32px);
	margin: 0 auto;
}

.modal-liver-profile .liver_name_modal {
	font-size: 22px;
	width: calc(100% - 32px);
	margin: 0 auto;
}

.modal-liver-profile .liver_status_modal {
	width: calc(100% - 32px);
	margin: 0 auto;
	display: grid;
	gap: 32px;
	padding: 24px;
}

.modal-liver-profile .each_status {
	gap: 12px;
	display: flex;
	width: 100%;
	justify-content: center;
	margin: 0 auto;
	flex-direction: column;
}

.modal-liver-profile .title_status {
	font-size: 12px;
	padding-bottom: 8px;
	border-bottom: solid 1px #ddd;
}

.modal-liver-profile .data_modal {
	font-size: 14px;
}

.modal-liver-profile .platform_liver_modal {
	display: grid;
	gap: 12px;
}

.modal-liver-profile .platform_liver_modal .each_slide {
	height: 64px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	border: solid 1px #fafafa;
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.07);
	border-radius: 10px;
	background-color: #fff;
	overflow: hidden;
}

.modal-liver-profile .each_slide img {
	width: 50%;
	margin: 0 auto;
}

.modal-liver-profile .qa_liver_modal {
	display: grid;
	gap: 16px;
	width: calc(100% - 32px);
	margin: 0 auto;
}

.modal-liver-profile .question_liver_modal {
	padding: 16px;
}

.modal-liver-profile .description_liver_modal {
	line-height: 1.4;
	font-size: 14px;
}

.modal-liver-profile .interviewer {
	border-radius: 0 16px 16px 16px;
	width: calc(100% - 24px);
}

.modal-liver-profile .interviwee {
	border-radius: 16px 0px 16px 16px;
	width: calc(100% - 24px);
	margin: 0 0 0 auto;
}



/*---------------------------------------------------------------*\
$modal - ライバーの1日の過ごし方
\*---------------------------------------------------------------*/

#modal-4 .description_day {
	margin: 24px 0 0 0;
}

#modal-4 .all_day {
	display: grid;
	gap: 24px;
	margin: 32px 0 0 0;
}

.timeline_modal {
	display: grid;
	gap: 16px;
}

#modal-4 .content_timeline_modal {
	display: flex;
	gap: 16px;
	align-items: center;
}

#modal-4 .description_timeline_modal {
	font-size: 13px;
	line-height: 1.6;
	width: calc(100% - 156px);
}

#modal-4 .scene_common_modal {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#modal-4 .scene_01_modal {
	background-image: url('../img/top/scene_01_modal.webp');
	width: 140px;
	height: 210px;
	background-color: #fafafa;
}

#modal-4 .scene_02_modal {
	background-image: url('../img/top/scene_02_modal.webp');
	width: 140px;
	height: 210px;
	background-color: #fafafa;
}

#modal-4 .scene_03_modal {
	background-image: url('../img/top/scene_03_modal.webp');
	width: 140px;
	height: 210px;
	background-color: #fafafa;
}

#modal-4 .scene_04_modal {
	background-image: url('../img/top/scene_04_modal.webp');
	width: 310px;
	padding: 34%;
	background-color: #fafafa;
}

#modal-4 .scene_05_modal {
	background-image: url('../img/top/scene_05_modal.webp');
	width: 310px;
	padding: 34%;
	background-color: #fafafa;
}

#modal-4 .scene_06_modal {
	background-image: url('../img/top/scene_06_modal.webp');
	width: 140px;
	height: 210px;
	background-color: #fafafa;
}

#modal-4 .scene_07_modal {
	background-image: url('../img/top/scene_07_modal.webp');
	width: 140px;
	height: 210px;
	background-color: #fafafa;
}

#modal-4 .scene_08_modal {
	background-image: url('../img/top/scene_08_modal.webp');
	width: 140px;
	height: 210px;
	background-color: #fafafa;
}

#modal-4 .dots {
	display: grid;
	gap: 4px;
}

#modal-4 .dot {
	width: 4px;
	height: 4px;
	margin: 0 auto;
}

#modal-4 .wrap_titles_timeline_modal {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 24px 0 24px 16px;
}

#modal-4 .hour_timeline_modal {
	font-size: 16px;
}

#modal-4 .todo_timeline_modal {
	font-size: 15px;
}

#modal-4 .border_timeline_modal {
	width: 1px;
	height: 12px;
	margin: 2px 0 0 0;
}

#modal-4 .wide_scale {
	width: 100% !important;
}

/* animation */
.micromodal-slide .title_modal,
.micromodal-slide .all_day,
.micromodal-slide .description_day {
	opacity: 0;
	transform: translate3d(0, 100%, 0);
}

.micromodal-slide[aria-hidden="true"] .title_modal,
.micromodal-slide[aria-hidden="true"] .description_day,
.micromodal-slide[aria-hidden="true"] .all_day {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.micromodal-slide[aria-hidden="false"] .title_modal {
	animation: fadeInUp;
	animation-delay: 0.2s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.micromodal-slide[aria-hidden="false"] .description_day {
	animation: fadeInUp;
	animation-delay: 0.2s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.micromodal-slide[aria-hidden="false"] .all_day {
	animation: fadeInUp;
	animation-delay: 0.2s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}