@charset 'utf-8';

/* ++++++++++++++++++++++++++++++++++++++++

	index.php

++++++++++++++++++++++++++++++++++++++++ */

#mv,
#mv img {
	position: relative;
}
#mv a {
	position: absolute;
	left: 50%;
	bottom: 40px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

#contents>div {
	margin-top: 55px;
}

#news {
    margin:25px auto 80px;
}
#news h2 {
	height: auto;
	margin-bottom: 25px;
	background: none;
}
#news time {
	color: #b79f86;
}
#news h3 {
	border-bottom: solid 1px #e5d3c7;
	font-weight: normal;
	font-size: 100%;
}
#news a {
	text-decoration: none;
	color: inherit;
}

#news_1 {
	padding:20px;
	border:1px solid #CCCCCC;
	margin-bottom:20px;
	text-align:center;
}
#news_1 h2 {
	height: auto;
	margin-bottom: 15px;
	background: none;
	font-weight: bold;
	font-size: 90%;
	color: #bc1c1c;
	text-align:center;
}
#news_1 p {
	font-size: 90%;
}
#bnr {
	margin-bottom: 6.36%;
	}


/* ++++++++++++++++++++++++++++++++++++++++

	PC

++++++++++++++++++++++++++++++++++++++++ */

@media (min-width: 768px) {


    #mv {
		height: 720px;
		background: url(../img/index/im_top.jpg) 50% 50% / cover;
	}


	#contents>div {
		width: 1150px;
	}

	#news {
		box-sizing: border-box;
		min-height: 438px;
		padding: 55px 0 0 20px;
		background: url(../img/index/news_bg_pc.png) 100% 0 no-repeat;
	}
	#news h2,
	#news time {
		padding-left: 6px;
	}
	#news article {
		/*width: 646px;*/
		width: 670px;
	}
	#news time,
	#news h3 {
		padding: 14px 0;
	}
	#news time {
		position: absolute;
	}
	#news h3 {
		padding-left: 125px;
	}

}



/* ++++++++++++++++++++++++++++++++++++++++

	SP

++++++++++++++++++++++++++++++++++++++++ */

@media (max-width: 767px) {
	#mv img.pc {
	display:none;
}

    #mv a {
		bottom: 5.29%;
		width: 57.8125%;
	}

	#contents>div {
		margin: 4.6875% 7.03125% 0;
	}

	#bnr li+li {
		margin-top: 6.36%;
	}
	

	#news {
		margin-top: 8.18;
	}
	#news h2 {
		margin-bottom: 7.27%;
	}
	#news h2 img {
		width: 39.63%;
		margin: auto;
	}
	#news article+article {
		margin-top: 15px;
	}
	#news time {
		display: block;
		line-height: 1;
	}
	#news h3 {
		margin-top: 10px;
		padding-bottom: 10px;
	}
	#news_1 br.clr {
		display:none;
	}
}




/* トップページアニメーション */

#container{
	opacity : 0;
}
#progressPane{
	position : fixed;
	background-color : #FFFFFF;
	background-image : url(../img/index/tsubaki.png);
	background-repeat: no-repeat;
	background-position : calc(50vw - 120px) 50%;
	background-size : 240px auto; /* 椿の画像の大きさ、vwも可。上の120px(半分を指定)も同時に要変更 */
	z-index : 10;
	width : 0vw;
	height : 100vh;
	top : 0px;
	left : 0px;
	opacity : 1;
	pointer-events:none;
}
#progressPane.progressStart{
	transition-duration : 2.5s; /* 画面１（椿）のフェードイン速度 */
	width : 100vw;
}
#progressPane.progressEnd{
	transition-duration : 1s; /* 画面１（椿）のフェードイン速度 */
	opacity : 0;
}
#leadPane{
	position : fixed;
	background-color : #FFFFFF;
	z-index : 9;
	width : 100vw;
	height : 100vh;
	top : 0;
	right : 0;
	opacity : 0;
	overflow : hidden;
	pointer-events:none;
}
#leadPane IMG{
	position : absolute;
	top : 50vh;
	right : 50vw;
/*	margin-right : max(-40vw, -400px); */
	width : 80vw; /* リード・ロゴ画像のサイズ */
	max-width : 800px; /* リード・ロゴ画像のサイズ最大幅 */
	height : auto;
}
#leadPane IMG.lead{
/*	margin-top : calc(max(800px, 80vw) * 0.08 * -1); */
}
#leadPane IMG.logo{
	margin-top : 0;
	opacity : 0;
}
#leadPane.progressStart{
	transition-delay : 1.5s; /* 画面１のフェードアウトからリード文のフェードインが始まるまで */
	transition-duration : 2.0s; /* リード文のフェードインの速さ */
	opacity : 1;
}
#leadPane.progressStart IMG.logo{
	transition-delay : 2.5s; /*  画面１のフェードアウトからロゴのフェードインが始まるまで */
	transition-duration : 2.0s; /* ロゴのフェードインの速さ */
	opacity : 1;
}
#leadPane.progressEnd{
	transition-timing-function : cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-delay : 0s;
	transition-duration : 0.8s; /* 最後のワイプの速さ */
	width : 0vw;
}
#container.progress{
	opacity : 1;
	position:static;
}