@charset "utf-8";
body {
	background-color: #FAFDD9;
	margin: 0;
	padding: 0;
	font-size: 85%;
	font-family: "Noto Sans Japanese","游ゴシック Medium","Yu Gothic Medium","游ゴシック体","YuGothic","Helvetica Neue","メイリオ","Meiryo",sans-serif;
	font-weight: 400;
	font-feature-settings: "palt";
	line-height: 1;
	-webkit-text-size-adjust: 100%;
}
@media only screen and (max-width: 960px){
	body {
	}
}
@media only screen and (max-width: 640px){
	body {
	}
}
@media only screen and (max-width: 480px){
	body {
	}
}
img{
	max-width: 100%;
	height: auto;
	border: 0;
	text-align: center;
	padding: 0 auto;
}
.centered {
	width: 890px;
	height: auto;/*600px*/
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -445px;
	margin-top: -300px;
}
@media only screen and (max-width: 960px){
	.centered {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		top: 0;
		left: 0;
	}
}
#header {
		width: 808px;
		height: 64px;
		padding-top: 21px;
		padding-left: 82px;
		padding-bottom: 10px;
	margin: 0 auto;
}
@media only screen and (max-width: 960px){
	#header {
		width: 90%;
		height: auto;
		margin: 20px auto;
		padding: 0;
	}
}
@media only screen and (max-width: 480px){
	#header {
		margin: 1% auto;
	}
}
#logoMark {
	width: 90px;
	height: 64px;
	padding-right: 18px;
	float: left;
	margin: -0.5% auto;
}
@media only screen and (max-width: 960px){
	#logoMark {
		width:100%;
		height: auto;
		margin-bottom: 3%;
	}
}
@media only screen and (max-width: 640px){
	#logoMark {
		margin-left: -3%;
		margin-bottom: 2%;
	}
}
@media only screen and (max-width: 640px){
	#logoMark img {
		transform: scale(0.75);/*64.8px*/
	}
}
#logo {
	width: 310px;
	height: 28px;
	line-height: 28px;
	float: left;
	margin-bottom: 12px;
}/*文字*/
@media only screen and (max-width: 960px){
	#logo {
		width:100%;
		height: auto;
		margin-bottom: 3%;
	}
}
@media only screen and (max-width: 480px){
	#logo {
		margin-bottom: 4%;
	}
}
#logo h1 {
	color: #2F2F26;
	font-family: "Esteban","Sirba","Palatino Linotype","Palatino","Book Antiqua",serif;
	font-weight: 500;
	font-size: 26px;
	margin: -5px 0 0;
	letter-spacing: 0.02em;
	display: inline-block;
}/*追加*/
#logo h1 small {
	font-size: 16px;
	letter-spacing: normal;
	font-weight: 400;
}
#naviBox {
	height: 14px;/*15px*/
	width: 490px;/*430px*/
	float: left;
	text-align: center;
	margin: -3px 0 0;
}
@media only screen and (max-width: 960px){
	#naviBox {
		width:100%;
		height: auto;
		margin-bottom: 2%;
	}
}
@media only screen and (max-width: 640px){
	#naviBox {
		margin-bottom: 2%;
	}
}
@media only screen and (max-width: 480px){
	#naviBox {
		margin-bottom: 3%;
		margin-top: -2%;
	}
}
#navi1 {
	width: 62px;
}
#navi2 {
	width: 52px;
}
#navi3 {
	width: 57px;
}
#navi4 {
	width: 53px;
}
#navi5 {
	width: 95px;
}
#navi6 {
	width: 59px;
}
#blog {
	width: 41px;
	margin-left:10px;
}
#navi1, #navi2, #navi3, #navi4, #navi5, #navi6, #blog {
	float: left;
	display: inline-block;
	width: auto;
	height: 14px;
	border-right: thin solid #2f2f26;
	color: #2F2F26;
	font-family: "Esteban", 'Subset_NotoSerifJP',"Palatino Linotype", "Palatino",serif;
	font-size: 14px;
	line-height: 12px;
	font-weight: 900;
	margin: 0 auto;
	letter-spacing: -0.02em;
} /*追加*/
#navi1 {
	border-left: thin solid #2f2f26;
}
@media only screen and (max-width: 480px){
	#navi1, #navi2, #navi3, #navi4, #navi5, #navi6, #blog {
		margin: 3% auto 0;
	}
}
#naviBox a {
	display: block;
	text-decoration: none;
	width: auto;
	color: #2f2f26;
	padding: 0 6px;
	line-height: 14px;
}
#naviBox a:hover {
	color: #666600;
	display: block;
}
#openingImage {
	width: 890px;
	height: 450px;
	clear: both;
	position: relative;
	margin: 0 auto;
}
@media only screen and (max-width: 960px){
	#openingImage {
		width: 100%;
		height: auto;
	}
}
@media only screen and (max-width: 640px){
	#openingImage {
		margin: 2% auto;
	}
}
@media only screen and (max-width: 480px){
	#openingImage {
		width: 100%;
		height: auto;
	}
}
#openingImage img {}
@media only screen and (max-width: 960px){
	#openingImage img {
		width: 100%;
		height: auto;
		margin: 1% 0 0 0;
		padding: 0;
	}
}
.sp img {
	width: 400px;
	height: 400px;
	overflow: hidden;
}
.pc {
	display: block !important;
	margin: 0 auto;
}
.sp { display: none !important; }
@media only screen and (max-width: 480px){
	.pc { display: none !important; }
    .sp { display: block !important; }
}
#footerBox{
	width: 800px;
	height: 30px;
	text-align: left;
	font-size: 10px;
	font-family: 'Noto Sans Japanese',"Verdana", "Geneva",sans-serif;
	color: #2f2f26;
	line-height: 18px;
	float: left;
	position: relative;
	padding-left: 82px;
	opacity: 0.8;
}
@media only screen and (max-width: 960px){
	#footerBox{
		width: 70%;
		height: auto;
		text-align: left;
		padding: 0;
		margin-left: 5%;
		font-size: 8px;
		float: left;
	}
}
@media only screen and (max-width: 640px){
	#footerBox{
		width: 70%;
		font-size: 6px;
	}
}
@media only screen and (max-width: 480px){
	#footerBox{
		width: 80%;
		font-size: 6px;
	}
}
#audio_box {
	width: 800px;
	height: 50px;
	margin: 0 auto;
	opacity: 0.2;
}
@media only screen and (max-width: 960px){
    #audio_box {
		width: 90%;
	    height: 50px;
    }
}
@media only screen and (max-width: 640px){
    #audio_box {
		width: 90%;
	    height: 50px;
    }
}
@media only screen and (max-width: 480px){
    #audio_box {
		width: 90%;
	    height: 50px;
    }
}
#audio {
	width: 636px;/*800px*/
	height: inherit;
	margin: 0 auto;
	padding: 0 82px 0 82px;
}
@media only screen and (max-width: 960px){
    #audio {
		width: 90%;
		height: inherit;
		padding: 0;
	}
}