@charset "UTF-8";

html,body {
	background: #fff;
}

/*----------------
  #wrapper
----------------*/
#wrapper {
	background: #fff;
}


@media only screen and (min-width:800px){
	/*----------------
	  #wrapper
	----------------*/
	#wrapper {
	}
}

/*----------------
  #about
----------------*/
#about {
    margin: 0 auto;
    padding: 12% 0 0;
    text-align: center;
    background: url(../img/about_bg.png) center #f3e8d2;
    position: relative;
}
#about img {
	width: 100%;
	height: auto;
}
#about h1 {
	margin: 0 auto 8%;
	color: #f15c6c;
	font-family: 'Montserrat';
	font-size: 6.2vw;
	letter-spacing: 0.06em;
	line-height: 1.2;
}
#sNav .navList {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
#sNav .navList:after {
	content: "";
	width: 100%;
}
#sNav .navList li:nth-child(1),
#sNav .navList li:nth-child(2),
#sNav .navList li:nth-child(3) {
	margin-bottom: 10px;
}
#sNav .navList li:nth-child(1),
#sNav .navList li:nth-child(2),
#sNav .navList li:nth-child(4) {
	margin-right: 10px;
}
#sNav .navList li:nth-child(4),
#sNav .navList li:nth-child(5) {
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
}
#sNav .navList li a {
	display: block;
	color: #fff;
	font-family: 'Montserrat';
	font-size: 3.46667vw;
	font-weight: bold;
	border-radius: 6.66667vw;
	padding: 1.86667vw 4vw;
	background: #b58c54;
}

@media only screen and (min-width:800px){
	/*----------------
	  #about
	----------------*/
	#about {
		margin: 0 0 0 370px;
		padding: 80px 0 0;
	}
	#about h1 {
		font-size: 38px;
		margin-bottom: 50px;
	}
	#sNav .navList:after {
		content: none;
	}
	#sNav .navList li:nth-child(1),
	#sNav .navList li:nth-child(2),
	#sNav .navList li:nth-child(3) {
		margin-bottom: 0;
	}
	#sNav .navList li:nth-child(1),
	#sNav .navList li:nth-child(2),
	#sNav .navList li:nth-child(3),
	#sNav .navList li:nth-child(4) {
		margin-right: 10px;
	}
	#sNav .navList li a {
		font-size: 20px;
		border-radius: 40px;
		padding: 5px 30px;
	}
}

/* introduction */
#introduction .inner {
	padding: 12% 0 10%;
}
#introduction h2 {
	margin: 0 auto 8%;
	color: #956729;
	font-family: 'Montserrat';
	font-size: 6.2vw;
	letter-spacing: 0.06em;
	line-height: 1.2;
}
#introduction [class^="box"] {
	box-shadow: 0px 2.5px 5px 0px rgba(98, 83, 64, 0.3);
	padding: 6.5% 5.5%;
	margin-bottom: 1.3334%;
	background: url(../img/introduction_box_bg.png) center #f9fafa;
}
#introduction [class^="txt"] {
	text-align: left;
	margin: 0;
}
#introduction .txt01 {
	margin: 0;
}
#introduction [class^="img"] {
	margin-bottom: 2.6667%;
}

@media only screen and (min-width:800px){
	#introduction .inner {
		width: 830px;
		padding: 80px 20px 100px;
		margin: auto;
	}
	#introduction h2 {
		font-size: 38px;
		margin-bottom: 40px;
	}
	#introduction [class^="box"] {
		box-shadow: 0px 5px 10px 0px rgb(98 83 64 / 30%);
		padding: 40px;
		margin-bottom: 10px;
	}
	#introduction [class^="txt"] {
		text-align: left;
	}
	#introduction [class^="img"] {
		margin-bottom: 2.6667%;
	}
}

/* story */
#story {
	background: url(../img/story_bg.png) center #fdfeff;
}
#story .inner {
	padding: 12% 0 12%;
}
#story h2 {
	margin: 0 auto 5%;
	color: #539db3;
	font-family: 'Montserrat';
	font-size: 6.2vw;
	letter-spacing: 0.06em;
	line-height: 1.2;
}
#story .copy01 {
	width: 73.5%;
	margin: 5.5% auto 0;
}
#story .copy02 {
	width: 95.5%;
	margin: 0 auto 5.5%;
}
#story [class^="txt"] {
	text-align: left;
	padding: 5.5%;
	margin: 0;
}

