@charset "utf-8";

html {
}

/*** base setting(single) ***/
@media screen and (max-width: 640px) {
}

@media print, screen and (min-width: 641px) {
	/* #home .content-nav {
		display: none;
	} */
}

/*** [TOP] INFORMATION ***/
@media screen and (max-width: 640px) {
	#home #info-group {
		width: 94%;
		margin: 0 auto 13.6%;
	}
	#home #info-group h2 {
		font-size: 1.8em;
		color: #383838;
		text-align: center;
		margin: 0 auto 6.4%;
	}
	#home #info-group .info-box {
	}
	#home #info-group .info-box .info-frame {
		overflow: hidden;
		position: relative;
		zoom:1;
		width: 100%;
		padding: 4px;
	}
	#home #info-group .info-box .info-frame a {
		display: block;
		overflow: hidden;
		position: relative;
		zoom:1;
		width: 100%;
		background: #fff;
		color: #000;
		text-decoration: none;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		box-shadow: 0 0 3px gray;
		padding: 4.6% 3.6% 4.6% 2.8%;
	}
	#home #info-group .info-box .info-frame .icon {
		float: left;
		width: 18%;
		font-size: 0.7em;
		text-align: center;
	}
	#home #info-group .info-box .info-frame .icon img {
		width: 70%;
		height: auto;
		vertical-align: middle;
	}
	#home #info-group .info-box .info-frame .detail {
		float: right;
		width: 78.4%;
	}
	#home #info-group .info-box .info-frame .detail .info-date {
		font-size: 1em;
		font-weight: bold;
		color: #008ddd;
		margin: 0 0 0.4em;
	}
	#home #info-group .info-box .info-frame .detail h4 {
		line-height: 1.5;
		font-weight: 300;
		color: #000;
	}
}

@media screen and (min-width: 641px) and (max-width: 980px) {
	#home #info-group {
		width: 90%;
		margin: 0 auto 64px;
	}
	#home #info-group h2 {
		font-size: 32px;
		color: #383838;
		text-align: center;
		margin: 0 auto 42px;
	}
	#home #info-group .info-box {
		overflow: hidden;
		position: relative;
		zoom:1;
		width: 100%;
		padding: 4px;
		margin: 0 auto;
	}
	
	#home #info-group .info-box .info-frame {
	}
	#home #info-group .info-box .info-frame a {
		display: block;
		background: #fff;
		color: #000;
		text-align: center;
		text-decoration: none;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		box-shadow: 0 0 4px gray;
		padding: 14px 16px 16px;
		margin: 0 0 1.2% 0;
		-webkit-transition: 0.36s;
		transition: 0.36s;
		backface-visibility: hidden; 
		-webkit-backface-visibility: hidden;
	}
	#home #info-group .info-box .info-frame .icon img {
		width: 68px;
		height: auto;
		vertical-align: middle;
	}
}

@media print, screen and (min-width: 981px) {
	#home #info-group {
		width: 940px;
		margin: 0 auto 64px;
	}
	#home #info-group h2 {
		font-size: 32px;
		color: #383838;
		text-align: center;
		margin: 0 auto 42px;
	}
	#home #info-group .info-box {
		overflow: hidden;
		position: relative;
		zoom:1;
		width: 940px;
		padding: 6px;
		margin: 0 auto;
	}
	
	#home #info-group .info-box .info-frame {
	}
	#home #info-group .info-box .info-frame a {
		display: block;
		background: #fff;
		color: #000;
		text-align: center;
		text-decoration: none;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		box-shadow: 0 0 4px gray;
		padding: 16px 18px 20px;
		margin: 0 0 8px 0;
		-webkit-transition: 0.36s;
		transition: 0.36s;
		backface-visibility: hidden; 
		-webkit-backface-visibility: hidden;
	}
	#home #info-group .info-box .info-frame .icon img {
		width: 74px;
		height: auto;
		vertical-align: middle;
	}
}

@media print, screen and (min-width: 641px) {
	#home #info-group .info-box .info-frame {
		position: relative;
	}
	#home #info-group .info-box .info-frame a:hover {
		background: rgba(144,209,255,.9);
	}
	#home #info-group .info-box .info-frame a:hover h4 {
		color: #fff;
	}
	#home #info-group .info-box .info-frame .icon {
		font-size: 12px;
		line-height: 1.0;
		width: 90px;
		float: left;
	}
	#home #info-group .info-box .info-frame .icon img {
		width: 72px;
		height: auto;
		vertical-align: middle;
	}
	#home #info-group .info-box .info-frame .detail {
		width: calc(100% - 120px - 18px);
		position: absolute;
		top: 50%;
		left: 120px;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
	}
	#home #info-group .info-box .info-frame .info-date {
		font-size: 20px;
		font-weight: bold;
		color: #008ddd;
		margin: 0 0 0.2em;
		text-align: left;
	}
	#home #info-group .info-box .info-frame h4 {
		font-size: 16px;
		line-height: 1.6;
		font-weight: 300;
		color: #000;
		text-align: left;
	}
}

/*** 70周年 公式ページへのバナー ***/
@media screen and (max-width: 640px) {
	#home #info-group #bnr-70th {
		width: 98%;
		box-shadow: 2px 2px 6px #555;
		margin: 0 auto 2.4em;
	}
}

@media print, screen and (min-width: 641px) {
	#home #info-group #bnr-70th {
		width: 700px;
		box-shadow: 2px 2px 6px #555;
		margin: 0 auto 2.4em;
	}
	#home #info-group #bnr-70th a {
		-webkit-transition: 0.3s;
		transition: 0.3s;
		backface-visibility: hidden; 
		-webkit-backface-visibility: hidden;
	}
	#home #info-group #bnr-70th a:hover {
		opacity: 0.8;
	}
}