@charset "UTF-8";


/* loading
------------------------------------------------- */
#loader-bg {
    display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9998;
	background-color: #008232;
}
#loader {
	display: none;
	position: relative;
    width: 100%;
    height: 100%;
	z-index: 9999;
}
#loader p {
    width: 100%;
	position: absolute;
	top: 43%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
    color: #fff;
    font-weight: normal;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.2em;
}
#loader p span {
    display: block;
}
@media only screen and (max-width:750px){
#loader p {
	width: 100%;
    font-size: 3.466vw;
    top: 45%;
    letter-spacing: 0.1em;
}
#loader p span {
    font-size: 12.266vw;
}
}


/* mainvisual
------------------------------------------------- */
.mainvisual {
    width: 100%;
    height: 100vh;
    background: url("../img/top/mainvisual.jpg") center center no-repeat;
    background-size: cover;
    position: relative;
}
.mainvisual h2 {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translateY(-50%) translateX(-50%);
    color: #fff;
    font-weight: normal;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.2em;
}
.mainvisual h2 span {
    display: block;
}
.mainvisual p {
    width: 8.8571em;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateY(0) translateX(-50%);
}
@media only screen and (max-width:750px){
.mainvisual h2 {
    width: 100%;
    font-size: 3.466vw;
    top: 45%;
    letter-spacing: 0.1em;
}
.mainvisual h2 span {
    font-size: 12.266vw;
}
}


/* cont1
------------------------------------------------- */
.cont1 {
    background-color: #EEEFEF;
    padding: 7.8em 0 9.2em;
    letter-spacing: 0.1em;
}
.cont1 h3 {
    color: #008232;
    text-align: center;
    letter-spacing: 0.2em;
    margin-bottom: 1em;
    font-weight: 300;
    padding-left: 0.2em;
}
.cont1 .news {
    margin-bottom: 3em;
    height: 20.5em;
    overflow-y: auto;
}
.cont1 dl {
    width: 100%;
    display: table;
    border-top: 1px solid #4D4D4D;
    padding: 1em 3.5em;
    box-sizing: border-box;
}
.cont1 dl dt {
    display: table-cell;
    width: 7.2em;
    white-space: nowrap;
}
.cont1 dl dd {
    display: table-cell;
}
.cont1 dl .cat {
    padding-right: 4em;
    white-space: nowrap;
}
.cont1 dl .cat span {
    background-color: #008232;
    color: #fff;
    text-align: center;
    line-height: 1.9;
    border-radius: 0.2em;
    width: 13em;
    display: block;
}
.cont1 dl .cat.camp span {
    background-color: #F6A906;
}
.cont1 p {
    text-align: center;
}
.cont1 p a {
    background: url("../common/img/ico_all.svg") right center no-repeat;
    background-size: 1.2em auto;
    padding-right: 1.5em;
}
@media only screen and (max-width:750px){
.cont1 {
    padding: 20vw 0 17vw;
    letter-spacing: normal;
}
.cont1 h3 {
    font-size: 6.8vw;
    color: #008232;
    text-align: center;
    letter-spacing: 0.2em;
    margin-bottom: 1em;
    font-weight: 300;
    padding-left: 0.2em;
}
.cont1 .news {
    margin-bottom: 8vw;
}
.cont1 dl {
    border-top: 1px solid #d1d2d2;
    padding: 0.9em 0.7em;
}
.cont1 dl dt {
    font-size: 2.78vw;
    width: 7.2em;
}
.cont1 dl dd {
    display: block;
    width: 100%;
    margin-top: 0.5em;
}
.cont1 dl .cat {
    display: table-cell;
    width: 10em;
    font-size: 2.13vw;
    margin: 0;
}
.cont1 dl .cat span {
    line-height: 2.2;
}
.cont1 p {
    font-size: 3.648vw;
}
.cont1 p a {
    background: url("../common/img/ico_all.svg") right center no-repeat;
    background-size: 4.224vw auto;
    padding-right: 6.5vw;
}
}


