@charset "UTF-8";

/*** The new CSS reset - version 1.11.1 (last updated 24.10.2023) ***/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg*, symbol*)) {
	all: unset;
	display: revert;
}
*, *::before, *::after {
	box-sizing: border-box;
}
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
		overflow-x: hidden;
	scroll-padding-top: 96px;
}

::-webkit-full-page-media, :future, :root html:target{
    scroll-behavior: smooth;
	scroll-padding-top: 108px;
}

body.fixed {
  position: fixed;
  width: 100%;
  overflow: hidden;
}
a, button {
	cursor: revert;
}
a {
  -webkit-tap-highlight-color:transparent; /* 強調をなくす */
  cursor:pointer;
}
li, button{
	-webkit-tap-highlight-color:transparent; /* 強調をなくす */
}
ol, ul, menu, summary {
	list-style: none;
}
img {
	max-inline-size: 100%;
	max-block-size: 100%;
}
table {
	border-collapse: collapse;
}
input, textarea {
	-webkit-user-select: auto;
}
textarea {
	white-space: revert;
}
meter {
	-webkit-appearance: revert;
	appearance: revert;
}
:where(pre) {
	all: revert;
	box-sizing: border-box;
}
::placeholder {
	color: unset;
}
:where([hidden]) {
	display: none;
}
:where([contenteditable]:not([contenteditable="false"])) {
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	-webkit-line-break: after-white-space;
	-webkit-user-select: auto;
}
:where([draggable="true"]) {
	-webkit-user-drag: element;
}
:where(dialog:modal) {
	all: revert;
	box-sizing: border-box;
}
/* CSS Document ******************************************* */
/*変数*/ :root {
	--black: #333;
	--pureblack: #000;
	--white: #fff;
	--purple: #752782;
	--light-purple: #A76395;
	--dark-purple: #4A2452;
	--red: #BE4B4B;
	--pink: #FF99D5;
	--blue: #99DBF7;
	--bg-purple: #E6D5E4;
	--bg-yellow: #FBF6ED;
	
	--bg-gray: #737373;
	--bg-light-gray: #EAEAEA;
	--line-gray: #707070;
	--border-gray: #CDCDCD;
	--tag-gray: #808080;
	
	/*font*/
	--fz42: clamp(2rem, 1.066rem + 1.95vw, 2.625rem);/*42px -> 32px*/
	--fz32: clamp(1.5rem, 0.752rem + 1.56vw, 2rem); /*32px -> 24px*/
	--fz24: clamp(1.313rem, 1.032rem + 0.58vw, 1.5rem); /*24px -> 21px*/
	--fz21: clamp(1.125rem, 0.845rem + 0.58vw, 1.313rem); /*21px -> 18px*/
	--fz18-17: clamp(1.063rem, 0.969rem + 0.19vw, 1.125rem); /*18px -> 17px*/
	--fz18-16: clamp(1rem, 0.813rem + 0.39vw, 1.125rem); /*18px -> 16px*/
	--fz16: clamp(0.938rem, 0.844rem + 0.19vw, 1rem); /*16px -> 15px*/
	
	--container: clamp(60px, 8vw, 120px);
}

