@charset "UTF-8";
/* CSS Document */

html{
	width: 100%;
	font-size: 62.5%;
}

html *{
	box-sizing: border-box;
}

body{
	width: 100%;
	font-size: 1.6rem;
	color: #434343;
	line-height: 1.7;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

.wrapper{
	overflow: hidden;
}

a{
	color: #434343;
	text-decoration: none;
}

.wf-nicomoji {
	font-family: "Nico Moji";
}

.wf-roundedmplus1c {
	font-family: "Rounded Mplus 1c";
	font-size: 21px;
	font-weight: 900;
}

h2{
	font-family: 'Titan One', cursive;
	font-size: 4.8rem;
	text-transform: uppercase;
	text-align: center;
	color: #ff5394;
	line-height: 1;
	letter-spacing: 3px;
	margin-bottom: 50px;
}

.btn a{
	width: 300px;
	height: 52px;
	display: block;
	margin: 0 auto;
}

.pc{
	display: block;
}

.sp{
	display: none;
}

/*下層ページ共通*/
.branch{
	max-width: 960px;
	padding-top: 166px;
	margin: 0 auto;
}

@media screen and (max-width:768px) {
	h2{
		font-size: 3.2rem;
		letter-spacing: 0;
		margin-bottom: 3vh;
	}
	
	.branch h2{
		padding-left: 1em;
	}
	
	.pc{
		display: none;
	}

	.sp{
		display: block;
	}
	
	/*下層ページ共通*/
.branch{
	 padding-top: 5vh;
	}
}

/*----------------
*
*  header
*
----------------*/

header{
	width: 100%;
	position: fixed;
	border-bottom: 1px solid #ccc;
	background: #fff;
	z-index: 1000;
}

header .inner{
	max-width: 960px;
	position: relative;
	margin: 10px auto 0;
}

header .logo{
	width: 130px;
	position: absolute;
	left: 0;	
}

.hover header .logo a:hover img {
  animation: logo 3.875s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes logo {
  0% { transform:rotate(-3deg) }
  5.16129% { transform:rotate(3deg) }
  6.45161% { transform:rotate(6deg) }
  11.6129% { transform:rotate(-6deg) }
  12.90323% { transform:rotate(-6deg) }
  18.06451% { transform:rotate(6deg) }
  19.35484% { transform:rotate(6deg) }
  24.51613% { transform:rotate(-6deg) }
  25.80645% { transform:rotate(-6deg) }
  30.96774% { transform:rotate(6deg) }
  32.25807% { transform:rotate(6deg) }
  37.41935% { transform:rotate(-6deg) }
  38.70968% { transform:rotate(-6deg) }
  43.87097% { transform:rotate(6deg) }
  48.3871% { transform:rotate(0deg) }
  100% { transform:rotate(0deg) }
}

header .header_wrapper{
	max-width: 830px;
	width: 83%;
	display: flex;
	justify-content: space-between;
	float: right;
}

header .inner h1{
	font-size: 1.2rem;
	color: #ff5394;
}

header .header_wrapper .sns{
	width: 120px;
	display: flex;
	justify-content: space-between;
}

.hover header .header_wrapper .sns a:hover{
	opacity: 0.7;
}

header .header_wrapper .sns img{
	width: 20px;
	height: 20px;
}

header nav.pc ul{
	max-width: 830px;
	width: 83%;
	font-family: 'Titan One', cursive;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	float: right;
	padding-bottom: 20px;
}

header nav a{
	color: #ff5394;
	padding-bottom: .2em;
 background: linear-gradient(to right, #ffff00 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
	transition: background-position .3s ease-out;
}

header nav a.on{
	background: linear-gradient(transparent 50%, #ffff00 50%);
}

.hover header nav a:hover {
	background-position: 0% bottom;
}

@media screen and (max-width:768px) {
	header{
		border-bottom: none;
		background: transparent;
	}
	header .inner{
		width: 100%;
		margin-top: 0;
	}
	
	header .header_wrapper{
		display: none;
	}
	
	header .logo{
		width: 180px;
		margin: 10px 0 0 2%;
		z-index: 2000;
	}
	
	header .sp_menu{
		position: absolute;
		right: 0;
	}
	
	header .menu_button{
  width: 30px;
  height: 30px;
		box-sizing: content-box;
  top: 10px;
		right: 10px;
  position: relative;
		background: #fff;
		border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
		padding: 5px;
 }
	
 header .menu_buttons span{
  transition: all 0.3s;
  transform: rotate(0deg);
 }
	
 header .m_top{
  width: 30px;
  height: 4px;
  background-color: #ff5394;
  top: 8px;
		position: absolute;
}
	
 header .m_center{
  width: 30px;
  height: 4px;
  background-color: #00a8e2;
  top: 18px;
		position: absolute;
}
	
 header .m_bottom{
  width: 30px;
  height: 4px;
  background-color: #ff5394;
  top: 28px;
		position: absolute;
 }
	
 header .m_top,.m_center,.m_bottom{
  transition: all 0.5s ease-out;}

 header .m_top_click{
  top: 18px;
  transform: rotate(405deg);
 }
 header .m_center_click{
  background-color:rgba(255,255,255,0);
 }
 header .m_bottom_click{
  top: 18px;
  transform: rotate(-405deg);
 }
	
	header .sp_nav{
		text-align: center;
		text-transform: uppercase;
		background: #fff;
		z-index: 9999;
		box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
	}
	
	header .sp_nav li a{
		display: block;
		padding: 13px 0;
	}
	
	header .sp_nav .sp_sns{
		width: 80%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
	}
	header .sp_nav .sp_sns li{
		width: 50px;
	}
	header .sp_nav .sp_sns li img{
		width: 100%;
	}
}

/*----------------
*
*  footer
*
----------------*/

footer{
	color: #ff5394;
	text-align: center;
	background: #c0fcfb;
	padding: 50px 0 20px;
}

footer a{
	color: #ff5394;
	display: block;
}

.hover footer .tw_icon a:hover,
.hover footer .bnr a:hover,
.hover footer .logo a:hover{
	opacity: 0.7;
}

footer .inner{
	width: 960px;
	margin: 0 auto;
}

footer .tw_icon{
	max-width: 50px;
	background: #fff;
	border-radius: 50%;
	padding: 10px;
	margin: 0 auto 50px;
}

footer .tw_icon a{
	width: 30px;
	height: 30px;
	display: block;
}

footer .bnr,footer .nav{
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}

footer .bnr{
	max-width: 620px;
	margin: 20px auto 0;
}

footer .bnr li{
	width: 300px;
	height: 93px;
	background: #fff;
}

footer .bnr li img{
	width: 100%;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
}

.hover footer .nav a:hover{
	color: #FFFF00;
}

footer .logo{
	max-width: 110px;
	margin: 50px auto 30px;
}

footer p small{
	font-size: 1.0rem;
	margin-top: 100px;
}

footer .btn_top{
	width: 50px;
	position: fixed;
	right: 0;
	bottom: 3vh;
}

footer .btn_top a:hover{
	opacity: 0.7;
}

@media screen and (max-width:768px) {
	footer{
		padding-top: 8vh;
	}
	footer .inner{
		width: 100%;
	}
	
	footer .bnr,footer .nav{
		display: block;
	}
	
	footer .bnr{
		margin: 0;
	}
	
	footer .bnr li{
		max-width: 450px;
		margin: 0 auto 2vh;
	}
	
	footer .nav{
		text-transform: uppercase;
		background: #fff;
		border-top: 1px solid #ccc;
	}
	
	footer .nav li a{
		border-bottom: 1px solid #ccc;
		padding: 15px 0;
	}
	
	footer .btn_top{
		bottom: 0;
	}
}

/*----------------
*
*  Top main
*
----------------*/

/*mv*/
.mv_wrapper{
	position: relative;
}

main .mv{
	width: 100%;
	padding-top: 86px;
}

main .mv img{
	width: 100%;
}

/*release*/
.release{
	position: absolute;
	bottom: 20px;
 left: 20px;
}

.release a{
	width: 260px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255,255,255,0.9);
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
	padding: 5px;
}

.release a:hover{
	background: rgba(255,255,255,1);
}

.release figure{
	width: 100px;
}

.release img{
	width: 100%;
	vertical-align: middle;
}

.release .number{
	font-size: 1.2rem;
	color: #fff;
	text-align: center;
	display: inline-block;
	background: #ff5394;
	border-radius: 8px;
	padding: 5px 8px;
}

.release .song_ttl{
	font-size: 100%;
	font-weight: bold;
}

.release .release_date{
	color: #ff5394;
}



/*topic_201901*/
.topic{
	text-align: center;
	padding: 80px 0 80px;
	background-color: #befcfa;
}

.topic h2 span{
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size: 1.8rem;
}

.topic p{
	margin: 0 auto;
	color: #ff0023;
    text-align: center;
}

.topic p b{
	font-size: 115%;
}



/*video_201901*/

.video {

    border-radius: 20px;
    width: 90%;
}




/*about*/
.about{
	text-align: center;
	padding: 80px 0 80px;
}

.about h2 span{
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size: 1.8rem;
}

.about p{
	width: 700px;
	margin: 0 auto;
}

.about p b{
	font-size: 115%;
}

/*member*/
.member{
	/* padding-bottom: 150px; */
}

.member ul{
	width: 960px;
	margin: 0 auto;
}

.hover .member a:hover img{
	opacity: 0.7;
}

/*news*/
.news{
	background: #c0fcfb;
	padding: 80px 0 150px;
}

.news dl{
	width: 960px;
	background: #fff;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
	padding: 40px 98px;
	margin: 50px auto;
}

.news dt{
	width: 170px;
	float: left;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.news dd{
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.news dt:last-of-type,.news dd:last-of-type{
	padding-bottom: 0;
	margin-bottom: 0;
}

.news dd a{
	border-bottom: 1px dashed #ff5394;
}

.hover .news dd a:hover{
	border-bottom: 3px solid #ffff00;
}

/*movie*/
.movie_area_top{
	max-width: 854px;
	padding: 80px 0 10px;
	margin: 0 auto;
}



.movie_area_top .movie_frame_top{
	width: 100%;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
	position: relative;
	padding-top: 56.25%;
	margin: 0 auto 50px;
}

.movie_area_top .movie_frame iframe_top{
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	top: 0;
	right: 0;
}



.movie_area{
	max-width: 854px;
	padding: 80px 0 150px;
	margin: 0 auto;
}

.movie_area .movie_frame{
	width: 100%;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
	position: relative;
	padding-top: 56.25%;
	margin: 0 auto 50px;
}

.movie_area .movie_frame iframe{
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	top: 0;
	right: 0;
}

/*block_area*/
.block_area{
	background: url(../img/common/bg_d_y.svg);
	background-size: 50px;
	padding-bottom: 150px;
}

.block_area .inner{
	width: 960px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}

.schedule,
.twitter{
	padding-top: 86px;
	margin-top: -6px;
}

.schedule_frame,.twitter_frame{
	width: 460px;
	max-height: 460px;
	border: 5px solid #fff;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
	overflow: hidden;
}

.schedule_frame .cal{
	height: 0;
	position: relative;
	padding-bottom: 100%;
}

.schedule_frame iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

@media screen and (min-width:520px) {
.twitter_frame iframe{
		width: 100% !important;
	}
}

@media screen and (max-width:768px) {
	/*release*/
	.release{
		position: static;
	}
	
	.release a{
		width: 280px;
		border: 1px solid #ccc;
		padding: 7px 12px;
		/*margin: 5vh auto 0;*/
		margin: 5vh auto 5vh;
	}
	
	.release .number{
		background: #00a8e2;
	}
	
	.release .release_date{
		color: #00a8e2;
	}
	
	/*about*/
	.about{
		width: 96%;
		padding: 5vh 0 10vh;
		margin: 0 auto;
	}
	
	.about h2 span{
		line-height: 1.5;
		display: block;
		margin-bottom: -30px;
	}
	
	.about p{
		width: 100%;
	}
	
	/*member*/
	.member{
		width: 96%;
		padding: 5vh 0 10vh;
		margin: 0 auto;
	}
	
	.member ul{
		width: 100%;
	}
	
	/*news*/
	.news{
		padding: 5vh 0 10vh;
	}
	
	.news dl{
		width: 96%;
		padding: 5vh 5%;
		margin: 3vh auto;
	}
	
	/*movie*/
	.movie_area{
		width: 96%;
		padding: 5vh 0 10vh;
	}
	
	.movie_area .movie_frame{
		margin: 0 auto 5vh;
	}
	
	/*block_area*/
	.block_area{
		padding: 5vh 0 10vh;
	}
	
	.block_area .inner{
		width: 100%;
		display: block;
	}
	
	.schedule{
		width: 96%;
		margin: 0 auto 10vh;
	}
	
	.twitter{
		width: 96%;
		margin: 0 auto;
	}
	
	.schedule_frame,
	.twitter_frame{
		width: 96%;
		height: 100%;
		margin: 0 auto;
	}
	
	.schedule_frame .cal{
		padding-bottom: 200%;
	}
}

@media screen and (max-width:480px) {
	
	/*about*/
	.about p{
		text-align: centre;
	}
	
	/*member*/
	.member ul li{
		width: 100%;
	}
	
	.member ul li img{
		width: 100%;
	}
	
	.news dt{
		float: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}
}

/*----------------
*
*  profile
*
----------------*/

.profile h2{
	margin-bottom: -36px;
}

.personal_data{
	display: flex;
	justify-content: space-between;
	padding-top: 86px;
}

.personal_data:last-of-type{
	margin-bottom: 150px;
}

.personal_data figure{
	width: 410px;
}

.personal_data figure img{
	width: 100%;
}

.personal_data .contents{
	width: 530px;
}

.personal_data h3{
	font-size: 3.0rem;
	color: #00a8e2;
	line-height: 78px;
	border-top: 3px solid #00a8e2;
	border-bottom: 3px solid #00a8e2;
	padding-left: 20px;
	margin-bottom: 30px;
}

.personal_data h3 span{
	font-size: 2.4rem;
	font-weight: normal;
	margin-left: 1em;
}

.personal_data dt{
	width: 140px;
	line-height: 50px;
	font-weight: bold;
	float: left;
	clear: both;
	padding-left: 20px;
}

.personal_data dd{
	line-height: 50px;
	border-bottom: 1px dotted #00a8e2;
	padding-left: 140px;
}

.personal_data dd:first-of-type{
	border-top: 1px dotted #00a8e2;
}

.personal_data dd.sns a{
	width: 30px;
	display: block;
	float: left;
	line-height: 1;
	text-decoration: none;
	margin: 10px 10px 10px 0;
}

.hover .personal_data dd.sns a:hover{
	opacity: 0.7;	
}

.personal_data dd a img{
	width: 100%;
}

.personal_data dd a.blog{
	width: 120px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #fff;
	background: #ff5394;
	border-radius: 5px;
}

.personal_data dd a.youtebe{
	width: 120px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: url(../img/common/icon_yt.svg) no-repeat 6px;
	background-size: 20%;
	border: 1px solid #434343;
	border-radius: 5px;
	padding-left: 25px;
}

@media screen and (max-width:768px) {
	.profile{
		width: 96%;
		margin: 0 auto;
	}
	
	.personal_data{
		display: block;
		padding-top: 10vh;
	}
	
	.personal_data figure{
		width: 100%;
	}
	
	.personal_data .contents{
		width: 100%;
	}
	
	.personal_data h3{
		font-size: 2.4rem;
		text-align: center;
		line-height: 1.5;
		padding-left: 0;
		margin: 3vh 0;
	}
	
	.personal_data h3 span{
		font-size: 2.0rem;
		margin-left: 0;
	}
	
	.personal_data dt{
		width: 120px;
		padding-left: 2vw;
	}
	
	.personal_data dd{
		padding: 0 2vw 0 120px;
	}
	
	.personal_data dd.sns a {
		width: 44px;
	}
	
	.personal_data dd a.blog,
	.personal_data dd a.youtebe{
		width: 120px;
	}
}

/*----------------
*
*  movie
*
----------------*/

.movie .music_video,
.movie .live,
.movie .drama,
.movie .fishing{
	padding-bottom: 150px;
}

.movie h3{
	font-size: 4.0rem;
	text-align: center;
	color: #00a8e2;
	margin-bottom: 50px;
}

.movie .description{
	width: 700px;
	margin: 0 auto 40px;
}

.movie .description p{
	margin-bottom: 1em;
}

.movie h4{
	font-size: 1.8rem;
	color: #00a8e2;
}

.movie .play_list{
	width: 100%;
	width: 100%;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
 position: relative;
 padding-top: 56.25%;
	margin: 0 auto;
}

.movie .play_list iframe{
	width: 100% !important;
 height: 100% !important;
	position: absolute;
	top: 0;
	right: 0;
}

@media screen and (max-width:768px) {
	.movie{
		width: 96%;
		margin: 0 auto;
	}
	
	.movie .music_video,
	.movie .live,
	.movie .drama,
	.movie .fishing{
		padding: 5vh 0 10vh;
	}
	
	.movie h3{
		font-size: 3.0rem;
		margin-bottom: 3vh;
	}
	
	.movie .description{
		width: 100%;
	}
}