@media only screen and (min-width:800px){
	#story .inner {
		width: 830px;
		padding: 80px 20px;
		margin: auto;
	}
	#story h2 {
		font-size: 38px;
		margin-bottom: 40px;
	}
	#story [class^="img"] {
		width: 830px;
		margin: auto;
	}
	#story .copy01 {
		width: 460px;
		margin-top: 40px;
	}
	#story .copy02 {
		width: 596px;
		margin: 0 auto 40px;
	}
	#story [class^="txt"] {
		text-align: left;
		padding: 40px;
	}
}

/* cast */
#cast {
	background: url(../img/cast_bg.png) center #b7d7cf;
}
#cast .inner {
	padding: 12% 5.5% 12%;
}
#cast h2 {
	margin: 0 auto 5%;
	color: #e35766;
	font-family: 'Montserrat';
	font-size: 6.2vw;
	letter-spacing: 0.06em;
	line-height: 1.2;
}
#cast [class^="castList"] {
	
}
#cast [class^="castList"] li {
	
}
#cast [class^="img"] {
	position: relative;
	width: 66%;
	margin: auto;
	z-index: 1;
}
#cast .img06 {
	width: 100%;
}
#cast [class^="box"] {
	box-shadow: 0px 2.5px 5px 0px rgba(98, 83, 64, 0.3);
	position: relative;
	padding: 11% 6%;
	margin: -6% 0 6%;
	background: url(../img/cast_box_bg.png) center #fbf7e4;
}

#cast .box11 {
	margin: 0;
}
#cast [class^="message"] {
	position: absolute;
	top: -6%;
	right: -3%;
	z-index: 2;
}
#cast .message01 {
	width: 38%;
}
#cast .message02 {
	top: -9%;
	width: 47%;
}
#cast .message03 {
	width: 31%;
}
#cast .message04 {
	width: 23%;
}
#cast .message05 {
	right: -6%;
	width: 46%;
}
#cast .message07 {
	width: 37%;
}
#cast .message08 {
	width: 42%;
}
#cast .message09 {
	width: 34%;
}
#cast .message10 {
	right: -6%;
	width: 51%;
}
#cast [class^="name"] {
	color: #946f46;
	font-size: 6.4vw;
	font-weight: bold;
	text-align: left;
	line-height: 1;
	margin-bottom: 5%;
}
#cast .name01 {
	color: #d18e04;
}
#cast .name02 {
	color: #cc6867;
}
#cast [class^="name"] span {
	font-size: 3.73333vw;
	margin-left: 5%;
}
#cast [class^="txt"] {
	text-align: left;
	margin: 0;
}
#cast h3 {
	color: #e35766;
	font-size: 4.26667vw;
	font-weight: bold;
	line-height: 1;
	border-top: 2px solid #e35766;
	border-bottom: 2px solid #e35766;
	padding: 3% 0;
	margin: 9% auto 6%;
}

