@charset "utf-8";

html {
	
	font-size: 62.5%; /* remのため：ブラウザのデフォルト16px -> 10px */
}

body {
	font-size: 1.6em; /* 古いChrome対策 */
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',arial,helvetica,clean,sans-serif;
	color: #FFF;
	color: #493C30;
	color: #000;
	background-color: #000;
	background-color: #FFF095;
	background-color: #FFF;
	font-size: 1.4rem;
	line-height: 1.6;
}

/* ### 画像 ### */
img	{max-width: 100%;
	height: auto;}


/* ### リンクカラー基本 ### */
a:link {
	color: #E97AC3;
	color: #FFF;
	color: #F5AD6A;
	color: #000;
	color: #493C30;
	color: #E59D5A;
	color: #FF62C8;
	color: #2A3E59;
	color: #67CADF;
	text-decoration: none;
	}
a:visited {
	color: #E97AC3;
	color: #FFF;
	color: #F5AD6A;
	color: #000;
	color: #493C30;
	color: #E59D5A;
	color: #FF62C8;
	color: #2A3E59;
	color: #67CADF;
	text-decoration: none;
	}
a:hover {
	color: #F70;
	color: #F60;
	text-decoration: underline;
	}
a:active {
	color: #F00;
	text-decoration: underline;
	}

/* ### ress.css 以外のリセット ### */
li {
	list-style-type: none;
}

/* ### コンテナ ### */
#container {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}


/* 重ね順 =========================================== */
header {
	position: relative;
	z-index: 2;
}

main {
	position: relative;
	z-index: 1;
}


/* ナビゲーション =========================================== */
#glNav {
	background-color: #000;
	background-color: #493C30;
	background-color: #F5AD6A;
	background-color: #FF62C8;
	background-color: #2A3E59;
	background-color: #67CADF;
	color: #000;
	color: #FFF;
	padding: 10px 16px;
	padding: 10px 24px;
	position: fixed;
	width: 100%;
	max-width: 980px;
	/*z-index: 100;*/
}

/*@media screen and (max-width:670px) {*/
@media screen and (max-width:750px) {
	#glNav {
		padding: 10px 24px;
		padding: 10px 19px;
	}
}
@media screen and (max-width:700px) {
	#glNav {
		padding: 10px 14px;
	}
}

#glNav ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#glNav li {
	font-size: 1.4rem;
	line-height: 1;
	color: #000;
	color: #FFF;
	font-weight: bold;
	/* font-family: serif; */
}

#glNav li.homeLink {
	font-size: 1.1rem;
	text-align: center;
	line-height: 1;
}

#glNav li a {
	/*background-color: #DDD;*/
	display: block;
	color: #000;
	color: #FFF;
	padding: 4px;
}

#glNav li.homeLink a {
	padding: 1px;
}

#glNav li a:link,
#glNav li a:visited {
	text-decoration: none;
}


