html, body { height:100%; }
.wrap { position:relative; margin:0 auto; overflow:hidden; line-height:0; }
.wrap .inner { position:relative; max-width:980px; margin:0 auto; overflow:hidden; line-height:0; }
.wrap img { width:100%; }
.wrap .section1 > div,
.wrap .section2 > div,
.wrap .section3 > div,
.wrap .section4 > div,
.wrap .section5 > div,
.wrap .section6 > div,
.wrap .section7 > div,
.wrap .section8 > div { position:relative; max-width:980px; margin:0 auto; }

@keyframes changeopacity {
    0% { opacity:0; }
    5% { opacity:1; }
    50% { opacity:1; }
    55% { opacity:0; }
    100% { opacity:0; }
}

@keyframes changeopacity1 {
    0% { opacity:0; }
    5% { opacity:0; }
    10% { opacity:1; }
    55% { opacity:1; }
    60% { opacity:0; }
    100% { opacity:0; }
}



.wrap header { position:fixed; top:0; left:0; width:100%; z-index:10; background:#fff; }
.wrap header ul { position:relative; max-width:980px; margin:0 auto; }
.wrap header li { position:relative; float:left; width:calc((300/980)*100%); }
.wrap header li:first-child { width:calc((80/980)*100%); }
.wrap header li a { display:block; }
.wrap header li a .on { position:absolute; opacity:0; z-index:1; top:0; left:0; width:100%; transition:opacity 0.25s ease-in-out; }
.wrap header li.active a .on { opacity:1; }
.wrap header li:hover a .on { opacity:1; }

.wrap .section1 { position:relative; background:url('../img/bg_section1.jpg') repeat-x 50% 69px; padding-top:69px; }

@media only screen and (max-width: 980px)  {
    .wrap .section1 { padding-top:calc((90/1280)*100%); }
    
}


.wrap .section1 > div .rolling { position:absolute; opacity:0; z-index:1; top:0; left:0; width:100%;
    animation-duration: 1.2s;
    animation-name: changeopacity;
    animation-iteration-count: infinite;
}

.wrap .section1 > div:first-child .rolling { position:absolute; opacity:0; z-index:1; top:0; left:0; width:100%;
    animation-duration: 2.5s;
    animation-name: changeopacity;
    animation-iteration-count: infinite;
}

.wrap .section1 iframe { position:absolute; z-index:1; top:calc((317/1014)*100%); left:calc((90/980)*100%); width:calc((802/980)*100%); height:calc((451/1014)*100%); }

.wrap .section2 { position:relative; background:#fff4d3; padding-bottom:calc((36/980)*100%); overflow:hidden; }
.wrap .section2 > div:first-child { max-width:1044px; }
.wrap .section2 .rolling { position:absolute; opacity:0; z-index:1; top:0; left:0; width:100%;
    animation-duration: 2.5s;
    animation-name: changeopacity;
    animation-iteration-count: infinite;
}
.wrap .section2 .sns { position:relative; margin:calc((20/980)*100%) auto 0; width:calc((720/980)*100%); max-width:880px; text-align:center;  }
.wrap .section2 .sns .snslink { position:absolute; top:calc((42/159)*100%); left:calc((400/980)*100%); z-index:1; width:100%; }
.wrap .section2 .sns a { float:left; display:block; width:calc((80/880)*100%); margin:0 calc((10/880)*100%); }
.wrap .section2 .btns img { display:block; margin:calc((75/980)*100%) auto 0; width:calc((720/980)*100%); padding-bottom: 2rem;}
.wrap .section2 .emoticon{ margin-top: -3rem}

.wrap .section2 iframe { position:absolute; z-index:1; top:calc((374/1964)*100%); left:calc((90/853)*100%); width:calc((802/1013)*100%); height:calc((451/3335)*100%); }


.wrap .section3 { position:relative; background:#f9e9bb url('../img/bg_section3.jpg') repeat-x 50% 0; }
.wrap .section4 { position:relative; background:#43b951 url('../img/bg_section4.jpg') repeat-x 50% 0; }
.wrap .section4 > div:last-child { padding-bottom:calc((155/980)*100%);  }
.wrap .section4 > div:nth-child(1) { position:relative; }
.wrap .section4 > div:nth-child(3) { position:relative; max-width:1078px; }
.wrap .section4 > div:nth-child(4) { position:relative; max-width:1078px; }
.wrap .section4 > div:nth-child(5) { position:relative; max-width:1078px; }
.wrap .section4 iframe { position:absolute; z-index:1; top:calc((374/1057)*100%); left:calc((90/980)*100%); width:calc((802/980)*100%); height:calc((451/1057)*100%); }
.wrap .section4 .rolling1 { position:absolute; opacity:0; z-index:1; top:0; left:0; width:100%;
    animation-duration: .5s;
    animation-name: changeopacity1;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}
.wrap .section4 .rolling2 { position:absolute; opacity:0; z-index:1; top:0; left:0; width:100%;
    animation-duration: .5s;
    animation-name: changeopacity;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.wrap .section4 > div .rolling { position:absolute; opacity:0; z-index:1; top:0; left:0; width:100%;
    animation-duration: 1.2s;
    animation-name: changeopacity;
    animation-iteration-count: infinite;
}

.wrap .section4 a { /*position:absolute; left:calc((130/980)*100%); bottom:calc((65/1350)*100%);*/ display:block; margin:0 auto; width:calc((720/980)*100%);  }

.wrap .section5 { position:relative; background:#9530d6; }
.wrap .section5 > div:last-child { padding-bottom:calc((158/980)*100%);  }
.wrap .section5 a { display:block; margin:calc((52/980)*100%) auto 0; width:calc((720/980)*100%);  }
.wrap .section5 .rolling1 { position:absolute; opacity:0; z-index:1; top:0; left:0; width:100%;
    animation-duration: .7s;
    animation-name: changeopacity1;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}
.wrap .section5 .rolling2 { position:absolute; opacity:0; z-index:1; top:0; left:0; width:100%;
    animation-duration: .7s;
    animation-name: changeopacity;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.wrap .section6 { position:relative; background:#f8f8f8; padding-top:calc((160/980)*100%); }
.wrap .section6 > div:last-child { padding-bottom:calc((158/980)*100%);  }
.wrap .section6 .title { margin:0 auto; width:calc((768/980)*100%);  }
.wrap .section6 .btns { margin:calc((75/980)*100%) auto 0; text-align:center;;  }
.wrap .section6 .btns a { display:inline-block; width:calc((420/980)*100%); margin:0 calc((20/980)*100%);  }

.wrap .section7 { position:relative; background:#fff; }
.wrap .section7 div { padding-bottom:calc((210/980)*100%); }
.wrap .section8 { position:fixed; bottom:0; left:0; width:100%; background:#ea1c29; z-index:10; }
.wrap .section8 a { display:block; text-align:center; }
.wrap .section8 img { width:50%; }