@media only screen and (min-width:800px){
	#cast .inner {
		width: 830px;
		padding: 80px 20px;
		margin: auto;
	}
	#cast h2 {
		font-size: 38px;
		margin-bottom: 40px;
	}
	#cast .castList02 {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-align-content: stretch;
		-ms-flex-line-pack: stretch;
		align-content: stretch;
	}
	#cast .castList03 {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-align-content: stretch;
		-ms-flex-line-pack: stretch;
		align-content: stretch;
	}
	#cast [class^="castList"] li {
		position: relative;
		padding-top: 30px;
		margin-bottom: 40px;
	}
	#cast .castList02 li {
		width: 395px;
		padding-top: 170px;
	}
	#cast .castList03 li {
		width: 395px;
		padding-top: 170px;
	}
	#cast .castList04 li {
		width: 100%;
		padding-top: 0;
		margin-bottom: 0;
	}
	#cast [class^="img"] {
		position: absolute;
		top: 0;
		left: 0;
		width: 295px;
		margin: 0 auto 0 0;
	}
	#cast .castList02 [class^="img"] {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 307px;
		margin: 0 auto 0;
	}
	#cast .castList03 [class^="img"] {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 307px;
		margin: 0 auto 0;
	}
	#cast .castList02 .img06 {
		width: 390px;
	}
	#cast [class^="box"] {
		box-sizing: border-box;
		box-shadow: 0px 5px 10px 0px rgb(98 83 64 / 30%);
		width: 575px;
		padding: 30px 20px 30px 60px;
		margin: 0 0 0 auto;
	}
	#cast .castList02 [class^="box"] {
		align-content: stretch;
		width: 100%;
		height: 100%;
		padding: 60px 20px 30px;
	}
	#cast .castList03 [class^="box"] {
		align-content: stretch;
		width: 100%;
		height: 100%;
		padding: 60px 20px 30px;
	}
	#cast .castList04 [class^="box"] {
		align-content: stretch;
		width: 100%;
		height: 100%;
		padding: 30px 20px 30px;
	}
	
	#cast .box11 {
		margin: 0;
	}
	#cast [class^="message"] {
		position: absolute;
		top: -40px;
		right: -20px;
		z-index: 2;
	}
	#cast .castList02 [class^="message"] {
		top: 0;
		right: -20px;
	}
	#cast .message01 {
		width: 183px;
	}
	#cast .message02 {
		width: 227px;
	}
	#cast .message03 {
		width: 148px;
	}
	#cast .message04 {
		width: 110px;
	}
	#cast .message05 {
		top: -10px !important;
		width: 220px;
	}
	#cast .message07 {
		top: -10px !important;
		width: 176px;
	}
	#cast .message08 {
		top: -10px !important;
		width: 203px;
	}
	#cast .message09 {
		top: -10px !important;
		width: 160px;
	}
	#cast .message10 {
		top: -10px !important;
		width: 247px;
	}
	#cast [class^="name"] {
		font-size: 30px;
		margin-bottom: 20px;
	}
	#cast .name01 {
		color: #d18e04;
	}
	#cast .name02 {
		color: #cc6867;
	}
	#cast [class^="name"] span {
		font-size: 18px;
		margin-left: 20px;
	}
	#cast [class^="txt"] {
		font-size: 14px;
	}
	#cast h3 {
		color: #e35766;
		font-size: 24px;
		line-height: 1;
		border-top: 2px solid #e35766;
		border-bottom: 2px solid #e35766;
		padding: 20px 0;
		margin: 40px auto 40px;
	}
	#cast h3:nth-of-type(1) {
		margin-top: 170px;
	}
}

/* staff */
#staff .inner {
	padding: 12% 5.5% 12%;
}
#staff h2 {
	margin: 0 auto 5%;
	color: #956729;
	font-family: 'Montserrat';
	font-size: 6.2vw;
	letter-spacing: 0.06em;
	line-height: 1.2;
}
#staff [class^="box"] {
	box-shadow: 0px 2.5px 5px 0px rgba(98, 83, 64, 0.3);
	position: relative;
	padding: 8.5% 6%;
	margin: 0 0 6%;
	background: url(../img/staff_box_bg.png) center #faf6e2;
}
#staff [class^="img"] {
	width: 54%;
	margin: 0 auto 7%;
}
#staff .img02 {
	width: 100%;
	margin: 0;
}
#staff .img03 {
	width: 111%;
	margin: 0 -5.5%;
}
#staff [class^="name"] {
	color: #946f46;
	font-size: 6.4vw;
	font-weight: bold;
	text-align: left;
	line-height: 1;
	margin-bottom: 5%;
}
#staff [class^="name"] span {
	font-size: 3.73333vw;
	margin-right: 5%;
}
#staff [class^="txt"] {
	text-align: left;
}
#staff [class^="commentTtl"] {
	color: #946f46;
	font-size: 3.73333vw;
	font-weight: bold;
	text-align: left;
	border-top: 1px dashed;
	padding-top: 5%;
}
#staff [class^="comment"] {
	color: #946f46;
	text-align: left;
}

