@charset "utf-8";

.pc-menu .header-logo {
    top: 50px;
    transform: none;
}
.pc-menu .languageWrap {
    top: 55px;
    transform: none;
}
.pc-menu .nav-top {top: 50px;}

.nav-fixed .pc-menu .header-logo,
.nav-fixed .pc-menu .languageWrap {
    top: 50%;
    transform: translateY(-50%);
}
.nav-fixed .pc-menu .nav-top {top: 30px;}

.mainWrap {margin-top: -140px;}
.mainWrap ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mainWrap p {margin: 0;}

.mainWrap .visual {
    background: #ffdf7f;
    position: relative;
    height: 800px;
    overflow: hidden;
}
.mainWrap .visual .cloudWrap > div {
    position: absolute;
    z-index: 5;
}
.mainWrap .visual .cloudWrap .cloud01 {left: -30px; top: 215px;}
.mainWrap .visual .cloudWrap .cloud02 {left: 350px; top: 260px;}
.mainWrap .visual .cloudWrap .cloud03 {right: 350px; top: 280px;}
.mainWrap .visual .cloudWrap .cloud04 {right: 50px; top: 380px;}

.mainWrap .visual .cloudWrap .cloud01 img {
    -webkit-animation: cloud1 3s linear 0s infinite alternate;
    -moz-animation: cloud1 3s linear 0s infinite alternate;
    animation: cloud1 3s linear 0s infinite alternate;
}
@-webkit-keyframes cloud1 {
    0%{transform: translateY(-15px);}
    100%{transform: translateY(10px);}
}
@-moz-keyframes cloud1 {
    0%{transform: translateY(-15px);}
    100%{transform: translateY(10px);}
}
@-o-keyframes cloud1 {
    0%{transform: translateY(-15px);}
    100%{transform: translateY(10px);}
}
@keyframes cloud1 {
    0%{transform: translateY(-15px);}
    100%{transform: translateY(10px);}
}
.mainWrap .visual .cloudWrap .cloud02 img {
    -webkit-animation: cloud2 2s linear 0s infinite alternate;
    -moz-animation: cloud2 2s linear 0s infinite alternate;
    animation: cloud2 2s linear 0s infinite alternate;
}
@-webkit-keyframes cloud2 {
    0%{transform: translateY(5px);}
    100%{transform: translateY(-10px);}
}
@-moz-keyframes cloud2 {
    0%{transform: translateY(5px);}
    100%{transform: translateY(-10px);}
}
@-o-keyframes cloud2 {
    0%{transform: translateY(5px);}
    100%{transform: translateY(-10px);}
}
@keyframes cloud2 {
    0%{transform: translateY(5px);}
    100%{transform: translateY(-10px);}
}
.mainWrap .visual .cloudWrap .cloud03 img {
    -webkit-animation: cloud3 4s linear 0s infinite alternate;
    -moz-animation: cloud3 4s linear 0s infinite alternate;
    animation: cloud3 4s linear 0s infinite alternate;
}
@-webkit-keyframes cloud3 {
    0%{transform: translateY(-15px);}
    100%{transform: translateY(10px);}
}
@-moz-keyframes cloud3 {
    0%{transform: translateY(-15px);}
    100%{transform: translateY(10px);}
}
@-o-keyframes cloud3 {
    0%{transform: translateY(-15px);}
    100%{transform: translateY(10px);}
}
@keyframes cloud3 {
    0%{transform: translateY(-15px);}
    100%{transform: translateY(10px);}
}
.mainWrap .visual .cloudWrap .cloud04 img {
    -webkit-animation: cloud4 2s linear 0s infinite alternate;
    -moz-animation: cloud4 2s linear 0s infinite alternate;
    animation: cloud4 2s linear 0s infinite alternate;
}
@-webkit-keyframes cloud4 {
    0%{transform: translateY(5px);}
    100%{transform: translateY(-10px);}
}
@-moz-keyframes cloud4 {
    0%{transform: translateY(5px);}
    100%{transform: translateY(-10px);}
}
@-o-keyframes cloud4 {
    0%{transform: translateY(5px);}
    100%{transform: translateY(-10px);}
}
@keyframes cloud4 {
    0%{transform: translateY(5px);}
    100%{transform: translateY(-10px);}
}
.mainWrap .visual .characterWrap > div {
    position: absolute;
    z-index: 8;
}
.mainWrap .visual .characterWrap .character01 {left: 150px; bottom: 0;}
.mainWrap .visual .characterWrap .character02 {right: 160px; bottom: 0;}

