@charset "utf-8";

@media print,screen and (min-width: 800px) {
   /* 表示領域が800px以上の場合に適用するスタイル */
#contents-top {
	max-width: 1208px;
	display: flex;
	flex-wrap: wrap;
}
#contents-top2 {
	max-width: 1208px;
	display: flex;
	flex-wrap: wrap;
}

.column1 {
	width: calc(100% - 10px);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.40);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.40);
}
.column2 {
	width: calc(50% - 10px);
	margin: 4px;
	border: 1px solid rgba(180,180,180,1.00);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.40);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.40);
}
.column4 {
  width: calc(25% - 10px);
  margin: 4px;
	border: 1px solid rgba(180,180,180,1.00);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.40);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.40);
}
.column-frame{
	margin: 8px;
}
.column-noframe img{
	padding: 0px;
}
.column-noframe p{
	padding: 8px;
	line-height: 120%;
}
.column-frame p{
	padding-top: 8px;
}
.column1 a {
	text-decoration: none;
	color: rgba(65,65,65,1.00);
}
.column2 a {
	text-decoration: none;
	color: rgba(65,65,65,1.00);
}
.column4 a {
	text-decoration: none;
	color: rgba(65,65,65,1.00);
}
.column1 a:hover{
	color: rgba(65,65,65,0.50);
}
.column2 a:hover{
	color: rgba(65,65,65,0.50);
}
.column4 a:hover{
	color: rgba(65,65,65,0.50);
}
	
.top-catch {
	height: 530px;
	text-align: center;
	background-color: rgba(255,255,255,1.00);
	position: relative;
	background-image: url(../images/top-catch-bg.jpg);
	padding-top: 5px;
	background-repeat: no-repeat;
	background-position: center top;
}
h3.top-hl {
	border-bottom: 1px solid rgba(65,65,65,1.00);
	font-size: 32px;
	font-weight: normal;
	padding-top: 30px;
	padding-bottom: 10px;
	max-width: 1200px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
.top-catch h2 {
	text-align: center;
	position: absolute;
	top: 12%;
	right: 0px;
	left: 0px;
	font-size: 24px;
	font-weight: normal;
	text-shadow: 0px 1px 3px rgba(9,41,96,1.00);
}

}