html {}
body {
	background: var(--white);
	color: var(--black);
}
.sp{display: none;}
.container{
	max-width: 1120px;
	margin: 0 auto;
	padding: 64px 20px;
}
.container-800{
	max-width: 840px;
	margin: 0 auto;
	padding: 64px 20px;
}
.row{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.row_c{
	display: flex;
	justify-content: center;
	align-items: center;
}
.m-lr-auto{margin-left: auto; margin-right: auto;}
.nav-96{
	padding-top: 96px!important;
	margin-top: -96px!important;
}

/*==================================================
font css
===================================*/
p,ul,li,h2,h3,h4,th,td{
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: 0.05em;
	color: var(--black);
}

.ff-serif-500{ /*Medium*/
	font-family: "Noto Serif JP", serif!important;
	font-weight: 500!important;
}
.ff-serif-600{ /*SemiBold*/
	font-family: "Noto Serif JP", serif!important;
	font-weight: 600!important;
}
.ff-serif-700{ /*Bold*/
	font-family: "Noto Serif JP", serif!important;
	font-weight: 700!important;
}

.fz42{font-size: var(--fz42);}
.fz32{font-size: var(--fz32);}
.fz24{font-size: var(--fz24);}
.fz21{font-size: var(--fz21);}
.fz18-17{font-size: var(--fz18-17);}
.fz18-16{font-size: var(--fz18-16);}
.fz16{font-size: var(--fz16);}

.fw500{font-weight: 500!important;}
.fw600{font-weight: 600!important;}
.fw700{font-weight: 700!important;}

.ls50{letter-spacing: 0.05em!important;}
.ls75{letter-spacing: 0.075em!important;}
.ls100{letter-spacing: 0.1em!important;}

.lh17{line-height: 1.7;}


/*==================================================
sub_title css
===================================*/
.sub_title{padding-top: 8px; margin-bottom: 24px;}
.sub_title h2{
	padding-left: 24px;
	margin-bottom: 32px;
	border-left: solid 8px var(--purple);
	line-height: 1.3;
	letter-spacing: 0.05em;
}
.sub_title span.txt_hosoku{
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	color: var(--black);
	font-size: var(--fz18-16);
	margin-left: 16px;
}

/*==================================================
番号装飾 css
===================================*/
span.item_box_num{
	font-size:1.5rem;
	font-weight: 600;
	color: var(--white);
	position: relative;
	padding: 0 13px;
	margin-right: 16px;
	z-index: 2;
}
span.item_box_num:before{
	position: absolute;
	content: '';
	top: 0;
	left:0;
	display: block;
	width: 40px;
	height: 40px;
	background-color: var(--light-purple);
	border-radius: 20px;
	z-index: -1;
}

/*==================================================
帯h3 css
===================================*/
h3.obi_midashi{
	font-size: var(--fz21);
	font-weight: 600;
	color: var(--white);
	background-color: var(--light-purple);
	padding: 10px 20px;
	margin-bottom: 24px;
}

/*==================================================
ナレーション サンプル css
===================================*/
.sample_na{}
.sample_na_midashi{
	display: flex;
	justify-content: flex-start;	
	align-items: stretch;
	max-width: 800px;
}
.sample_na_midashi h4{
	font-size:1.125rem;
	font-weight: 600;
	color: var(--white);
	background-color: var(--light-purple);
	width: 108px;
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sample_na_midashi p{
	font-size:1.125rem;
	font-weight: 600;
	color: var(--light-purple);
	border: solid 1px var(--light-purple);
	padding: 0 24px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
}
p.na_detail{
	max-width: 800px;
	background-image: url("../img/bg_na.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	padding: 32px;
	font-size: var(--fz18-16);
	font-weight: 500;
	line-height: 2;
}

/*==================================================
サンプル タイトルcss
===================================*/
.sample_title{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
}
.sample_title p.sample_num{
	font-weight: 600;
	color: var(--white);
	background-color: var(--light-purple);
	padding: 6px 8px;
	min-height: 40px;
}
.sample_title h3{
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--light-purple);
	padding: 4px 8px;
	border: solid 1px var(--light-purple);
	flex-grow: 2;
	min-height: 40px;
	background-color: var(--white);
}

/*==================================================
color
===================================*/
.color-purple{color: var(--purple);}
.color-dark-purple{color: var(--dark-purple);}
.color-light-purple{color: var(--light-purple);}
.color-red{color: var(--red);}

/*==================================================
nav
===================================*/
header button {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  border: 0;
  background: transparent;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
	display: none;
}

header button:hover {
  cursor: pointer;
}
.nav-container{
	width: 100%;
	height: 96px;
	background-color: var(--white);
	border-bottom: solid 1px var(--dark-purple);
	padding-left: 32px;
	padding-right: 32px;
	position: fixed;
	top: 0;
	z-index: 99;
}
.nav-container .row{height: 100%;}
.nav-l{
	max-width: 240px;
	min-width: 154px;
	margin-right: 40px;
}
img.nav-logo{
	
	height: auto;
}
.nav-r{
	display: flex;
	justify-content: flex-end;
	align-items: center;
/*	flex-wrap: wrap;*/
}
.nav-r a{
	font-family: "Noto Serif JP", serif!important;
	font-weight: 600!important;
	font-size:1.125rem;
	color: var(--dark-purple);
	text-decoration: none;
	padding-bottom: 2px;
/*	transition: all 0.1s ease;*/
	letter-spacing: 0.05em;
	line-height: 1.5;
}
.nav-r li{
	margin-right: 24px;
}
.nav-r li:last-of-type{
	margin-right: 0;
}
.nav-r a:hover{
	border-bottom: solid 2px var(--dark-purple);
}
a.nav-border{
	border-bottom: solid 2px var(--dark-purple);
}

/*==================================================
btn
===================================*/
.btn-red{
	max-width: 360px;
	height: 74px;
}
.btn-red a{
	width: 100%;
	height: 100%;
	color: var(--white);
	font-size: var(--fz21);
	text-decoration: none;
	font-weight: 600;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--red);
	border-radius: 37px;
	letter-spacing: 0.05em;
	transition: all 0.3s ease;
}
.btn-red a:hover{opacity: 0.6;}
.btn-movie a{
	padding-left: 104px;
	position: relative;
}
.btn-movie a:before{
	position: absolute;
	content: '';
	left:40px;
	top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	display: block;
	width: 46px;
	height: 33px;
	background-image: url("../img/icon_movie.svg");
	background-size: contain;
	background-repeat: no-repeat;
}
.btn-music a{
	padding-left: 96px;
	position: relative;
}
.btn-music a:before{
	position: absolute;
	content: '';
	left:40px;
	top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	display: block;
	width: 40px;
	height: 40px;
	background-image: url("../img/icon_music.svg");
	background-size: contain;
	background-repeat: no-repeat;
}


.btn-light-purple{
	max-width: 360px;
	height: 74px;
}
.btn-light-purple a{
	width: 100%;
	height: 100%;
	color: var(--white);
	font-size: var(--fz21);
	text-decoration: none;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--light-purple);
	border-radius: 37px;
	letter-spacing: 0.05em;
	transition: all 0.3s ease;
}
.btn-light-purple a:hover{opacity: 0.6;}

