@charset "UTF-8";
/*==============
調整
==============*/
body {
}
#main {
float: none;
width:100%;
text-align: left;
overflow: hidden
}
/*	 link
/* ------------------------------------- */
a {
transition: 0.5s;
	}
a:hover {
opacity: 0.5;
}
/* ---------------------------------------------------------------------------------------------

　   スライド

--------------------------------------------------------------------------------------------- */
.rslides {
max-width: 100%;
margin: 0 auto;
overflow:hidden;
position: relative;
}
.rslides img {
	width: 100%;
	height: 400px;
	margin: auto;
	object-fit: cover;
}
@media screen and (min-width: 768px) {
.rslides img {
		width: 100%;
		height:auto;
	}
}

/* ---------------------------------------------------------------------------------------------

　   link

--------------------------------------------------------------------------------------------- */
.banalink-list{
	padding:40px 0;
	margin:0 auto
}
.banalink-list ul:after {
  content: "";
  clear: both;
  display: block;
}
.banalink-list ul li {
  list-style-type: none;
  display: block;
}
.banalink-list ul li a img{
    transition: 0.3s;
		width:100%;
		height: auto
}
.banalink-list ul li a:hover img{
    opacity: 0.7;
}
@media only screen and (min-width: 980px) {
.banalink-list ul.link-4 li {
  width: 23.56%;
  margin-right: 1.3%;
	display: inline-block;
}
.banalink-list ul.link-4 li:nth-child(4n) {
  margin-right: 0;
}
ul.link-4 {
	text-align: center;
}
.banalink-list ul li {
  margin-bottom: 2%;
}
}
@media only screen and (max-width: 980px) {
.banalink-list ul.link-4 li {
  width: 48.56%;
  margin-right: 2.88%;
}
.banalink-list ul.link-4 li:nth-child(2n) {
  margin-right: 0;
}
.banalink-list ul li {
  margin-bottom: 3%;
	float: left;
}
}
/* ---------------------------------------------------------------------------------------------

　   メッセージ

--------------------------------------------------------------------------------------------- */
#back_message h4 {
	color: #13852a;
	font-weight: normal;
	font-size: 130%;
	line-height: 1.5;
	margin: 0 0 20px 0;
}
#back_message p {
font-weight: normal;
font-size: 90%;
text-align: justify;
}
.message-box {
width: 100%
}


@media only screen and (min-width: 980px) {
#back_message h4 {
	font-size: 150%;
	line-height: 1.8;
	text-align: center
}
.message-box {
width: 600px;
margin: 0 auto
}

}

/* ---------------------------------------------------------------------------------------------

　 イラスト　animation

--------------------------------------------------------------------------------------------- */
.animation{
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1.5s;
}
.keyframe_yura{animation-name: anim_v;}
@keyframes anim_v {
0% {transform: translate(0, 0px);}
100% {transform: translate(0, -10px);}
}
.keyframe_fuwa{animation-name: anim_h;}
@keyframes anim_h {
0% {transform: translate(0px, 0);}
100% {transform: translate(10px, 0);}
}
/* ---------------------------------------------------------------------------------------------

　 画像フェードイン

--------------------------------------------------------------------------------------------- */
.sa:first-of-type
.sa01:first-of-type{
margin:0;
}
.sa{
display: none
}
.fadein{
transform:translateX(0);
}
.animateright{
right: 0;
margin-right: 0;
position: absolute;
}
.animateleft{
left: 0;
margin-left: 0;
position: absolute;
}

@media only screen and (min-width: 980px) {
.sa{
display: block;
position: absolute;
}
.sa01{
display: block;
position: absolute;
}
.animateright{
right: 0;
}
.animateleft{
left: 0;
}
.animateright img,
.animateleft img{
opacity: 1;
height: 240px
}
}
@media only screen and (min-width: 1300px) {
.animateright{
right: 50px;
}
.animateleft{
left: 0;
}
.animateright img,
.animateleft img{
opacity: 1;
height: 300px
}
}

/* ---------------------------------------------------------------------------------------------

　 サービス

--------------------------------------------------------------------------------------------- */
.service-box-list {
  margin-top: 2.87%;  
}

/* クリアフィックス */
.service-box-list ul:after {
  content: "";
  clear: both;
  display: block;
}
/* 一覧のリストの設定 */
.service-box-list ul li {
  list-style-type: none;
  display: block;
  float: left;
  margin-bottom: 2.87%;  
}


.serv-card {
  width: auto;
  cursor: pointer;
  border-radius: 3px;
  transition: 0.3s;
}

.serv-card:hover {
  opacity: 0.6;
}

.serv-img {
  padding: 0;
  text-align: center;
}
.serv-img img {
  width: 100%
}

.serv-card .con-0 {
  position: relative;
  font-size: 1.1em;
	color: #fff;
	margin: 0;
	text-align: left
}

.serv-card .content-1 {
  padding: 0.6em 1em;
	background-color: #e7747c;
}
.serv-card .content-2 {
  padding: 0.6em 1em;
	background-color: #ff7800;
}
.serv-card .content-3 {
  padding: 0.6em 1em;
	background-color: #0084ff;
}
.serv-card .content-4 {
  padding: 0.6em 1em;
	background-color: #64c432;
}

/* バッジ */
.badge	{
font-size: 50px;
  color: #fff;
  text-decoration: none;
	opacity: 0.5;
	font-weight: bold
}
/* バッジの表示位置 */
.pickup	{position: relative}

.badge	{position: absolute;
	bottom: 20px;
	right: 15px}


@media only screen and (min-width: 980px) {
.serv-card .con-0 {
  font-size: 1.2em;
}
.service-box-list ul li {
  width: 48.56%;
  margin-right: 2.88%;
}
.service-box-list ul li:nth-child(2n) {
  margin-right: 0;
}
}