@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main {
    padding: 0;
    overflow: hidden;
}
#main .mainVisual {
    padding: 15rem 0 14.8rem;
    background: #14285A url(../img/index/bg01.png) repeat left top / 23.9rem;
    position: relative;
}
#main .mainVisual::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5.9rem;
    left: 0;
    bottom: -1px;
    background: url("../img/common/bg01.png") no-repeat center top / 100% 5.9rem;
    z-index: 1
}
#main .mainVisual .posImg01 {
	position: absolute;
	width: 10.4rem;
	top: 16.4rem;
	left: 2.2rem;
	z-index: 3;
}
#main .mainVisual .left01 {
	width: 17.8rem;
	top: auto;
	bottom: 8.2rem;
	left: 4.1rem;
}
#main .mainVisual .posImg02 {
	position: absolute;
	width: 13.9rem;
	top: 12rem;
  	right: 7.2rem;
	z-index: 3;
}
#main .mainVisual .right01 {
	width: 12.8rem;
	top: auto;
	bottom: 17rem;
  	right: 0.4rem;
}
#main .mainVisual .right02 {
	width: 16.2rem;
	top: auto;
	bottom: 2.2rem;
  	right: 15.7rem;
}
#main .mainVisual .right03 {
    width: 34.6rem;
    right: -30.1rem;
    top: auto;
    bottom: -2.4rem;
    z-index: 2;
}
#main .mainVisual .midPosImg {
    position: absolute;
    width: 67.1rem;
    top: 50%;
    left: 50%;
    transform: translate(-50.4%,-52.8%);
    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 .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: 5.5rem;
    padding: 4rem 5.5rem 0
}
#main .linkList li {
    padding: 3.5rem 0.5rem 4rem;
    font-size: 4rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #14285A;
    background: #fff;
    border-radius: 3.6rem;
    text-align: center;
    font-weight: 600;
}
#main .linkList li + li {
    margin-top: 5rem
}
#main .linkList .title {
    margin-bottom: 1rem
}
#main .detailBtn {
	padding-top: 0.6rem;
}
#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;
	color: #fff;
    background: #D6031C url("../img/common/arrow_icon.png") no-repeat right 0.7rem center / 3.2rem;
    box-sizing: border-box;
    letter-spacing: 0;
}
#main .attention {
    padding: 9.5rem 5rem 8.5rem 5.4rem;
	color: #fff;
    background: #D6031C;
    position: relative;
}
#main .attention::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background:url(../img/index/bg02.png) repeat left top / 23.9rem;
	opacity: 0.8;
	mix-blend-mode: hard-light;
}
#main .attention::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 5.9rem;
    left: 0;
    top: -0.1rem;
    background: url("../img/common/bg02.png") no-repeat left top / 100% 5.9rem;
	z-index: 1;
}
#main .attention .textList {
    margin-bottom: 5.6rem;
}
#main .attention * {
	position: relative;
	z-index: 2;
}
#main .attention .textList li {
	padding-left: 3rem;
	text-indent: -3rem;
	font-size: 3rem;
	line-height: 1.466;
	letter-spacing: 0.07rem;
	text-align: justify;
	font-weight: 300;
	font-feature-settings: "palt";
}
#main .attention .textList li + li {
    margin-top: 3.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);
	}
}