@charset "UTF-8";

/* =======================================
		「ピピピ音楽堂」　ページ （.page_pipipi-music-hall)
======================================= */
.page_pipipi-music-hall{
	background-size: 1920px auto;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #F1EDDE;
}
@media screen and (min-width: 1921px) {
	.page_pipipi-music-hall{
		background-size: 100% auto;
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.page_pipipi-music-hall{
		background-size: 100% auto;
		width: 100%;
	}
}

/* .mainvisual_box */
.page_pipipi-music-hall .mainvisual_box{
	padding-bottom: 50px;
	padding-top: 400px;
}
@media screen and (min-width: 1921px) {
	.page_pipipi-music-hall .mainvisual_box{
		padding-bottom: 2.603vw;
		padding-top: 20.822vw;
	}
}
@media screen and (max-width: 767px) {
	.page_pipipi-music-hall .mainvisual_box{
		padding-top: 18.667vw;
		/* padding-top: 70px; */
		padding-bottom: 0;
		min-height: 93.333vw;
		/* min-height: 350px; */
	}
}

/* deco */
.page_pipipi-music-hall .deco_sound-effects_left{
	top: 1260px;
	left: calc(50% - 770px);
}
.page_pipipi-music-hall .deco_sound-effects_right{
	top: 650px;
	right: calc(50% - 800px);
}
@media screen and (max-width: 767px) {
	.page_pipipi-music-hall .deco_sound-effects_left,
	.page_pipipi-music-hall .deco_sound-effects_right{
		display: none;
	}
}


/* ------ .subpage_link_box -------*/
.page_pipipi-music-hall .link_list_box{
	/* border-top: 2px solid #73D4C6; */
	border-bottom: 2px solid #73D4C6;
	position: relative;
}
.page_pipipi-music-hall .link_list_box::before{
	content: '';
	background-color: #73D4C6;
	width: 87%;
	height: 2px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
@media screen and (max-width: 767px) {
	.page_pipipi-music-hall .link_list_box::before{
		width: 100%;
		top: -4px;
	}
	.page_pipipi-music-hall .subpage_link_box .ttl_sub img{
		width: 58.667vw;
		/* width: 220px; */
	}
}


/* ------ .way-of-playing_box -------*/
@media screen and (max-width: 767px) {
	.page_pipipi-music-hall .way-of-playing_box .ttl_sub img{
		width: 45.067vw;
	}
}


/* ------ .sound-effects_box -------*/
.sound-effects_box .container{
	padding-bottom: 45px;
}
.sound-effects_box .case{
	margin-bottom: 30px;
}
.sound-effects_box .case:last-child{
	margin-bottom: 0px;
}
.sound-effects_box .text_bottom{
	font-size: 1.5rem;
	text-align: right;
}
@media screen and (max-width: 767px) {
	.sound-effects_box .container{
		padding-bottom: 14vw;
	}
	.sound-effects_box .case{
		margin-bottom: 30px;
		margin-bottom: 8vw;
	}
	.sound-effects_box .ttl_sub img{
		width: 45.067vw;
	}
	.sound-effects_box .text_bottom{
		font-size: min(3.467vw, 15px);
	}
}


/* ------ .background-music_box -------*/
.background-music_box .container{
	padding-bottom: 45px;
}
@media screen and (max-width: 767px) {
	.background-music_box .container{
		padding-bottom: 14vw;
	}
	.background-music_box .ttl_sub img{
		width: 45.067vw;
	}
}

/* ------ .songs_box -------*/
.songs_box .container{
	padding-bottom: 100px;
}
.songs_box p img{
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
	.songs_box .container{
		padding-bottom: 16vw;
	}
	.songs_box .ttl_sub img{
		width: 45.067vw;
	}
	.songs_box p img{
		width: 40.627vw;
	}
}


/* ------ .link_box -------*/
@media screen and (max-width: 767px) {
	.page_pipipi-music-hall .link_box .ttl_sub img{
		width: 45.067vw;
	}
}


/* =======================================
	「ピピピ音楽堂」トップページ （#page_pipipi-music-hall_top）
======================================= */
#page_pipipi-music-hall_top{
	background-image: url("../img/mainvisual_pc.png");
}
@media screen and (max-width: 767px) {
	#page_pipipi-music-hall_top{
		background-image: url("../img/mainvisual_sp.png");
	}
}

/* .mainvisual_box */
#page_pipipi-music-hall_top .mainvisual_box{
	padding-top: 170px;
	padding-bottom: 230px;
}
@media screen and (min-width: 1921px) {
	#page_pipipi-music-hall_top .mainvisual_box{
		padding-top: 8.85vw;
		padding-bottom: 11.973vw;
	}
}
@media screen and (max-width: 767px) {
	#page_pipipi-music-hall_top .mainvisual_box{
		padding-top: 18.667vw;
		/* padding-top: 70px; */
		padding-bottom: 0;
	}
}


/* =======================================
	「効果音」ページ （#page_sound-effects）
======================================= */
#page_sound-effects{
	background-image: url("../img/mainvisual_sound-effects_pc.png");
}
@media screen and (max-width: 767px) {
	#page_sound-effects{
		background-image: url("../img/mainvisual_sound-effects_sp.png");
	}
}


/* =======================================
	「効果音 バトルver.」ページ （#page_sound-effects-battle）
======================================= */
#page_sound-effects-battle{
	background-image: url("../img/mainvisual_sound-effects-battle_pc.png");
}
@media screen and (max-width: 767px) {
	#page_sound-effects-battle{
		background-image: url("../img/mainvisual_sound-effects-battle_sp.png");
	}
}

/* .maintitle */
@media screen and (max-width: 767px) {
	#page_sound-effects-battle .maintitle{
		margin-bottom: 3.2vw;
		/* margin-bottom: 12px; */
	}
	#page_sound-effects-battle .maintitle img.two_line{
		height: 26.667vw;
		/* height: 100px; */
	}
}

/* .ttl_battle */
.ttl_battle{
	margin-bottom: 40px;
}
.ttl_battle img{
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
	.ttl_battle{
		margin-bottom: 20px;
		margin-bottom: 5.333vw;
	}
}


/* =======================================
	「BGM」ページ （#page_bgm）
======================================= */
#page_bgm{
	background-image: url("../img/mainvisual_bgm_pc.png");
}
@media screen and (max-width: 767px) {
	#page_bgm{
		background-image: url("../img/mainvisual_bgm_sp.png");
	}
}

#page_bgm .playlist_box p{
	letter-spacing: 0;
}
@media screen and (max-width: 767px) {
	#page_bgm .maintitle img{
		height: 16vw;
		/* height: 60px; */
	}
}