@charset "UTF-8";
/* CSS Document */
html {
	scroll-padding-top: 60px;
}
.pc { display: none; }
.sp { display: block!important; }

img{width: 100%;}

.container{
	max-width: 100%!important;
	padding: 40px 20px;
}
.row{
	flex-direction: column;
}
.row_c{
	justify-content: flex-start;
}
.sub_title h2{
	margin-bottom: 24px;
	padding-left: 20px;
	border-left: solid 7px var(--purple);
	line-height: 1.6;
}
.sub_title span.txt_hosoku{
	margin-left: -4px;
}

/*==================================================
nav css
===================================*/
.nav-container{
	padding-left: 20px;
	padding-right: 20px;
	height: 60px;
}
.nav-l{
	padding-top: 16px;
}
.nav-l a{
	display: inline-block;
}
.nav-l a img{
	height: 32px;
	width: auto;
}
.nav-r li{
	margin-right: 0;
}

/**************** 以下、ハンバーガーボタンのスタイリング ****************/
.btn {
  /* ボタンの配置位置  */
  position: fixed;
  top: 20px;
  right: 20px;
  /* ボタンの大きさ  */
  width: 30px;
  height: 20px;
  /* バーガーの線をボタン範囲の中心に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 最前面に */
  z-index: 10;
}

/***** 真ん中のバーガー線 *****/
.btn-line {
  /* 線の長さと高さ */
  width: 100%;
  height: 2px;
  /* バーガー線の色 */
  background-color: var(--dark-purple);
  /* バーガー線の位置基準として設定 */
  position: relative;
  transition: .2s;
}

/***** 上下のバーガー線 *****/
.btn-line::before,
.btn-line::after {
  content: "";
  /* 基準線と同じ大きさと色 */
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--dark-purple);
  transition: .2s;
}


.btn-line::before {
  /* 上の線の位置 */
  transform: translateY(-10px);
}


.btn-line::after {
  /* 下の線の位置 */
  transform: translateY(10px);
}

/***** メニューオープン時 *****/
.btn-line.open {
  /* 真ん中の線を透明に */
  background-color: transparent;
}

.btn-line.open::before,
.btn-line.open::after {
  content: "";
  transition: .2s;
}

.btn-line.open::before {
  /* 上の線を傾ける */
  transform: rotate(45deg);
}

.btn-line.open::after {
  /* 上の線を傾ける */
  transform: rotate(-45deg);
}

/**************** ここまで、ハンバーガーボタンのスタイリング ****************/


/**************** 以下、メニューのスタイリング ****************/
.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
　　　　/*  メニューを非表示に  */
  visibility: hidden;
  opacity: 0;
  /* メニューを縦に */
  display: flex;
  flex-direction: column;
	justify-content: flex-start;
	align-items: center;
  color: #efefef;
  background-color: rgba(255, 255, 255, 1);
  transition: opacity .3s;
	margin-top: 60px;
	visibility: hidden;
}

.menu-list {
  width: 100%;
  height: 13%;
  /* メニューテキスト位置をリスト内中心に */
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-list:hover {
  cursor: pointer;
}

.menu.open {
/*   transition: visibility 1s ease-in; */
  visibility: visible;
  opacity: 1;
  transition: opacity .5s;
	visibility: visible;
	
}
/**************** ここまで、メニューのスタイリング ****************/


/*==================================================
TOP css
===================================*/
#main-visual{
	margin-top: 60px;
	background-image: url("../img/bg_score_m.png"),url("../img/bg_top.png");
	background-position: center 50%,center;
}
#main-visual .container-800{
	padding-top: 40px;
	padding-bottom: 40px;
}
#main-visual .box-l h1{
	line-height: 1.6;
	margin-bottom: 24px;
}
#main-visual .box-l h1 img{
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 32px;
}
#main-visual .box-r{margin-left: 0;}
#main-visual img.img_dvd{
	max-width: 190px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 24px;
}