/* cont2
------------------------------------------------- */
.cont2 {
    margin-bottom: 14em;
}
.cont2 .contbox {
    display: flex;
    flex-wrap: wrap;
}
.cont2 .contbox .box {
    width: 50%;
    height: 32.85em;
    position: relative;
}
.cont2 .contbox .box h3.headline1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    transition: opacity 0.2s ease;
}
.cont2 .contbox .box .cover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(53,106,88,0.85);
    transition: opacity 0.4s ease;
    opacity: 0;
}
.cont2 .contbox .box p {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translateY(-50%) translateX(-50%);
    color: #fff;
    text-align: center;
    line-height: 2.2;
    opacity: 0;
}
.cont2 .contbox .box p.headline1 {
    top: 22%;
    transform: translateY(-50%) translateX(-50%) scale(0.9);
    line-height: 3;
}
.cont2 .contbox .box ul {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 75%;
    transform: translateY(-50%) translateX(-50%);
    display: flex;
    justify-content: center;
    opacity: 0;
}
.cont2 .contbox .box ul li {
    margin: 0 2.9em;
}
.cont2 .contbox .box ul li a {
    display: block;
    width: 18em;
    line-height: 3.3;
    border: 1px solid #fff;
    color: #fff;
    text-align: center;
    position: relative;
    letter-spacing: 0.2em;
    transition: 0.3s;
}
.cont2 .contbox .box ul li a:hover {
    background: rgba(0,0,0,0.6);
    text-decoration: none;
}
.cont2 .contbox .box ul li a span {
    overflow: hidden;
    display: block;
    width: 3.9em;
    height: 0.69em;
    position: absolute;
    right: -1.95em;
    top: 35%;
}
.cont2 .contbox .box ul li a span::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url("../common/img/ico_arrow3.png") center center no-repeat;
    background-size: auto 100%;
}
.cont2 .contbox .box ul li a span::before {
    transform: translateX(0);
}
.cont2 .contbox .box ul li a:hover span::before {
    animation: move-arrow 0.8s 0.2s forwards;
}
.cont2 .contbox .box ul .blank a::after {
    content: '';
    display: block;
    position: absolute;
    width: 1em;
    height: 0.86em;
    background: url("../common/img/ico_blank_w.png") center bottom no-repeat;
    background-size: cover;
    right: 3.5em;
    top: 37%;
}
.cont2 .contbox .box1,
.cont2 .contbox .box2,
.cont2 .contbox .box4 {
    width: 100%;
}
.cont2 .contbox .box1 {
    background: url("../img/top/bg1.jpg") center center no-repeat;
    background-size: cover;
}
.cont2 .contbox .box2 {
    background: url("../img/top/bg2.jpg") center center no-repeat;
    background-size: cover;
}
.cont2 .contbox .box3 {
    background: url("../img/top/bg3.jpg") center center no-repeat;
    background-size: cover;
}
.cont2 .contbox .box4 {
    background: url("../img/top/bg4.jpg") center center no-repeat;
    background-size: cover;
}
.cont2 .contbox .box3 p {
    top: 58%;
}
.cont2 .contbox .box3 p img {
    display: block;
    width: 12.86em;
    margin: 1em auto;
}
.cont2 .contbox .box3 ul {
    top: 80%;
}
.cont2 .contbox .box1 ul,
.cont2 .contbox .box4 ul {
    width: 72.5em;
    margin: 0 auto;
    top: 80%;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.cont2 .contbox .box1 ul li,
.cont2 .contbox .box4 ul li {
    margin: 0 2.9em 1.5em;
}
@media only screen and (min-width:751px){
.cont2 .contbox .box:hover h3.headline1 {
    opacity: 0;
}
.cont2 .contbox .box:hover .cover,
.cont2 .contbox .box:hover p,
.cont2 .contbox .box:hover ul {
    opacity: 1;
} 
}
@media only screen and (max-width:750px){
.cont2 {
    margin-bottom: 26.66vw;
}
.cont2 .contbox {
    display: block;
}
.cont2 .contbox .box {
    width: 100%;
    height: 147.46vw;
}
.cont2 .contbox .box h3.headline1 {
    display: none;
}
.cont2 .contbox .box p.headline1 {
    top: 29%;
}
.cont2 .contbox .box p {
    top: 55%;
    letter-spacing: 0.1em;
}
.cont2 .contbox .box ul {
    top: 79%;
    display: block;
}
.cont2 .contbox .box ul li {
    margin: 0 0 5vw;
}
.cont2 .contbox .box ul li a {
    font-size: 4.266vw;
    width: 70vw;
    line-height: 12vw;
    transition: 0.3s;
    margin: 0 auto;
}
.cont2 .contbox .box ul li a span {
    width: 14.5vw;
    height: 2.4vw;
    right: -8.2vw;
}
.cont2 .contbox .box.isAnimate2 .headline1 {
    opacity: 1;
    transform: translateY(-50%) translateX(-50%) scale(1);
}
.cont2 .contbox .box.isAnimate2 .cover,
.cont2 .contbox .box.isAnimate2 p,
.cont2 .contbox .box.isAnimate2 ul {
    opacity: 1;
}
.cont2 .contbox .box1,
.cont2 .contbox .box4 {
    height: 205vw;
}
.cont2 .contbox .box1 {
    background: url("../img/top/bg1_sp.jpg") center center no-repeat;
    background-size: cover;
}
.cont2 .contbox .box2 {
    background: url("../img/top/bg2_sp.jpg") center center no-repeat;
    background-size: cover;
}
.cont2 .contbox .box3 {
    background: url("../img/top/bg3_sp.jpg") center center no-repeat;
    background-size: cover;
}
.cont2 .contbox .box4 {
    background: url("../img/top/bg4_sp.jpg") center center no-repeat;
    background-size: cover;
}
.cont2 .contbox .box2 p {
    top: 60%;
}
.cont2 .contbox .box3 p {
    top: 61%;
}
.cont2 .contbox .box3 p img {
    width: 49.6vw;
    margin: 1em auto;
}
.cont2 .contbox .box3 ul {
    top: 84%;
}
.cont2 .contbox .box1 .headline1 {
    font-size: 6.933vw;
}
.cont2 .contbox .box1 .headline1,
.cont2 .contbox .box1.isAnimate2 .headline1,
.cont2 .contbox .box4 .headline1,
.cont2 .contbox .box4.isAnimate2 .headline1 {
    top: 24%;
}
.cont2 .contbox .box1 p,
.cont2 .contbox .box4 p {
    top: 45%;
}
.cont2 .contbox .box1 ul,
.cont2 .contbox .box4 ul {
    width: 100%;
    top: 74%;
    display: block;
}
.cont2 .contbox .box1 ul li,
.cont2 .contbox .box4 ul li {
    margin: 0 0 2.5vw;
}
.cont2 .contbox .box1 ul li a,
.cont2 .contbox .box4 ul li a {
    font-size: 3.789vw;
    width: 61.33vw;
    line-height: 10.5vw;
}
}