/*@media screen and (max-width:830px) {*/
@media screen and (max-width:670px) {
	#glNavCover {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 42px;
		height: 38px;
		height: 40px;
		background-color: #000;
		background-color: #493C30;
		background-color: #F5AD6A;
		background-color: #FF62C8;
		background-color: #2A3E59;
		background-color: #67CADF;
		color: #FFF;
	}

	#glNav {
		position: fixed;
		right: -320px; /* 右側に隠す */
		top: 0;
		width: 300px; /* スマホに収まる幅 */
		width: 250px; /* スマホに収まる幅 */
		height: 100vh; /* 画面の縦いっぱい */
		padding: 0;
		padding-top: 42px;
		background-color: #000;
		background-color: #493C30;
		background-color: #F5AD6A;
		background-color: #FF62C8;
		background-color: #2A3E59;
		background-color: #67CADF;
		transition: all .6s;
		z-index: 200;
		overflow-y: auto; /* スクロールを可能にする */
	}

	.hamburger {
		position: absolute;
		right: 0;
		right: 16px;
		top: 0;
		width: 42px;
		height: 42px;
		cursor: pointer;
		z-index: 300;
	}

	#glNav ul {
		display: block;
		/*margin: 0;
		padding: 0;
		list-style: none;*/
}

	#glNav li {
		text-align: center;
		padding: 0 14px;
	}

	#glNav li a {
		display: block;
		padding: 10px 0;
		border-bottom: 2px dotted #FFE6F2;
		border-bottom: 2px dotted #FFC6D2;
		border-bottom: 2px dotted #000;
		border-bottom: 2px dotted #F5DD9A;
		border-bottom: 2px dotted #FFC2F8;
		border-bottom: 2px dotted #AABED9;
		border-bottom: 2px dotted #FFF;
		border-bottom: 2px dotted #B1E4F0;
		border-bottom: 2px dotted #C1EAF3;
		text-decoration: none;
		color: #000;
		color: #FFF;
	}
	#glNav li a:hover {
		background-color: #000;
		background-color: #FEF3E9;
		background-color: #FFF;
		color: #F98AD3;
		color: #FFF;
		color: #000;
		color: #493C30;
		color: #F5AD6A;
		color: #FF62C8;
		color: #2A3E59;
		color: #67CADF;
	}

	.hLine {
		position: absolute;
		left: 11px;
		width: 18px;
		height: 1px;
		height: 2px;
		background-color: #000;
		background-color: #FFF;
		transition: all .6s;
	}

	.hLine1 {
		top: 14px;
	}
	.hLine2 {
		top: 20px;
	}
	.hLine3 {
		top: 26px;
	}

	.bgCover {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		background-color: #493C30;
		background-color: #000;
		opacity: 0;
		visibility: hidden;
		transition: all .6s;
		cursor: pointer;
	}

	/* 表示された時 */
	.nav-open #glNav {
		right: 0;
	}
	.nav-open .bgCover {
		opacity: .8;
		opacity: 0.5;
		visibility: visible;
	}
	.nav-open .hLine1 {
		transform: rotate(45deg);
		top: 20px;
	}
	.nav-open .hLine2 {
		width: 0;
		left: 50%;
	}
	.nav-open .hLine3 {
		transform: rotate(-45deg);
		top: 20px;
	} 
}


/* メイン ================================================ */
main {
	text-align: center;
}


/* 共通 ================================================ */
section {
	padding: 50px 16px 0;
	padding: 40px 0px 0;
	padding: 50px 0px 0;
}

main section:first-child {
	padding: 40px 0px 0;
}

.secInner {
	padding: 0 16px;
}

@media screen and (max-width:350px) {
	section {
		padding: 50px 8px 0;
		padding: 50px 0px 0;
	}
	.secInner {
		padding: 0 8px;
	}
}


/* 見出しなど ============================================== */
h1#mainVisual {
	line-height: 0;
	padding-top: 40px;
}
/**/

.secH2 {
	/*width: 96%;*/
	margin: 0 auto;
	margin-bottom: 24px;
	padding: 7px 0;
	padding: 9px 0;
	background-color: #000;
	background-color: #493C30;
	background-color: #F5AD6A;
	background-color: #FF62C8;
	background-color: #2A3E59;
	background-color: #67CADF;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1;
	color: #000;
	color: #FFF;
	font-weight: bold;
	/* font-family: serif; */
	/*box-shadow: 0 0 0 1px #B9A273, 0 0 0 4px #8058A1, 0 0 0 5px #B9A273;*/
}

/* 角丸用
.secH2 {
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
} */

/* ストーリー ======================================== */
.storyHeadding {
	font-size: 1.6rem;
	text-align: center;
	margin: 0 12px 0;
	margin-bottom: 16px;
}

.storyText {
	text-align: center;
	line-height: 1.7;
	margin: 0 12px 0;
	margin: 0 auto;
	width: 80%;
	width: 90%;
	/*margin-bottom: 14px;*/
}

.storyHeadding span,
.storyText span { display: inline-block; }


/* キャスト＆スタッフ ======================================== */
.cast1 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 760px;
	width: 80.17%;
	margin: 0 9.9% 0 9.9%;
	margin: 0 auto;
	margin-top: 31px;
	/*padding-bottom: 31px;*/
	/* background-color: #CCC; */
	/*font-family: serif;*/
	/*padding-bottom: 14px;
	border-bottom: dotted #2A3E59 2px;*/
}