/*==================================================
サンプル動画 css
===================================*/
a.link_sample_movie{
	position: relative;
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 0;
}
a.link_sample_movie:after{
	position: absolute;
	content: '';
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	display: block;
	width: 96px;
	height: 68px;
	background-image: url("../img/icon_YouTube.svg");
	background-size: contain;
	background-repeat: no-repeat;
	transition: all 0.3s ease;
}
a.link_sample_movie:hover:after{
	opacity: 0.6;
}
/*==================================================
pagetop css
===================================*/
.page-top { display: none; margin: 0; padding: 0; }
.page-top p { margin: 0; padding: 0; position: fixed; right: 16px; bottom: 16px; z-index: 10;}
.move-page-top { display: block; background: #2a2b30; width: 50px; height: 50px; cursor: pointer; color: #fff; line-height: 50px; text-decoration: none; text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0.60; border-radius: 25px; }
a.move-page-top:hover { color: #fff; text-decoration: none; }



/*==================================================
メインビジュアル
===================================*/
#main-visual{
	background-image: url("../img/bg_score.png"),url("../img/bg_top.png");
	background-size: contain,cover;
	background-repeat: no-repeat,no-repeat;
	background-position: center 35%,center;
	margin-top: 96px;
}

#main-visual .container-800{
	padding-top: 80px;
	padding-bottom: 80px;
}

#main-visual .box-l{
	text-align: center;
}
#main-visual .box-l h1{
	line-height: 1.5;
	margin-bottom: 40px;
}
#main-visual .box-l h1 img{
	margin-top: 40px;
	margin-bottom: 0px;
	max-width: 400px;
	height: auto;
}
#main-visual .box-l h1 span{
	letter-spacing: 0.25em;
}

#main-visual .box-r{
	margin-left: 88px;
	max-width: 354px;
}
#main-visual .box-r img{
	width: 100%;
	height: auto;
}
#main-visual .btn-red{
	margin-bottom: 16px;
	margin-left: auto;
	margin-right: auto;
}

/*==================================================
about
===================================*/
#about{
	background-color: var(--bg-purple);
}
#about .container{
}
#about img.img_logo{
	width: 280px;
	height: auto;
}
#about .box-l p span:first-of-type{
	display: inline-block;
}
#about .box-l p:first-of-type{
	line-height: 1.8;
	margin-bottom: 32px;
}
#about .box-r img{
	max-width: 360px;
	margin-left: 40px;
}

