@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main {
    padding: 0;
    overflow: hidden;
}
#main .mainVisual {
    padding: 15rem 0 9rem;
    background: #00843D;
    position: relative;
}
#main .mainVisual::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5.9rem;
    left: 0;
    bottom: -5.8rem;
    background: url("../img/common/bg01.png") no-repeat center top / 100% 5.9rem;
    z-index: 1
}
#main .mainVisual .posImg01 {
    position: absolute;
    width: 9.2rem;
    top: 18rem;
    left: 3.8rem;
    z-index: 3;
}
#main .mainVisual .left01 {
    width: 25.6rem;
    top: auto;
    bottom: 4rem;
    left: 5.5rem
}
#main .mainVisual .posImg02 {
    position: absolute;
    width: 11.8rem;
    top: 13.8rem;
    right: 6.8rem;
    z-index: 3;
}
#main .mainVisual .midPosImg {
    position: absolute;
    width: 63rem;
    top: 6.9rem;
    top: 50%;
    left: 50%;
    transform: translate(-52%,-38.6%);
    z-index: 4;
}
#main .mainVisual .midPosImg img {
	opacity: 0;
	transform: translate3d(-16rem, 4rem, 0);
}
#main .mainVisual.active .midPosImg img {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity 200ms ease 1s,transform 700ms cubic-bezier(0.01, 0.34, 0.07, 1.16) 1s;
}
#main .mainVisual .right01 {
    width: 13.2rem;
    top: auto;
    bottom: 9.4rem;
    right: -1rem;
}
#main .mainVisual .right02 {
    width: 16.6rem;
    top: auto;
    bottom: -1.2rem;
    right: 15rem;
}
#main .mainVisual .right03 {
    width: 34.8rem;
    right: -30.1rem;
    top: auto;
    bottom: -18.2rem;
    z-index: 2;
}
#main .mainVisual .plane {
	transform: translate(5rem,5rem);
}
#main .mainVisual.active .plane {
	animation: plane 9s 8s infinite;
}
@keyframes plane {
	0% {
		transform: translate(5rem,5rem);
	}
	20% {
		transform: translate(-115rem,-92rem);
	}
	100% {
		transform: translate(-115rem,-92rem);
	}
}
#main .mainVisual .img {
    margin: 0 auto;
    display: block;
    width: 67.4rem;
    position: relative;
    z-index: 3;
	opacity: 0;
	transform: scale(0) rotate(.00001deg);
	transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55 );
}
#main .mainVisual.active .img {
	opacity: 1;
	transform: scale(1) rotate(.00001deg);
}
.mainVisual.active .shakeC {
	animation: shakeC 5.0s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes shakeC {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(10.0%);
	}
	100% {
		transform: translateY(0%);
	}
}
.shakeD.active {
	transform-origin: left bottom;
	animation: shakeD 1.5s cubic-bezier(0.45, 0, 0.55, 1);
}
@keyframes shakeD {
	0% {
		transform: translateY(0%);
	}
	10% {
		transform: translateY(-4%);
	}
	20% {
		transform: translateY(0%);
	}
	30% {
		transform: translateY(-4%);
	}
	40% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(-4%);
	}
	60% {
		transform: translateY(0%);
	}
	70% {
		transform: translateY(-4%);
	}
	80% {
		transform: translateY(0%);
	}
	100% {
		transform: translateY(0%);
	}
}
.shakeE.active {
	transform-origin: left bottom;
	animation: shakeE 4.0s cubic-bezier(0.45, 0, 0.55, 1);
}
@keyframes shakeE {
	0% {
		transform: rotate(0) translateY(0%);
	}
	10% {
		transform: rotate(-4deg) translateY(-2%);
	}
	20% {
		transform: rotate(0) translateY(0%);
	}
	30% {
		transform: rotate(-4deg) translateY(-2%);
	}
	40% {
		transform: rotate(0) translateY(0%);
	}
	50% {
		transform: rotate(-4deg) translateY(-2%);
	}
	60% {
		transform: rotate(0) translateY(0%);
	}
	100% {
		transform: rotate(0) translateY(0%);
	}
}
#main .mainVisual img  {
    width: 100%
}
#main .linkBox {
    margin-bottom: 10.6rem;
    padding: 10rem 5.5rem 0
}
#main .linkList li {
    padding: 3.5rem 0.5rem 4rem;
    font-size: 4rem;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: #00843D;
    background: #fff;
    border-radius: 3.6rem;
    text-align: center;
    font-weight: 700;
}
#main .linkList li + li {
    margin-top: 5rem
}
#main .linkList .title {
    margin-bottom: 1rem
}
#main .detailBtn {
	padding-top: 0.4rem;
}
#main .detailBtn a {
    margin: 0 auto;
    padding: 1rem 2.4rem 1rem 0.5rem;
    width: 22rem;
    text-align: center;
    display: block;
    font-size: 2.6rem;
    border-radius: 2.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
    background: #FFCD00 url("../img/common/arrow_icon.png") no-repeat right 0.7rem center / 3.2rem;
    box-sizing: border-box;
}
#main .attention {
    padding: 3.9rem 5rem 8.5rem 5.4rem;
    background: #FFCD00;
    position: relative;
}
#main .attention::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 5.9rem;
    left: 0;
    top: -5.8rem;
    background: url("../img/common/bg02.png") no-repeat left top / 100% 5.9rem;
}
#main .attention .textList {
    margin-bottom: 3.8rem;
}
#main .attention .textList li {
    padding-left: 3rem;
    text-indent: -3rem;
    font-size: 3rem;
    line-height: 1.466;
    letter-spacing: 0.005rem;
    font-weight: 500;
	text-align: justify;

}
#main .attention .textList li strong {
	font-weight: 700;
}
#main .attention .textList li + li {
   margin-top: 2.6rem;
}
#main .attention .comBtn {
    margin-left: -1.4rem;
}
@media all and (min-width: 897px) {
    #main .detailBtn a:hover {
        opacity: 0.7;
    }
}
@media all and (max-width: 896px) {
	#main .mainVisual.active .plane {
		transform: translate(-125rem,-88rem);
        animation: plane_sp 9s 8s infinite;
	}
}
@keyframes plane_sp {
	0% {
		transform: translate(5rem,5rem);
	}
	40% {
		transform: translate(-125rem,-88rem);
	}
	100% {
		transform: translate(-125rem,-88rem);
	}
}