@charset "UTF-8";

/* ---　introduction　---*/

#introduction{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	background: #000;
	color: #c4e6c6;
	text-align: center;
	position: relative;
}
#introduction h1{width: 100%;height: auto;}

.intro_txt{
	display: block;
	width: 95%;
	height: auto;
	margin:  0 auto;
	padding: 5% 0 0 0;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.01em;
	line-height: 1.6;
	text-align: left;
	position: relative;
}

.intro_txt h2{
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
}

.intro_txt h2 img{
	width: 100%;
	max-width:600px;
}

.intro_txt p{
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 40px 0;
	position: relative;
}

/* ---　themesong　---*/

#themesong{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	background: #4197ac url("../img/song/bg_song.png") center top no-repeat;
	background-size:100%;
	color: #fff;
	text-align: center;
	position: relative;
}

#themesong h1{width: 100%;height: auto;}

.song_01{
	display: block;
	width: 90%;
	height: auto;
	margin:  0 auto;
	padding: 0;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.01em;
	line-height: 1.6;
	text-align: left;
	position: relative;
}

.song_01 h3{
	font-size:1.1em;
	font-weight: 900;
	padding:1.4% 0 0.5% 0;
}

.song_01 p{
	padding-bottom:5%;
}

.song_link img{
	width: 90%;
	max-width:360px;
	padding: 1% 0 2% 0;
}


.song_02{
	display: block;
	width: 100%;
	height: auto;
	margin:  0;
	padding: 5% 5% 10% 5%;
	text-align: center;
	background: #0077b3;
	position: relative;
}

/* ---　message　---*/

#message{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	background: #6979ba;
	background-size:100%;
	color: #fff;
	text-align: center;
	position: relative;
}

.message_text{
	display: block;
	width: 90%;
	height: auto;
	margin:  0 auto;
	padding: 0 0 20px 0;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.01em;
	line-height: 1.6;
	text-align: left;
	position: relative;
}

/* ---　story　---*/

#story{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 5% 0;
	background: #014b45 url("../img/story/bg_story.png") center top no-repeat;
	background-size:100%;
	color: #e7ffe9;
	text-align: left;
	position: relative;
}

.story_text{
	display: block;
	width: 90%;
	height: auto;
	margin:  0 auto;
	padding: 0 0 20px 0;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.01em;
	line-height: 1.6;
	text-align: left;
	position: relative;
}

/* ---　cast　---*/

#cast{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 5% 0;
	background: #0b8745;
	background-size:100%;
	color: #fff;
	text-align: left;
	position: relative;
}

.cast_text{
	display: block;
	width: 90%;
	height: auto;
	margin:  0 auto;
	padding: 0 0 10% 0;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.01em;
	line-height: 1.6;
	text-align: left;
	position: relative;
}


/* ---　staff　---*/

#staff{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 5% 0;
	background: #cce7de;
	color: #502928;
	text-align: left;
	position: relative;
}

.staff_text{
	display: block;
	width: 90%;
	height: auto;
	margin:  0 auto;
	padding: 0 0 10% 0;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.01em;
	line-height: 1.6;
	text-align: left;
	position: relative;
}

.staff_text h2 img{
	display: block;
	width: 100%;
	max-width:560px;
	padding: 0 0 1% 0;
}

.staff_text h3{
	font-size:1.1em;
	font-weight: 700;
	padding-bottom:0.5%;
	font-feature-settings: "palt" 0;
	letter-spacing: 0;
}


/* ---　A to Z　---*/

#atoz{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 5% 0;
	background: #c00d15;
	color: #fff;
	text-align: left;
	position: relative;
}

dl.dic_Box{
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto 2% auto;
	padding: 0;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.01em;
	line-height: 1.6;
	text-align: left;
	position: relative;
}

.dic_Box img{
	width: 100%;
	height: auto;
}

.dic_Box dt{
	width: 100%;
	height: auto;
	margin: 4% auto 1.6% auto;
	padding: 0;
	border: 2px solid #fffac2;
	background:#76201e url(../img/atoz/btn_01.png) right center no-repeat;
	background-size: 100%;
}

@media screen and (min-width: 480px) {
.dic_Box dt{
	width: 100%;
	height: auto;
	margin: 6% auto 2% auto;
	padding: 0;
	border: 4px solid #fffac2;
	background:#76201e url(../img/atoz/btn_01.png) right center no-repeat;
	background-size: 100%;
}
}

.dic_Box dt.active{
	background: #76201e url(../img/atoz/btn_02.png) right center no-repeat;
	background-size: 100%;
}

.dic_Box dd{
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 0 6% 0;
	font-size:0.9em;
	font-weight: bolder;
	display: none;
}

@media screen and (min-width: 480px) {
.dic_Box dd{
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 0 6% 0;
	font-size:1.16em;
	display: none;
}
}


/* ---　etc.　---*/

.hide {
	font-size:0px;
	line-height:0px;
	text-indent:-9999px;
	overflow: hidden;
}

.orange{color:#ff9b25}