.cast1 dl {
	width: 217px;
	width: 47.37%;
	margin-bottom: 8px;
}

@media screen and (max-width:700px) {
	.cast1 dl {
		width: 100%;
		margin-bottom: 16px;
	}
}

.mainCastImg {
	margin-bottom: 6px;
}

.mainCastImg img {
	border: solid #FFE1D3 1px;
	border: solid #493C30 1px;
	border: solid #000 1px;
}

.mainCastName {
	font-size: 2.2rem;
	line-height: 1.4;
	font-family: Arial;
}

.mainCastCV {
	font-size: 1.5rem;
	line-height: 1.4;
	color: #FFE1D3;
	color: #F5AD6A;
	color: #000;
	color: #493C30;
	color: #E59D5A;
	color: #FF62C8;
	color: #2A3E59;
	color: #67CADF;
	/*font-weight: bold;*/
}

.mainCastIntro {
	font-size: 1.3rem;
	line-height: 1.5;
	margin-top: 4px;
}

.mainCastIntro span { display: inline-block; }

.cast2 {
	width: 760px;
	width: 95%;
	margin: 0 9.9% 0 9.9%;
	margin: 0 auto;
	margin-top: 31px;
	/*padding-bottom: 31px;*/
	/* background-color: #CCC; */
	/*font-family: serif;*/
	margin-top: 31px;
	padding-top: 24px;
	padding-bottom: 24px;
	padding-top: 14px;
	padding-bottom: 14px;
	border-top: dotted #FFE1D3 2px;
	border-bottom: dotted #FFE1D3 2px;
	border-top: dotted #000 2px;
	border-bottom: dotted #000 2px;
	border-top: dotted #493C30 2px;
	border-bottom: dotted #493C30 2px;
	border-top: dotted #F9CEA6 2px;
	border-bottom: dotted #F9CEA6 2px;
	border-top: dotted #FF62C8 2px;
	border-bottom: dotted #FF62C8 2px;
	border-top: dotted #2A3E59 2px;
	border-bottom: dotted #2A3E59 2px;
	border-top: dotted #67CADF 2px;
	border-bottom: dotted #67CADF 2px;
}

.cast2Inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	/*-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;*/
	-ms-flex-pack: distribute;
	justify-content: space-around;/*  */
	/*-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;*/
	padding-top: 10px;
	padding-bottom: 10px;
}

.cast2Inner ul {
	-ms-flex-preferred-size: 30%;
	flex-basis: 20%;
	flex-basis: 30%;
	/* background-color: #DDD; */
}

/*@media screen and (max-width:710px) {
	.cast2Inner {
		-ms-flex-pack: distribute;
		justify-content: space-around;
	}
	.cast2Inner ul {
		-ms-flex-preferred-size: auto;
		flex-basis: auto;
	}
}*/
@media screen and (max-width:650px) {
	.cast2Inner ul {
		-ms-flex-preferred-size: 28%;
		flex-basis: 28%;
	}
}

.subCastName {
	font-size: 2.1rem;
	font-size: 1.7rem;
	line-height: 1.4;
	font-family: Arial;
}

.subCastName br { display: none; }
@media screen and (max-width:650px) {
	.subCastName {
		line-height: 1.4;
		line-height: 1.1;
	}
	.subCastName br { display: inline; }
}

.subCastCV {
	font-size: 1.5rem;
	line-height: 1.4;
	color: #F98AD3;
	color: #E97AC3;
	color: #FFE1D3;
	color: #000;
	color: #493C30;
	color: #E59D5A;
	color: #FF62C8;
	color: #2A3E59;
	color: #67CADF;
}

