@charset "UTF-8";

/* トップページ */
@media (min-width: 1401px) {
	#container{
		background:url(../img/main-img-b.jpg) no-repeat center center;
		background-size:cover;
		background-attachment:fixed;
	}
}

/* メインイメージ */
#main-img{
	position:relative;
	width:100%;
	height:calc(100vh - 100px);
	top:100px;
	background:url(../img/main-img.jpg) no-repeat center center;
	background-size:cover;
	-webkit-transition:all 0.7s ease-in-out;
    -moz-transition:all 0.7s ease-in-out;
    -o-transition:all 0.7s ease-in-out;
    -ms-transition:all 0.7s ease-in-out;
    transition:all 0.7s ease-in-out;
}
@media (min-width: 568px) {
	#main-img{
		height:100vh;
	}
}
@media (min-width: 768px) {
	#main-img{
		height:calc(100vh - 150px);
		top:150px;
	}
}
@media (min-width: 812px) {
	#main-img{
		height:100vh;
	}
}
@media (min-width: 1024px) {
	#main-img{
		z-index:1;
	}
}
#main-img-mask{
	height:100vh;
	background-color:rgba(0,0,0,0);
	-webkit-transition:all 0.7s ease-in-out;
    -moz-transition:all 0.7s ease-in-out;
    -o-transition:all 0.7s ease-in-out;
    -ms-transition:all 0.7s ease-in-out;
    transition:all 0.7s ease-in-out;
}
#main-img.fixed{
	background-attachment:fixed;
	-webkit-transition:all 0.7s ease-in-out;
    -moz-transition:all 0.7s ease-in-out;
    -o-transition:all 0.7s ease-in-out;
    -ms-transition:all 0.7s ease-in-out;
    transition:all 0.7s ease-in-out;
}
#main-img-mask.fixed{
	background-color:rgba(0,0,0,0.5) !important;
	-webkit-transition:all 0.7s ease-in-out;
    -moz-transition:all 0.7s ease-in-out;
    -o-transition:all 0.7s ease-in-out;
    -ms-transition:all 0.7s ease-in-out;
    transition:all 0.7s ease-in-out;
}

/* ヘッドライン */
#headline{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	padding:15px 0 12px 23px;
	box-sizing:border-box;
	background:rgba(0,0,0,0.3);
	font-family:'BookAntiqua','BIZ UD明朝','BIZ UDMincho','游明朝','YuMincho','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}
#headline h2{
	font-size:2.0rem;
	color:#FFF;
	line-height:120%;
	text-shadow:0 1px 0 #333;
}
#headline h2.sub-headline{
	font-size:1.1rem;
	font-weight:normal;
	line-height:160%;
	padding-top:7px;
}
@media (min-width: 375px) {
	#headline h2{
		font-size:2.2rem;
	}
	#headline h2.sub-headline{
		font-size:1.3rem;
	}
}
@media (min-width: 414px) {
	#headline{
		padding-left:45px;
	}
}
@media (min-width: 568px) {
	#headline{
		left:auto;
		right:0;
		padding-left:210px;
	}
}
@media (min-width: 667px) {
	#headline{
		padding-left:310px;
	}
}
@media (min-width: 736px) {
	#headline{
		padding-left:380px;
	}
}
@media (min-width: 768px) {
	#headline{
		bottom:70px;
		padding:22px 0 17px 27px;
		width:435px;
	}
	#headline h2{
		font-size:2.7rem;
	}
	#headline h2.sub-headline{
		font-size:1.5rem;
	}
}
@media (min-width: 812px) {
	#headline{
		bottom:0;
		width:100%;
		padding-left:430px;
	}
	#headline h2{
		font-size:2.5rem;
	}
	#headline h2.sub-headline{
		font-size:1.4rem;
	}
}
@media (min-width: 1024px) {
	#headline{
		bottom:100px;
		width:440px;
		padding-left:30px;
	}
	#headline h2{
		font-size:2.7rem;
	}
	#headline h2.sub-headline{
		font-size:1.5rem;
		line-height:150%;
		padding-top:10px;
	}
}
@media (min-width: 1200px) {
	#headline{
		bottom:200px;
		width:470px;
	}
	#headline h2{
		font-size:3.0rem;
	}
	#headline h2.sub-headline{
		font-size:1.6rem;
	}
}


