/*ボーダーの幅計算対策*/
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*基本セット*/

img {
	border:none;
}



/*floatクリア*/
.clear-l{
	clear:left;
}
.clear-r{
	clear:right;
}



/*ここからFONT*/

.text8 { font-size:63％; }
.text9 { font-size:69％; }
.text10 { font-size:77%; }
.text11 { font-size:85%; }
.text12 { font-size:93%; }
.text13 { font-size:100%; }
.text14 { font-size:108%; }
.text15 { font-size:116%; }
.text16 { font-size:123.1%; }
.text17 { font-size:131%; }
.text18 { font-size:138.5%; }
.text19 { font-size:146.5%; }
.text20 { font-size:153.9%; }
.text21 { font-size:161.6%; }
.text22 { font-size:167%; }
.text23 { font-size:174%; }
.text24 { font-size:182%; }
.text25 { font-size:189%; }
.text26 { font-size:197%; }


.font-r { color:#FF0000;}

/*ここからNoto Sans Japaneseの太さ*/
.noto100 {font-weight:100;}
.noto200 {font-weight:200;}
.noto300 {font-weight:300;}
.noto400 {font-weight:400;}
.noto500 {font-weight:500;}
.noto600 {font-weight:600;}
.noto700 {font-weight:700;}
.noto800 {font-weight:800;}
.noto900 {font-weight:900;}



/*ここからbody*/
body {
	color: #000000;
	font-size:77%;
	background-color: #ffffff;
	width:100%;
	line-height: 1.5;
	margin: 0px;
	padding : 0px;
	font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}

/*ここまでbody*/




#container {
	text-align: left;
	margin: 0px auto;
	padding : 0px;
	height: auto;
	width: auto;
}


/* ↓メニュー部分ここから↓ */




#header-menu {
	height: auto;
	width: auto;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background-color: #1187cf;
}


#header-menu .title_logo {
	height: 122px;
	width: auto;
	padding: 40px 0px 0px 16px;
}



#header-menu ul {
	display: flex;
	justify-content: flex-end;
	flex-flow: wrap;
	width: auto;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 6px 0px 6px 20px;
	background-color: #212121;
}

#header-menu ul li {
	color: #ffffff;
	font-size: 13px;
	font-weight:bold;
	height: auto;
	margin: 10px 20px 10px 0px;
	padding: 0px;
	list-style-type: none;
	float:right;
}



#header-menu ul li a {
	color: #ffffff;
	text-decoration: none;
	height: 30px;
}

#header-menu ul li a:hover {
	color: #eac129;
	height: 30px;
}

#header-banner {
	height: auto;
	width: auto;
	padding: 0px 0px 24px 0px;
	margin: 0px 0px 0px 0px;
	background-color: #212121;
}

#header-banner .banner {
  position: relative;
	text-align: center;
	height: auto;
	width: auto;
	aspect-ratio: 2 / 1;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background-color: #212121;
	animation-name:fadeInAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeInAnime{
  	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
}


#header-banner .banner .header_movie{
	height: 100%;
	max-width: 100%;
}




#header-banner .banner .header_movie_text{
	position: absolute;
	top: 30%;
	left: 0%;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 10px;
}


#header-banner .banner .header_movie_text .text1{
	display: block;
	height:50%;
	width:100%;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	color: #ffffff;
	font-size: clamp(1rem, -0.227rem + 6.14vw, 4.375rem);
	text-align:left;


}


#header-banner .banner .header_movie_text .text_border{
	display: block;
	width:50%;
	font-size: 1px;
	border-bottom: 2px solid #ffffff;
	margin:4px 0px 12px 0px;
}


#header-banner .banner .header_movie_text .text2{
	display: block;
	height:50%;
	width:100%;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	color: #ffffff;
	font-size:clamp(0.625rem, 0.384rem + 1.2vw, 1.875rem);
	text-align:left;
}








/* ↑メニュー部分ここまで↑ */





/* ↓フッターメニュー部分ここから↓ */




#footer-menu {
	height: auto;
	width: auto;
	padding: 0px 0px 80px 0px;
	margin: 0px 0px 0px 0px;
	background-color: #1187cf;
}



#footer-menu ul {
	display: flex;
	justify-content: flex-end;
	flex-flow: wrap;
	width: auto;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding:6px 0px 6px 20px;
	background-color: #212121;
}

#footer-menu ul li {
	color: #ffffff;
	font-size: 13px;
	font-weight:bold;
	height: auto;
	margin: 10px 20px 10px 0px;
	padding: 0px;
	list-style-type: none;
	float:right;
}



#footer-menu ul li a {
	color: #ffffff;
	text-decoration: none;
	height: 30px;
}

#footer-menu ul li a:hover {
	color: #eac129;
	height: 30px;
}

#copyright {
	padding:20px 0px 0px 0px;
	text-align:center;
	color: #ffffff;
	font-size: 10px;
}



/* ↑フッターメニュー部分ここまで↑ */








/* ↓TOP内容部分ここから↓ */

#top_contents{
	height: auto;
	width:  auto;
	padding: 1px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	
}

.top_banner_button{
	display: block;
	position: relative;
	animation: fadeIn linear both;
	animation-timeline: view();
	animation-range: entry 1% cover 30%;
	margin: 0px 0px 1px 0px;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		clip-path: inset(45% 20% 45% 20% round 100px);
	}
	to {
		opacity: 1;
		clip-path: inset(0% 0% 0% 0%);
	}
}



.top_banner_button img{
	width: 100%;
	height: auto;
	display: block;
}