/*@media screen and (max-width:470px) {*/
@media screen and (max-width:550px) {
	.cast2 {
		padding-top: 18px;
		padding-bottom: 18px;
}
	.cast2Inner {
		display: block;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	.cast2Inner ul {
		margin: 10px 0;
	}
	.subCastName {
		font-size: 2.0rem;
		font-size: 1.6rem;
		line-height: 1.4;
	}
	.subCastName br { display: none; }
	.subCastCV {
		font-size: 1.4rem;
	}
}/**/

.staff {
	font-size: 1.5rem;
	line-height: 1.8;
	margin-top: 24px;
	padding-top: 30px;
	/*border-top: dotted #000 2px;
	border-top: dotted #493C30 2px;*/
	border-top: dotted #2A3E59 2px;
	border-top: dotted #67CADF 2px;
}

.staff a:link,
.staff a:visited {
	text-decoration: underline;
}

.staff li span { display: inline-block; }

/* 販売店情報 ======================================== */
#shop-info h3 {
	font-size: 1.6rem;
	line-height: 1.6;
	margin-bottom: 20px;
}
#shop-info h3.mb14 {
	margin-bottom: 14px;
}

#shop-info ul {
	margin-bottom: 40px;
}
#shop-info ul.mb40 {
	margin-bottom: 40px;
}

.items1,
.items2,
.items3 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 760px;
	width: 80.17%;
	margin: 0 9.9% 0 9.9%;
	margin: 0 auto;
	/*margin-top: 31px;
	padding-bottom: 31px;*/
	/* background-color: #CCC; */
	/*font-family: serif;*/
}

.items1 p.item1 {
	width: 65%;
	width: 55%;
	height: auto;
	line-height: 1;
}

.items1 p.item1 img {
	border: solid #493C30 1px;
	border: solid #000 1px;
}

.items1 p.item2 {
	width: 31%;
	height: auto;
	text-align: left;
	line-height: 1;
}

.items2 p.item1 {
	width: 53%;
	height: auto;
	line-height: 1;
}

.items2 p.item2 {
	width: 47%;
	height: auto;
	line-height: 1;
}

.items3 p.item1 {
	width: 50%;
	height: auto;
	margin: 0 auto;
	line-height: 1;
}

.shopName {
	font-size: 1.6rem;
	line-height: 1.5;
	margin-top: 8px;
}

.shopName a:link,
.shopName a:visited {
	text-decoration: underline;
}

.itemName {
	font-size: 1.4rem;
	line-height: 1.5;
	margin-top: 2px;
}

.itemName span { display: inline-block; }

@media screen and (max-width:550px) {
	.items1,
	.items2,
	.items3 {
		display: block;
	}
	.items1 p.item1 {
		width: 100%;
	}
	.items1 p.item2 {
		width: 70%;
		margin: 10px auto 0;
	}
	.items2 p.item1 {
		width: 100%;
	}
	.items2 p.item2 {
		width: 100%;
		margin-top: 10px;
	}
	.items3 p.item1 {
		width: 100%;
	}
}


/* 試聴 ======================================== */
.movieWrap {
	width: 560px;
	margin: 0 auto;
}

@media screen and (max-width:600px) {
	/*#audition {
		position: relative;
	}*/
	/* 縦横比の維持 */
	.movieWrap {
		position: relative;
		width: 100%;
		/*max-width: 854px;*/
		height: auto; /* 重要 */
		/*margin: 0 auto;*/
		padding-top: 56.25%; /* アスペクト比 16:9の場合の縦横比 */
	}
	.movieWrap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/*z-index: 0;*/
	}
}

/*@media screen and (max-width:600px) {
	.movieWrap iframe {
		width: 100% !important;
		height: auto !important;
	}
}*/

.auditionText span { display: inline-block; }


/* CD情報 ======================================== */

.cdInfoCover {
	width: 80.17%;
	margin: 0 auto;
}

