@charset "utf-8";

/*
========== CSS of CONTENTS ==========

Created: 
Modified: 

1:base
2:header
3:contents
4:footer
5:animation

========== /CSS of CONTENTS ==========
*/

/* 1:base
   --------------------------------------------- */
html {
    font-size: 62.5%;
}

body {
    color: #333;
    font-size: 1.6rem;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: #0080c6;
    text-decoration: none;
}

/* 2:header
   --------------------------------------------- */
.header_contents {
    position: relative;
    width: 100%;
}

.header_contents .bk_images {
    width: 100%;
}

.header_contents .move_animals .animal_bear {
    position: absolute;
    left: -2%;
    top: 1%;
    width: 37%;
    z-index: 2;
}

.header_contents .move_animals .animal_fox {
    position: absolute;
    right: 20%;
    bottom: 18%;
    width: 20%;
    z-index: 2;
}

.header_contents .move_animals .animal_deer {
    position: absolute;
    right: 1%;
    bottom: 6%;
    width: 18%;
    z-index: 2;
}

.header_contents .main_title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 3;
}

/* 3:contents
   --------------------------------------------- */
.main {
    background-color: #fff27b;
    padding-top: 4%;
    padding-bottom: 11%;
    position: relative;
}

.main .reward {
    background: url(../images/bg_reward.png) no-repeat 0 0;
    background-size: cover;
    position: relative;
    padding: 12% 14% 3.5% 13.5%;
}

.main .reward .reward_2theme {
    margin-top: 5.5%;
}

.main .reward .ataru_text {
    bottom: -7%;
    position: absolute;
    right: 2%;
    width: 12%;
    z-index: 2;
}

.main .contact_beach {
    font-size: 2.5vw;
    margin: 1.5% 0 0 7%;
    line-height: 1.2;
}

.main .terminal {
    background: url(../images/bg_terminal.png) no-repeat 0 0;
    background-size: cover;
    margin-top: 4%;
    padding-top: 4%;
    position: relative;
}

.main .terminal .terminal_theme1_contents {
    display: flex;
    margin-left: 5.4%;
}

.main .terminal .terminal_theme1_contents .deer_image {
    margin-top: 5%;
    margin-right: 1%;
    width: 21%;
}

.main .terminal .terminal_theme1_contents .terminal_theme1 {
    background: url(../images/theme_waku1.png) no-repeat 0 0;
    background-size: cover;
    width: 64%;
}

.main .terminal .terminal_theme1_contents .terminal_theme1 a {
    display: block;
    color: #fa7b87;
    font-size: 5vw;
    font-weight: bold;
    line-height: 1.1;
    height: 100%;
}

.main .terminal .terminal_theme1_contents .terminal_theme1 a div {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    height: 100%;
    padding-top: 15%;
    padding-left: 5%;
}

.main .terminal .terminal_theme1_contents .terminal_theme1 a div .theme_text {
    width: 46%;
}

.main .terminal .terminal_theme2_contents {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 5.2%;
    padding-bottom: 7%;
    margin-top: 2%;
}

.main .terminal .terminal_theme2_contents .terminal_theme2 {
    margin-right: 4%;
    width: 50%;
}

.main .terminal .terminal_theme2_contents .fox_image {
    margin-top: 9%;
    width: 25%;
}

.main .bg_kuma {
    background: url(../images/bg_kuma.png) no-repeat 0 0;
    background-size: cover;
    height: 13%;
    left: 10%;
    position: absolute;
    bottom: -5.8%;
    width: 17%;
    z-index: 4;
}

.other_contents {
    background: #ffbcbe url(../images/bg_line.png) no-repeat top center;
    background-size: contain;
    padding-top: 5%;
    padding-bottom: 6%;
    position: relative;
}

.other_contents .head_line {
    margin: 0 auto;
    width: 43%;
}

.other_contents .circles_area {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5%;
    padding: 0 3% 0 2.4%;
    justify-content: space-between;
}

.other_contents .circles_area .list_contents {
    background-color: #fff;
    border-radius: 11px;
    box-shadow: 4px 4px 0px 0px rgba(255, 234, 41, 1);
    margin-bottom: 3%;
    width: 48.5%;
}

.other_contents .circles_area .list_contents a {
    display: block;
    color: #373737;
    font-size: 5vw;
    font-weight: bold;
    height: 100%;
}

.other_contents .circles_area .list_contents .list_inner {
    display: flex;
    align-items: center;
    align-content: center;
    height: 100%;
    padding: 7% 0% 7% 7%;
}

.other_contents .circles_area .list_contents .list_inner .circle_icon {
    width: 24%;
    margin-right: 7.5%;
}

.other_contents .circles_area .list_contents .list_inner .topic_text {
    line-height: 1.2;
    width: 59%;
}

/* 4:footer
   --------------------------------------------- */
.copyRight {
    background-color: #fff;
    color: #999;
    /* font-size: 1.2rem; */
    font-size: 4vw;
    padding: 3% 0;
    text-align: center;
}

/* 5:animation
   --------------------------------------------- */
.mv_bear {
    transform-origin: center bottom;
    animation: yurayura 3s linear 0s infinite;
}

.mv_fox {
    transform-origin: center bottom;
    animation: yurayura 2s linear 0s infinite;
}

.mv_deer {
    transform-origin: center bottom;
    animation: yurayura 3s linear 1s infinite;
}

@keyframes yurayura {
    0%{
        transform: rotate(0);
    }
    25%{
        transform: rotate(4deg);
    }
    50%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(0);
    }
}

.main .terminal .terminal_theme1_contents .terminal_theme1.is_animated {
    animation: yureyure_1 0.5s ease-out 0s 2;
    animation-iteration-count: 2;
}

@keyframes yureyure_1 {
    16.65% {
        transform: rotate(8deg);
    }
    33.3% {
        transform: rotate(-6deg);
    }
    49.95% {
        transform: rotate(4deg);
    }
    66.6% {
        transform: rotate(-2deg);
    }
    83.25% {
        transform: rotate(1deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.main .terminal .terminal_theme2_contents .terminal_theme2.is_animated {
    animation: yureyure_2 0.5s ease-out 200ms 2;
    animation-iteration-count: 2;
}

@keyframes yureyure_2 {
    16.65% {
        transform: rotate(8deg);
    }
    33.3% {
        transform: rotate(-6deg);
    }
    49.95% {
        transform: rotate(4deg);
    }
    66.6% {
        transform: rotate(-2deg);
    }
    83.25% {
        transform: rotate(1deg);
    }
    100% {
        transform: rotate(0deg);
    }
}