.top_banner_button .title_text{
	position: absolute;
	left: 50%;
	top: 45%;
 	width: 100%;
	transform: translate(-50%,-50%);
	display: block;
	padding: 4px 0px 4px 0px;
	transition: 0s;
	text-align: center;
	color: #ffffff;
	font-size: clamp(1.25rem, 0.341rem + 4.55vw, 3.75rem);
	font-weight: bold;
	letter-spacing: 4px;
}


.top_banner_button .link_text{
	position: absolute;
	left: 50%;
	top: 65%;
	transform: translate(-50%,-50%);
	display: block;
	height: auto;
 	min-width: 360px;
 	max-width: 700px;
	aspect-ratio: 7 / 1;
	padding: 6px 20px 4px 20px;
	text-align: center;
	color: #ffffff;
	font-size: clamp(0.5rem, 0.318rem + 0.91vw, 1rem);
	font-weight: normal;
	letter-spacing: 0.5px;
}




/* ↓各コンテンツ内容部分ここから↓ */


#contents_container{
	height: auto;
	width:  auto;
	padding: 0px 0px 0px 0px;
	margin: 40px 0px 40px 0px;
	
}



#contents_title {
	display: block;
	position: relative;
	animation-name:fadeInAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeInAnime{
  	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
}


#contents_title img{
	width: 100%;
	height: auto;
	display: block;
}

#contents_title .title_text{
	position: absolute;
	left: 50%;
	top: 50%;
 	width: 100%;
	transform: translate(-50%,-50%);
	display: block;
	padding: 4px 0px 4px 0px;
	transition: 0s;
	text-align: center;
	color: #ffffff;
	font-size: clamp(1.25rem, 0.568rem + 3.41vw, 3.125rem);
	font-weight: bold;
	letter-spacing: 4px;
}



.contents_list_title{
	height: 50px;
	width: 100%;
	padding: 12px 0px 0px 22px;
	margin: 0px 0px 0px 0px;
	background-image: url(./img/contents_list_title.png);
	background-repeat: no-repeat;
	background-position: left,bottom;
	background-color: #1187cf;
	text-align: left;
	color: #ffffff;
	font-size: 18px;
	font-weight:bold;
}

.contents_list_box{
	text-align: left;
	color: #212121;
	font-size: 16px;
	line-height: 26px;
	padding: 50px 20px 50px 22px;

}

.contents_list_box .link_text{
	color: #212121;
	font-size: 16px;
	line-height: 18px;
	text-align: right;
	height: auto;
	width:  auto;
	padding: 0px 0px 0px 0px;
	margin: 20px 0px 0px 0px;
	background-color: #ffffff;
}

.contents_list_box .link_text a {
	color: #1187cf;
	text-decoration: none;
}

.contents_list_box .link_text a:hover {
	color: #51bdff;
}


.contents_list_box img{
	height: auto;
	max-width: 100%;
	margin: 0px 0px 0px 0px;
}


.contents_flexbox{
	display: flex;
	flex-wrap: wrap;
}

.contents_flexbox .contents_flexbox_left{
	width: 381px;
	margin: 0px 20px 0px 0px;
}

.contents_flexbox .contents_flexbox_right{
	margin: 0px 0px 0px 0px;
}











.contact_link_box{
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
	margin: 20px 0 0px 0;
}



.contact_link_button{
	border-radius: 20px;
	display: block;
	height: auto;
	max-width: 100%;
	padding: 15px;
	box-sizing: border-box;
	background: #eac129;
	color: #ffffff;
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	margin: 10px 0;
	border-style:none;
	cursor: pointer;

}

.contact_link_button:hover{
	background: #ffd741;
}






/* ↓マネージメントここから↓ */

.contents_list_box .contents_artist_name1{
	font-size: 20px;
	color: #1187cf;
	line-height: 26px;
	height: auto;
	width: 74%;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background-color: #ffffff;
}

.contents_list_box .contents_artist_name2{
	font-size: 12px;
	color: #212121;
	line-height: 14px;
	height: auto;
	width: 74%;
	padding: 0px 0px 0px 10px;
	margin: 0px 0px 10px 0px;
	background-color: #ffffff;
}

.contents_list_box .other{
	font-size: 14px;
	color: #212121;
	line-height: 200%;
	line-height: 26px;
	height: auto;
	width:  auto;
	padding: 0px 0px 0px 0px;
	margin: 10px 0px 40px 0px;
	background-color: #ffffff;
}



/* ↓音楽出版・原盤制作ここから↓ */

.contents_list_box .contents_disc{
	padding: 0px 0px 0px 0px;
	margin: 20px 0px 0px 0px;
	background-color: #ffffff;
}

.contents_list_box .contents_disc .name{
	font-size: 18px;
	color: #1187cf;
	line-height: 22px;
	height: auto;
	margin: 0px 0px 20px 0px;
}







/* ↓お問い合わせここから↓ */


.contact_button_box{
  display: flex;
  justify-content: center;
    flex-wrap: wrap;
}

.contact_button{
	border-radius: 100px;
	display: block;
	width: 200px;
	padding: 15px;
	box-sizing: border-box;
	background: #1187cf;
	color: #ffffff;
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	margin: 10px 5px 10px 5px;
	border-style:none;
	cursor: pointer;

}

.contact_button:hover{
	background: #32b1ff;
}


/* ↓会社概要ここから↓ */


.company_contactbutton_box{
  display: flex;
  justify-content: left;
    flex-wrap: wrap;
}

.company_contact_button{
	border-radius: 100px;
	display: block;
	width: 340px;
	padding: 15px;
	box-sizing: border-box;
	background: #1187cf;
	color: #ffffff;
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	margin: 10px 0px 0px 0px;
	border-style:none;
	cursor: pointer;

}

.company_contact_button:hover{
	background: #32b1ff;
}