/*==================================================
composition 構成
===================================*/
#composition{}
#composition .container{
}
#composition .flow{
	background-color: var(--bg-purple);
	padding: 32px;
	position: relative;
	margin-bottom: 32px;
}
#composition .flow>.row{
	align-items: flex-start;
	 flex-wrap: wrap;
}
#composition .flow img{
	max-width: 232px;
	height: auto;
}
#composition .flow_box{
	margin-right: 40px;
	position: relative;
}
#composition .flow_box:before{
	position: absolute;
	content: '';
	width: 100%;
	height: 1px;
	background-color: var(--black);
	top: 14px;
}
#composition .flow_box:last-of-type{
	margin-right: 0;
}
#composition .flow_box h3{
	font-size: var(--fz18-17);
	font-weight: 500;
	position: relative;
	background-color: var(--bg-purple);
	padding: 0 10px 10px 0;
	display: inline-block;
}
#composition .flow_box p{margin-top: 16px;}
#composition .flow>p.flow_fixed{
	position: absolute;
	right: 32px;
	bottom: 32px;
}
#composition .box_main{
		max-width: 472px;
}
#composition .box_main .row{
	justify-content: flex-start;
}
#composition .box_main .row img:first-of-type{margin-right: 8px;}

/*表*/
#composition .item_box {
	margin-bottom: 24px;
}
#composition .item_box .row{
	align-items: stretch;
}
#composition .item_box h3{
	background-color: var(--light-purple);
	width: 224px;
	text-align: center;
	font-size: var(--fz21);
	color: var(--white);
	font-weight: 600;
	padding: 16px 10px ;
	line-height: 1.3;
}
#composition .item_box h3 span{
	font-size: var(--fz18-16);
	line-height: 2;
}
#composition .item_box h3 span.txt_kome{
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
}
#composition .item_box p{
	font-weight: 600;
	text-align: center;
	border: solid 1px var(--light-purple);
	padding: 10px 20px;
	border-left: none;
}

/*本編*/
#composition .item_box .item_box_main{
	width: calc(100% - 224px);
	border: solid 1px var(--light-purple);
}
#composition .item_box .item_box_main p{
	text-align: left;
	border: none;
}
#composition .item_box .item_box_main ul{margin-bottom: 16px;}
#composition .item_box .item_box_main li{
	font-size: var(--fz21);
	font-weight: 600;
	margin-left: 3.8rem;
	text-indent: -3.8rem;
	line-height: 1.5;
}
#composition .item_box_main_detail{
	margin-right: 20px; 
	margin-bottom: 24px;
	max-width: 256px;
	max-height: auto;
}
#composition .item_box_main_detail:last-of-type{margin-right: 0;}
/*#composition .item_box_main_detail:nth-of-type(3n){margin-right: 0;}*/
#composition .item_box_main_detail img{
	width: 256px;
	height: auto;
}
#composition .item_box_main_detail p{padding: 0; margin-top: 8px;}
#composition .item_box_main_detail p a{
	color: var(--light-purple);
}
#composition .item_box_main_normal{
	padding: 20px 0px 0px 20px;
}
#composition .item_box_main_normal .row{
	flex-wrap: wrap;
	justify-content: flex-start;
}
/*追加版*/
#composition .item_box_main_add{
	background-color: var(--bg-purple);
	padding: 20px 20px 0px 20px;
}
#composition .box_add{
	margin-bottom: 24px;
}
#composition .box_add .row{
	justify-content: flex-start;
}
#composition .box_add h4{
	color: var(--white);
	font-size: var(--fz18-17);
	padding: 10px 20px;
	background-color: var(--light-purple);
	font-weight: 600;
}
#composition .box_add p{
	width: calc(100% - 100px);
	color: var(--light-purple);
	background-color: var(--white);
	border: solid 1px var(--light-purple)!important;
}
#composition .item_box_main_add>.row{
	flex-wrap: wrap;
	justify-content: flex-start;
}

/*ナレーション*/
#composition .item_box .item_box_narration p{
	text-align: left;
	margin-bottom: -1px;
	text-indent: -4rem;
	padding-left: 80px;
}
#composition .item_box .item_box_narration p:last-of-type{
	margin-bottom: 0;
}
#composition .item_box .item_box_narration span.txt_kome{
	font-size: var(--fz18-16);
	font-weight: 400;
/*	margin-left: 64px;*/
}
#composition .item_box p.box1, #composition .item_box_narration{
	width: calc(100% - 224px);
}
#composition .item_box p.box2{
	width: calc((100% - 224px) / 2);
}
/*レスポンシブ 突然改行される不具合解消用*/
#composition .item_box .item_box_narration p:nth-of-type(1),#composition .item_box .item_box_narration p:nth-of-type(2),#composition .item_box .item_box_narration p:nth-of-type(4){
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	text-indent: 0rem;
	padding-left: 16px;
	line-height: 2;
}
#composition .item_box .item_box_narration p:nth-of-type(1) span.item_box_num,#composition .item_box .item_box_narration p:nth-of-type(2) span.item_box_num,#composition .item_box .item_box_narration p:nth-of-type(4) span.item_box_num{
	line-height: 1.6;
	margin-right: 21px;
}
/* end レスポンシブ 突然改行される不具合解消用*/

