@charset "UTF-8";

/* /////////////////////////////////////////スライドショー///////////////////////////////////////// */

.slideshowover {
    display: none;
}
.slideshow .col-md-12 {
    padding-left: 0px;
    padding-right: 0px;
}

.animation {
    margin-top: 50px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 118px;
    width: 100%;
}

.fadeInDown {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -ms-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    visibility: visible !important;
    margin-bottom: 0px;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/* /////////////////////////////////////////スライド画像のシーケンス///////////////////////////////////////// */

@keyframes slide1 {
	0% {opacity: 0;}
	5% {opacity: 1;}
	15% {opacity: 1;}
	20% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide2 {
	0% {opacity: 0;}
	15% {opacity: 0;}
	20% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide3 {
	0% {opacity: 0;}
	30% {opacity: 0;}
	40% {opacity: 1;}
	50% {opacity: 1;}
	60% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes slide4 {
	0% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 1;}
	70% {opacity: 1;}
	80% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide5 {
	0% {opacity: 0;}
	70% {opacity: 0;}
	80% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}


/* /////////////////////////////////////////画像ブロック///////////////////////////////////////// */
.mainimg {
    clear: left;
    position: relative;
    width: 100%;
    background-color: #01712F;
    margin-left: auto;
    margin-right: auto;
}

/*5枚画像の共通設定*/
.slide1,.slide2,.slide3,.slide4,.slide5 {
    -webkit-animation-duration: 21s;	/*実行する時間。「s」は秒の事。*/
    animation-duration: 21s;			/*同上*/
    -webkit-animation-iteration-count: infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
    animation-iteration-count: infinite;			/*同上*/
    width: 100%;
}

/*slide01*/
.slide1 {
    -webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
    animation-name: slide1;				/*同上*/
    position: relative;
}

/*slide02*/
.slide2 {
	-webkit-animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;				/*同上*/
	position: absolute;
	left: 0px;
	top: 0px;
}

/*slide03*/
.slide3 {
	-webkit-animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3;				/*同上*/
	position: absolute;
	left: 0px;
	top: 0px;
}

/*slide04*/
.slide4 {
	-webkit-animation-name: slide4;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide4;				/*同上*/
	position: absolute;
	left: 0px;
	top: 0px;
}

/*slide05*/
.slide5 {
	-webkit-animation-name: slide5;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide5;				/*同上*/
	position: absolute;
	left: 0px;
	top: 0px;
}


/* /////////////////////////////////////////新着情報///////////////////////////////////////// */
.row.news {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}
.row.titleset .col-md-12 {
    padding-left: 0px;
    padding-right: 0px;
}

.nav .dn {
    width: 100%;
    margin-bottom: 16px;
    border-bottom: thin dotted #BABABA;
}
.nav .date  {
    font-family: "Noto Sans Japanese" , sans-serif;
    display: block;
    font-weight: bold;
    color: #BDBDBD;
    padding-bottom: 8px;
}
.nav .newstext  {
    display: block;
    font-family: "Noto Sans Japanese" , sans-serif;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 16px;
    font-weight: 300;
}
.newstext a {
    color: #01712F;
    text-decoration: underline;
    font-weight: bold;
}
.newstext a:hover {
    text-decoration: underline;
    font-weight: bold;
}

/* /////////////////////////////////////////五月園からのメッセージ///////////////////////////////////////// */
.message .col-md-12 {
    background-image: url(../img/index/bg_message.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding-top: 50px;
    width: 100%;
    padding-bottom: 50px;
    background-position: center center;
    margin-bottom: 80px;
}

.catchcopy   {
    margin-bottom: 24px;
    font-family: "Noto Sans Japanese" , sans-serif;
    font-weight: 300;
    color: #989898;
    font-size: 16px;
    text-align: center;
    font-style: normal;
}
.message .gaiyou {
    font-size: 16px;
    text-align: center;
    color: #555555;
    line-height: 32px;
    font-family: "Noto Sans Japanese" , sans-serif;
    font-style: normal;
    margin-bottom: 40px;
}
.message .threebox {
    width: 32%;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
}

/* /////////////////////////////////////////五月園にお任せください  WORK LIST//////////////////////////// */
.row.worklist {
    margin-top: 40px;
    margin-bottom: 40px;
}
.textmemo {
    padding-left: 8px;
    padding-right: 8px;
}

/* /////////////////////////////////////////作業の流れ　WORK FLOW///////////////////////////////////////// */
.row.flow {
    width: 100%;
    margin-bottom: 80px;
}
.flow img {
    width: 80%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* //////////////////////////////////////576px以上の設定（PC画面用）////////////////////////////////////// */

@media (min-width:576px){
.row.flowmini {
    display: none;
}
}

/* //////////////////////////////////////576px以下の設定（スマートフォン用）////////////////////////////////////// */

@media (max-width:576px){
.row.news {
    width: 98%;
}
.heroImage {
    margin-bottom: -2px;
}
.titleset {
    margin-bottom: 44px;
}
.address p {
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 1.6px;
}
.message .threebox {
    width: 80%;
    font-size: 10px;
}
.row.worklist {
    margin-bottom: 40px;
}
.worklist .wlistImag {
    width: 80px;
    float: left;
}
.worklist .titlememo {
	margin-left: 88px;
	text-align: left;
	padding-left: 8px;
	font-size: 18px;
}
.worklist .textmemo  {
	margin-left: 88px;
	text-align: left;
	font-size: 16px;
	height: 72px;
}
.row.flow {
    display: none;
}
.row.flowmini {
    display: block;
    margin-bottom: 80px;
}

}



/* //////////////////////////////////////768px以下の設定（PC画面用）////////////////////////////////////// */

@media (max-width: 768px){
.wlistImag {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
.textmemo {
    font-size: 14px;
    height: 56px;
}
.flow {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.flow img {
    width: 100%;
}
}


/* //////////////////////////////////////992px以上の設定（PC画面用）////////////////////////////////////// */

@media (min-width: 992px){
.slideshow {
    display: none;
}
.slideshowover {
    display: block;
}
}


/* //////////////////////////////////////1200px以上の設定（PC画面用）////////////////////////////////////// */

@media (min-width: 1200px){
.row.news {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.row.worklist {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.row.flow {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
}