#about .box-l p:first-of-type{
	margin-bottom: 24px;
	line-height: 2;
}
#about .box-l p:last-of-type{
	margin-bottom: 24px;
	line-height: 1.8;
}
#about .box-r img{
	margin-left: 0;
}


#composition .flow>.row{
	
}
#composition .flow_box{
	width: 100%;
	margin-right: 0;
	margin-bottom: 24px;
}
#composition .flow_box:last-of-type{
	margin-bottom: 48px;
}
#composition .flow img{
	max-width: 360px;
}
#composition .box_main{
		max-width:100%;
}
#composition .box_main .row{
	align-items: flex-start;
}
#composition .box_main .row img:first-of-type{
	margin-right: 0;
	margin-bottom: 8px;
}


#composition .item_box h3{
	width: 100%;
	text-align: left;
	padding: 14px 20px;
}
#composition .item_box p{
	border: solid 1px var(--light-purple);
	text-align: left;
}
#composition .item_box p.box2{
	width: 100%;
	border: solid 1px var(--light-purple);
	margin-bottom: -1px;
}
#composition .item_box p.box1, #composition .item_box_narration{
	width: 100%;
}
#composition .item_box .item_box_main{
	width: 100%;
}
#composition .box_add p{
	width: 100%;
}
#composition .item_box_main_detail{
	max-width: 480px;
	margin-right: 0;
}
#composition .item_box_main_detail img{
	width: 100%;
	height: auto;
}
#composition .item_box .item_box_narration span.txt_kome{
	margin-left: 0;
}
#composition .item_box .item_box_narration p{
	text-indent: -4rem;
	padding-left: 80px;
}
#composition .item_box_main_normal{
	padding: 20px 20px 0 20px;
}

#sample_movie .sample_detail{
	max-width: 480px;
	width: 100%;
	margin-bottom: 40px;
}
#sample_movie .sample_detail:last-of-type{
	margin-bottom: 0;
}
#sample_movie table{
	margin-top: 16px;
}
#sample_movie table th{
	margin-right: 16px;
}

#music .container>.row{
	margin-bottom: 32px;
	align-items: flex-start;
}
#music .container>.row>p{
	width: 100%;
	margin-right: 0;
}
#music .container>.row>.row{
	flex-direction: row;
	margin-bottom: 0;
}
#music .container>.row>.row img:first-of-type{
	width: 40%;
	height: auto;
}
#music .container>.row>.row img:last-of-type{
	width: 51%;
	height: auto;
}
#music .music_mihon{
	margin-top: 40px;
}
#music .music_mihon ul{
	margin-right: 0;
}
#music .music_mihon ul li{
	margin-bottom: 12px;
}


#theme .btn-red{
	margin-top: 32px;
}
#theme .theme_sample_box .row>div{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	max-width: 100%;
	margin-right: 0;
}
#theme .theme_sample_box .row>div:first-of-type{
	flex-direction: row;
}
#theme h4{
	width: 48%;
	height: 48px;
}
#theme h4:first-of-type{margin-bottom: 8px;}
#theme .theme_sample .row div img:first-of-type{margin-bottom: 8px;}
#theme .theme_sample img{
	width: 100%;
	max-width: 48%;
}

#narration .sample_na_midashi{
	flex-direction: column;
}
#narration .sample_na_midashi h4{
	width: 100%;
	height: auto;
	justify-content: flex-start;
	padding: 8px 20px;
}
.sample_na_midashi p{
	padding: 8px 20px;
}
p.na_detail{
	padding: 20px;
}


#dvd .container>.row .box-l p{
	padding-top: 0;
	margin-right: 0px;
}
#dvd .logo_box{
	width: 100%;
	max-width: 400px;
	margin-bottom: 24px;
	justify-content: space-between;
}
#dvd .logo_box img:first-of-type{
	width: 40%;
	height: auto;
	margin-right: 16px;
}
#dvd .logo_box img:last-of-type{
	width: 51%;
	height: auto;
}
#dvd img.original_dvd{
	max-width: 264px;
	margin-left: auto;
	margin-right: auto;
}



#inquiry p{margin-top: 24px; margin-bottom: 32px;}