/*==================================================
サンプル動画 css
===================================*/
#sample_movie{
	background-color: var(--bg-yellow);
}
#sample_movie .container>.row{
	align-items: flex-start;
}
#sample_movie .sample_detail{
	width: 32%;
}

#sample_movie .sample_detail a{
}
#sample_movie table{
	text-align: left;
	margin-top: 24px;
}
#sample_movie table th{
	position: relative;
	padding-left: 20px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin-right: 24px;
	width: 140px;
}
#sample_movie table th:before{
	position: absolute;
	content: '●';
	top: 0;
	left:0;
	display: block;
	background-image: url();
	background-size: contain;
	background-repeat: no-repeat;
}
#sample_movie table td{
	padding-bottom: 8px;
}
#sample_movie table tr:last-of-type td{
	padding-bottom: 0;
}

/*==================================================
楽曲 css
===================================*/
#music{}
#music .container {}
#music .container>.row{
	flex-wrap: wrap;
}
#music .container>.row>p{
	max-width: 600px;
	margin-right: 40px; margin-bottom: 24px;}
#music .container>.row>.row{
	max-width: 500px;
	margin-bottom: 24px;
}
#music .container>.row>.row img:first-of-type{margin-right: 20px;}
#music .btn-red{margin-top: 16px;}

/*楽曲見本*/
#music .music_mihon{margin-top: 56px;}
#music .music_mihon .row{align-items: flex-start;}
#music .music_mihon ul{
	margin-right: 20px;
}
#music .music_mihon ul:last-of-type{
	margin-right: 0;
}
#music .music_mihon ul li{
	position: relative;
	padding-left: 24px;
	margin-bottom: 16px;
}
#music .music_mihon ul li:before{
	position: absolute;
	content: '■';
	top: 0;
	left:0;
	display: block;
}
#music .music_mihon p.border-txt{
	margin-top: 10px;
	font-size: var(--fz18-17);
	color: var(--light-purple);
	display: inline-block;
	padding: 6px 16px;
	border: solid 1px var(--light-purple);
}

/*==================================================
OP・ED テーマcss
===================================*/
#theme{background-color: var(--bg-yellow);}
#theme .btn-red{margin-top: 40px;}
#theme .theme_sample{margin-top: 40px;}

#theme h4{
	font-size: var(--fz18-17);
	font-weight: 600;
	color: var(--white);
	background-color: var(--bg-gray);
	width: 160px;
	height: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#theme h4:first-of-type{margin-bottom: 16px;}
#theme .theme_sample_box .row{
	align-items: stretch;
	height: 100%;
}
#theme .theme_sample_box .row>div{
	max-width: 216px;
	margin-right: 8px;
}
#theme .theme_sample_box .row>div:first-of-type{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	
}
#theme .theme_sample_box .row>div:last-of-type{
	margin-right: 0;
}
#theme .theme_sample img{
/*	max-width: 96%;*/
	height: auto;
}
#theme .theme_sample .row div img:first-of-type{
	margin-bottom: 16px;
}

/*==================================================
ナレーション css
===================================*/
#narration .sub_title p{
	letter-spacing: 0.075em;
	max-width: 800px;
}
#narration .sample_na{
	margin-bottom: 32px;
}

/*==================================================
オリジナル専用ケース&DVDラベル css
===================================*/
#dvd{
	background-color: var(--bg-yellow);
}
#dvd .container>.row{
	align-items: flex-start;
	flex-wrap: wrap;
}
#dvd img.original_dvd{
	max-width: 354px;
	height: auto;
}
#dvd .container>.row .box-l p{
	max-width: 637px;
	padding-top: 24px;
	margin-right: 40px;
}
#dvd .logo_box{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 32px;
	margin-bottom: 40px;
}
#dvd .logo_box img:first-of-type{
	margin-right: 40px;
}

/*==================================================
お問い合わせ css
===================================*/
#inquiry{
	background-color: var(--bg-purple);
	text-align: center;
}
#inquiry p{
	margin-top: 40px;
	margin-bottom: 40px;
	line-height: 1.8;
	font-size: var(--fz18-17);
}
#inquiry .btn-light-purple{
	margin-left: auto;
	margin-right: auto;
}

/*==================================================
フッター css
===================================*/
footer{
	padding: 32px 20px;
	text-align: center;
}