@charset "UTF-8";
/* CSS Document */

/* common */
.main-in ul li {
	margin-bottom: 20px;
}
.main-in ul li a {
	padding-left: 5px;
	color: #333333;
}
.main-in ul li a:hover {
	color: #118264;
}
.linkBox {
	border-bottom: 1px dashed #aaa;
	overflow: hidden;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
.linkBox a:hover {
	opacity: 0.7;
}
.txtArea a {
	color: #288667;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
	margin-bottom: 20px;
}
.txtArea a span {
	color: #9a9a9a;
	font-size: 0.6em;
	font-weight: normal;
}
.checkArea {
	background: #fef3f5;
	font-size: 0.9em;
	margin-top: 20px;
	padding: 40px 30px 30px;
	position: relative;
}

.checkArea:after{
	content: '';
  display: table;
  clear: both;
}

.checkArea .icon {
	width: 82px;
	position: absolute;
	top: -8px;
	left: -3px;
}
.checkArea .title {
	color: #de2346;
	font-weight: bold;
	font-size: 1.2em;
}
.checkArea a {
	display: inherit;
	font-size: 1.0em;
	font-weight: normal;
	line-height: 1.2em;
}
.view-first img {
	transition: all 0.2s linear;
}
.view-first:hover img {
	transform: scale(1.1);
}
.article {
	overflow: hidden;
}
.main-in h3 {
	background:#118264;
	border-radius:5px;
	color:#fff;
	text-align:center;
	padding: 10px;
	margin: 80px 0 20px;
}

@media print, screen and (min-width : 1025px) {
.linkBox > p {
	float: left;
	width: 220px;
}
.linkBox > .txtArea {
	float: right;
	width: calc(100% - 220px);
}
.view {
	width: 280px;
	height: 200px;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	box-shadow: 1px 1px 2px #e6e6e6;
	cursor: default;
	margin-right: 20px;
}
.view .mask, .view .content {
	width: 280px;
	height: 200px;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0
}
.view img {
	display: block;
	position: relative;
	width: 280px;
}
.view p {
	position: relative;
	color: #fff;
	padding: 70px 20px 20px;
	text-align: center;
}
.view-first .mask {
	opacity: 0.6;
	background-color: rgba(17, 122, 94, 0.71);
	transition: all 0.4s ease-in-out;
	top: 100%;
}
.view-first p {
	transform: translateY(100px);
	transition: all 0.2s linear;
}
.view-first:hover .mask {
	opacity: 1;
	top: 0;
}
.view-first:hover p {
	opacity: 1;
	transform: translateY(0px);
}
.view-first:hover p {
	transition-delay: 0.1s;
}
}

@media screen and (min-width: 737px) and (max-width : 1024px) {
.linkBox > p {
	float: left;
	width: 220px;
}
.linkBox > .txtArea {
	float: right;
	width: calc(100% - 220px);
}
.view {
	width: calc((100% - 40px) / 3);
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	box-shadow: 1px 1px 2px #e6e6e6;
	cursor: default;
	margin-right:20px;
}
.view .mask {
	width: 100%;
	height: 50%;
	position: absolute;
	overflow: hidden;
	bottom: 0;
	left: 0;
}
.view .content {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0
}
.view img {
	display: block;
	position: relative;
	width: 100%;
}
.view p {
	position: relative;
	color: #fff;
	font-size:0.9em;
	padding: 10px;
	text-align: center;
	opacity: 1;
}
.view-first .mask {
	opacity: 0.9;
	background-color: rgba(17, 122, 94, 0.71);
}
}

@media screen and (max-width: 736px) {
.main-in ul li {
	margin-bottom: 0;
}
.main-in ul li a {
	padding: 15px 5px;
	color: #333333;
	display: block;
	border-bottom: 1px solid #e4e4e4;
}
.linkBox > p {
	float: none;
	text-align:center;
	width: 100%;
	margin-bottom:20px;
}
.linkBox > .txtArea {
	float: none;
	width: 100%;
}
.view {
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	box-shadow: 1px 1px 2px #e6e6e6;
	cursor: default;
	margin-bottom:20px;
}
.view .mask {
	width: 100%;
	height: 50%;
	position: absolute;
	overflow: hidden;
	bottom: 0;
	left: 0;
}
.view .content {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0
}
.view img {
	display: block;
	position: relative;
	width: 100%;
}
.view p {
	position: relative;
	color: #fff;
	padding: 20px 10px;
	text-align: center;
	opacity: 1;
}
.view-first .mask {
	opacity: 0.9;
	background-color: rgba(17, 122, 94, 0.71);
}
}