/* メッセージ＆メニュー */
#message{
	background:#EFEFEF;
	margin-top:100px;
	padding:20px;
	text-shadow:0 1px 0 #FFF;
	box-sizing:border-box;
}
#message h3{
	font-size:2.5rem;
	font-family:'BookAntiqua';
	padding:5px 0 10px;
}
br.br768-2, br.br1024-2, br.br1024-1200, br.br1024-1250, br.br1024-1310{
	display:none;
}
@media (min-width: 768px) {
	br.br768-2{
		display:inline;
	}
}
@media (min-width: 1024px) {
	br.br1024-2{
		display:inline;
	}
}
@media (min-width: 1024px) and (max-width: 1200px){
	br.br1024-1200{
		display:inline;
	}
}
@media (min-width: 1024px) and (max-width: 1250px){
	br.br1024-1250{
		display:inline;
	}
}
@media (min-width: 1024px) and (max-width: 1310px){
	br.br1024-1310{
		display:inline;
	}
}
#greeting{
	text-align:center;
	border:2px solid #333;
	margin:40px 0 30px;
	font-weight:bold;
	position:relative;
}
#greeting a{
	display:block;
	padding:7px 0;
}
#greeting a:hover{
	background:#CCC;
}

#menu{
	box-sizing:border-box;
	font-size:0;
}
.content{
	padding:20px;
	border-bottom:1px solid #666;
	box-sizing:border-box;
}
.content.last1{
	border-bottom:none;
}
.content.image{
	line-height:0;
}
.content.cont-photo{
	position:relative;
}
.content h4.normal{
	font-size:1.6rem;
	padding:9px 0 3px;
}
.content h4.news{
	font-size:2.5rem;
	font-family:'BookAntiqua';
}
.content h4.logo{
	text-align:center;
	padding:5px 0;
}
.content h4.logo img{
	width:200px;
	height:43px;
}
.content h4.otonano-midashi{
	font-size:1.8rem;
	line-height:140%;
	position:absolute;
	left:35px;
	top:35px;
	font-family:'Verdana','BIZ UDゴシック','BIZ UDGothic','游ゴシック','YuGothic','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ','Meiryo','ＭＳ Ｐ明朝','MS PMincho',serif;
}
#news dl{
	font-size:1.3rem;
	padding-top:15px;
}
#news dl dd{
	line-height:160%;
}
.content a img{
	-webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}
.content a:hover img{
	opacity:0.7;
    filter: alpha(opacity=70);
    -moz-opacity:0.7;
}
.content p{
	font-size:1.4rem;
	padding:0;
	line-height:170%;
}
.pc1024-2, .pc1100, .pc1200, .pc1300{
	display:none;
}
@media (min-width: 568px) {
	#greeting{
		width:370px;
	}
}
@media (min-width: 768px) {
	#message{
		margin-top:0;
		padding:40px;
	}
	#message h3{
		font-size:3.0rem;
		padding:150px 0 15px;
	}
	#menu{
		display:grid;
		grid-template-columns:1fr 1fr;
		grid-template-rows:270px 270px 270px 270px 270px;
	}
	.content.even{
		border-left:1px solid #666;
	}
	.content.news{
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}
	.content.otonano{
		grid-column: 1 / 2;
		grid-row: 3 / 5;
	}
	.content h4.logo{
		padding-top:100px;
	}
	.content h4.otonano-midashi{
		font-size:2.2rem;
	}
	.content.last2{
		border-bottom:none;
	}
	#news{
		height:470px;
		overflow-y:scroll;
	}
}
@media (min-width: 1024px) {
	#message{
		float:left;
		width:50%;
		border-right:1px solid #333;
	}
	#message h3{
		font-size:3.0rem;
	}
	#menu{
		grid-template-rows:250px 250px 250px 250px 250px;
		margin-top:150px;
		float:right;
		width:50%;
	}
	.content h4.logo{
		padding-top:80px;
	}
	.content h4.otonano-midashi{
		font-size:1.7rem;
	}
	.program-h4{
		letter-spacing:-0.16em;
	}
	.content p{
		line-height:150%;
	}
	.program-p{
		letter-spacing:-0.05em;
	}
	#news{
		height:425px;
	}
	.pc1024-2{
		display:inline;
	}
}
@media (min-width: 1100px) {
	#menu{
		grid-template-rows:260px 260px 260px 260px 260px;
	}
	.program-p{
		letter-spacing:0;
	}
	#news{
		height:440px;
	}
	.pc1024-2{
		display:none;
	}
	.pc1100{
		display:inline;
	}
}
@media (min-width: 1200px) {
	#message h3{
		font-size:3.3rem;
		padding:150px 0 25px;
	}
	#menu{
		grid-template-rows:280px 280px 280px 280px 280px;
	}
	.content h4.otonano-midashi{
		font-size:2.0rem;
	}
	.program-h4{
		letter-spacing:0;
	}
	#news{
		height:480px;
	}
	.pc1100{
		display:none;
	}
	.pc1200{
		display:inline;
	}
}
@media (min-width: 1300px) {
	#menu{
		grid-template-rows:300px 300px 300px 300px 300px;
	}
	#news{
		height:520px;
	}
	.content h4.logo{
		padding-top:110px;
	}
	.pc1200{
		display:none;
	}
	.pc1300{
		display:inline;
	}
}
@media (min-width: 1401px) {
	#menu{
		background:#FFF;
		border-right:1px solid #666;
	}
}