@media only screen and (min-width: 800px){
	#staff .inner {
		width: 830px;
		padding: 80px 20px;
		margin: auto;
	}
	#staff h2 {
		font-size: 38px;
		margin-bottom: 40px;
	}
	#staff [class^="box"] {
		box-shadow: 0px 5px 10px 0px rgb(98 83 64 / 30%);
		padding: 30px 20px;
		margin-bottom: 40px;
	}
	#staff .box01 {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	#staff .box02 {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	#staff [class^="img"] {
		width: 210px;
		margin: 0;
	}
	#staff .img02 {
		width: 210px;
		margin: 0;
	}
	#staff .img03 {
		width: 831px;
		margin: auto;
	}
	#staff [class^="txtBox"] {
		width: 560px;
	}
	#staff [class^="name"] {
		font-size: 30px;
		margin-bottom: 20px;
	}
	#staff [class^="name"] span {
		font-size: 18px;
		margin-right: 20px;
	}
	#staff [class^="txt"] {
		font-size: 14px;
	}
	#staff [class^="commentTtl"] {
		font-size: 18px;
		width: 100% !important;
		padding-top: 20px;
	}
	#staff [class^="comment"] {
		font-size: 14px;
		width: 100%;
	}
	#staff .staffList li:nth-child(2) [class^="comment"] {
		font-size: 14px;
		width: 550px;
		margin: 0;
	}
}

/* music */
#music {
	background: url(../img/music_bg.png) center #fdfeff;
}
#music .inner {
	padding: 12% 5.5% 12%;
}
#music h2 {
	margin: 0 auto 5%;
	color: #539db3;
	font-family: 'Montserrat';
	font-size: 6.2vw;
	letter-spacing: 0.06em;
	line-height: 1.2;
}
#music [class^="img"] {
	width: 72%;
	margin: 0 auto 6%;
}
#music [class^="theme"] {
	color: #946f46;
	font-size: 3.73333vw;
	font-weight: bold;
	text-align: center;
	margin-bottom: 3%;
}
#music [class^="name"] {
	color: #946f46;
	font-size: 6.4vw;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	margin-bottom: 5%;
}
#music [class^="name"] span {
	display: block;
	font-size: 2.66667vw;
	margin-top: 3%;
}
#music [class^="txt"] {
	text-align: left;
}
#music .txt02 {
	margin: 0;
}
#music [class^="txt"] a {
	color: #e35766;
}
#music [class^="box"] {
	position: relative;
	padding: 6%;
	margin: 0 0 6%;
	background: #e6eff2;
}

@media only screen and (min-width: 800px){
	#music .inner {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		width: 830px;
		padding: 80px 20px;
		margin: auto;
	}
	#music h2 {
		font-size: 38px;
		width: 100%;
		margin-bottom: 40px;
	}
	#music [class^="img"] {
		width: 320px;
		margin: 0 0 20px;
	}
	#music [class^="txtBox"] {
		width: 460px;
		padding-top: 65px;
		margin-right: 20px;
	}
	#music [class^="theme"] {
		font-size: 18px;
		text-align: left;
		margin-bottom: 10px;
	}
	#music [class^="name"] {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-align-items: flex-end;
		-ms-flex-align: end;
		align-items: flex-end;
		font-size: 30px;
		text-align: left;
		margin-bottom: 20px;
	}
	#music [class^="name"] span {
		display: block;
		font-size: 14px;
		margin-top: 0;
	}
	#music [class^="txt"] {
		font-size: 14px;
	}
	#music .txt01 {
		margin: 0;
	}
	#music .txt02 {
		margin: 0;
	}
	#music [class^="box"] {
		padding: 20px;
		margin: 0;
	}
	#music [class^="txt"] a:hover {
		text-decoration: underline;
	}
}

/* pagetop */
.pagetop {
	position: fixed;
	right: 10px;
	bottom: 10px;
	width: 13.3337%;
	z-index: 9;
}

@media only screen and (min-width:800px){
	.pagetop {
		right: 20px;
		bottom: 20px;
		width: 80px;
	}
}