.cdInfo {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.cdInfoText {
	width: auto;
	width: 49%;
	text-align: left;
	order: 1;
}

.cdInfoTextUl {
	font-size: 1.3rem;
	line-height: 1.8;
	font-family: Arial;
	padding-left: 1em;
	text-indent: -1em;
	margin-bottom: 2em;
	/* background-color: #CCC; */
}

.cdInfoOwabi {
	font-size: 1.3rem;
	line-height: 1.5;
	padding-left: 0.5em;
	margin-bottom: 2em;
	/* background-color: #CCC; */
}

.cdInfoOwabi p {
	margin-bottom: 0.6em;
}

.cdInfoOwabi p.midashi {
	text-decoration: underline;
}

.cdImage {
	/*display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: auto;
	margin: 0 auto;*/
	width: 49%;
	order: 0;
	/* background-color: #DDD; */
}

.cdImageItem {
	width: 49%;
	width: auto;
	/*margin-bottom: 8px;
	font-size: 1.2rem;
	line-height: 1.2;*/
}

.cdImage img {
	border: solid #E4C29A 1px;
	border: solid #F98AD3 1px;
	border: solid #CCC 1px;
}

@media screen and (max-width:700px) {
	.cdInfoText {
		max-width: 460px;
		margin-right: auto; 
		margin-left: auto; 
	}
	.cdInfo {
		display: block;
	}
	.cdInfoText {
		width: auto;
	}
	.cdImage {
		/* display: block; */
		width: auto;
	}
	.cdImageItem {
		width: 100%;
		max-width: 460px;
		margin-right: auto; 
		margin-left: auto; 
	}
}

@media screen and (max-width:550px) {
	.cdInfoCover {
		width: 82%;
		margin: 0 auto;
	}
}

@media screen and (max-width:550px) {
	.cdInfoCover {
		width: 90%;
		margin: 0 auto;
	}
}

/*
.cdInfo {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 760px;
	width: 80.17%;
	margin: 0 9.9% 0 9.9%;
	margin: 0 auto;
	margin-top: 31px;
}

.cdImage {
	width: 30%;
}

.cdImage img {
	border: solid #E4C29A 1px;
	border: solid #F98AD3 1px;
}

.cdInfoText {
	width: 68%;
	text-align: left;
	font-size: 1.3rem;
	line-height: 1.8;
	font-family: Arial;
	padding-left: 1em;
	text-indent: -1em;
}

@media screen and (max-width:840px) {
	.cdInfo {
		width: 640px;
	}
}

@media screen and (max-width:700px) {
	.cdInfo {
		width: 91.43%;
	}
	.cdImage {
		width: 30%;
		width: 190px;
		margin-right: 10px;
	}
	.cdInfoText {
		width: auto;
		-webkit-flex: 1;
		flex: 1;
	}
}

@media screen and (max-width:600px) {
	.cdInfo {
		width: 80.17%;
		display: block;
	}
	.cdImage {
		width: 30%;
		width: 100%;
		margin-bottom: 3px;
	}
	.cdInfoText {
		width: 68%;
		width: 100%;
		text-align: left;
		font-size: 1.3rem;
		line-height: 1.8;
		font-family: Arial;
	}
}
*/

/* フッター ======================================== */
#footer {
	width: 100%;
	padding: 16px 0 8px 0;
	text-align: center;
	font-size: 1.1rem;
}


/* 文字サイズ調整 =========================================== */
@media screen and (max-width:550px) {
	.shopName {
		font-size: 1.5rem;
		line-height: 1.5;
	}
	.itemName {
		font-size: 1.3rem;
		line-height: 1.5;
	}
}

@media screen and (max-width:470px) {
	body {
		font-size: 1.3rem;
		line-height: 1.6;
	}
	.secH2 {
		font-size: 1.5rem;
	}
	.storyHeadding {
		font-size: 1.5rem;
	}
	.mainCastName {
		font-size: 2.1rem;
		line-height: 1.4;
	}
	.mainCastCV {
		font-size: 1.4rem;
		line-height: 1.4;
	}
	.mainCastIntro {
		font-size: 1.2rem;
		line-height: 1.5;
	}
	.subCastName {
		font-size: 1.9rem;
		line-height: 1.4;
	}
	.subCastCV {
		font-size: 1.4rem;
		line-height: 1.4;
	}
	.staff {
		font-size: 1.4rem;
		line-height: 1.8;
	}
	#shop-info h3 {
		font-size: 1.5rem;
		line-height: 1.6;
	}
	.cdInfoText {
		font-size: 1.2rem;
		line-height: 1.8;
	}
}

@media screen and (max-width:350px) {
	.storyText {
		line-height: 1.6;
	}
}


/* etc. =================================================== */
.mb14 { margin-bottom: 14px; }
.mt0 { margin-top: 0px; }
.mt-m40 { margin-top: -40px; }

.blockCentering {
	margin-right: auto; 
	margin-left: auto; 
}