.mainWrap .visual .bgWrap > div {position: absolute;}
.mainWrap .visual .bgWrap .bg01 {left: 0; bottom: 265px;}
.mainWrap .visual .bgWrap .bg02 {left: 90px; bottom: 250px; z-index: 2;}
.mainWrap .visual .bgWrap .bg03 {right: 0; bottom: 180px;}
.mainWrap .visual .bgWrap .bg04 {left: 0; bottom: -280px; z-index: 3; width: 100%;}
.mainWrap .visual .bgWrap .bg04 img {width: 100%;}
.mainWrap .visual .bgWrap .bg05 {left: 0; bottom: 0; z-index: 4; width: 100%;}
.mainWrap .visual .bgWrap .bg05 img {width: 100%;}

.mainWrap .visual .titleWrap {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% - 15px);
    text-align: center;
    z-index: 10;
}
.mainWrap .visual .titleWrap p {
    font-family: "Montserrat";
    font-weight: bold;
    font-size: 24px;
    color: #9d5a44;
    border: 5px solid #ffc34a;
    padding: 10px 80px;
    border-radius: 50px;
    display: inline-block;
    letter-spacing: 5px;
    margin: 0;
}
.mainWrap .visual .titleWrap h2 {margin: 40px 0 0;}
.mainWrap .visual .titleWrap h2 > span {position: relative;}
.mainWrap .visual .titleWrap h2 .title01 {z-index: 5;}
.mainWrap .visual .titleWrap h2 .title02 {margin-left: -40px; z-index: 4;}
.mainWrap .visual .titleWrap h2 .title03 {margin-left: -30px; z-index: 3;}
.mainWrap .visual .titleWrap h2 .title04 {margin-left: -40px; z-index: 2;}
.mainWrap .visual .titleWrap h2 .title05 {margin-left: -50px; z-index: 1;}

.mainWrap .news {padding: 80px 0 100px;}

@media all and (min-width: 1921px) {
    .mainWrap .visual .characterWrap {
        max-width: 1920px;
        margin: 0 auto;
        position: relative;
        height: 100%;
    }
}
@media all and (max-width: 1919px) {
    .mainWrap .visual .bgWrap .bg01,
    .mainWrap .visual .bgWrap .bg02,
    .mainWrap .visual .bgWrap .bg03 {bottom: 0;}
}
@media all and (max-width: 1400px) {
    .mainWrap .visual .characterWrap .character01 {left: 15px;}
    .mainWrap .visual .characterWrap .character02 {right: 15px;}
}
@media all and (max-width: 1200px) {
    .mainWrap .visual .bgWrap .bg01,
    .mainWrap .visual .bgWrap .bg02,
    .mainWrap .visual .bgWrap .bg03 {bottom: -30px;}
}
@media all and (max-width: 1024px) {
    .mainWrap .visual .bgWrap .bg04 {bottom: 0;}
}
@media all and (max-width: 991px) {
    .mainWrap {margin-top: -60px;}
    .mainWrap .visual .characterWrap .character03 {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        bottom: 0;
    }
    .mainWrap .visual .characterWrap .character03 img {max-width: 100%;}
    .mainWrap .visual .bgWrap .bg01,
    .mainWrap .visual .bgWrap .bg02,
    .mainWrap .visual .bgWrap .bg03 {display: none;}
    .mainWrap .visual .cloudWrap .cloud03 {display: none;}
}
@media all and (max-width: 767px) {
    .mainWrap .visual {height: 700px;}
    .mainWrap .visual .titleWrap p {
        font-size: 16px;
        padding: 5px 20px;
        letter-spacing: 1px;
        border-width: 3px;
    }
    .mainWrap .visual .titleWrap h2 {margin-top: 25px;}
    .mainWrap .visual .titleWrap h2 > span img {
        max-width: 80px;
        max-height: 80px;
    }
    .mainWrap .visual .titleWrap h2 .title02 {margin-left: -20px;}
    .mainWrap .visual .titleWrap h2 .title03 {margin-left: -20px;}
    .mainWrap .visual .titleWrap h2 .title04 {margin-left: -25px;}
    .mainWrap .visual .titleWrap h2 .title05 {margin-left: -25px;}
    .mainWrap .visual .cloudWrap .cloud02 {left: inherit; right: 10px; top: 80px;}
    .mainWrap .visual .cloudWrap .cloud04 {right: -50px; top: 250px;}
    .mainWrap .news {padding: 50px 0;}
}
@media all and (max-width: 600px) {
    .mainWrap .visual {height: 600px;}
}
@media all and (max-width: 480px) {
    .mainWrap .visual {height: 500px;}
}