@charset "UTF-8";
/* CSS Document */

@-webkit-keyframes move_bg { 0% { background-position: center 0px; }
  100% { background-position: center -1400px; } }
@-o-keyframes move_bg { 0% { background-position: center 0px; }
  100% { background-position: center -1400px; } }
@-moz-keyframes move_bg { 0% { background-position: center 0px; }
  100% { background-position: center -1400px; } }
@keyframes move_bg { 0% { background-position: center 0px; }
  100% { background-position: center -1400px; } }
@-webkit-keyframes move_bg_sp { 0% { background-position: center 0px; }
  100% { background-position: center -140vw; } }
@-o-keyframes move_bg_sp { 0% { background-position: center 0px; }
  100% { background-position: center -140vw; } }
@-moz-keyframes move_bg_sp { 0% { background-position: center 0px; }
  100% { background-position: center -140vw; } }
@keyframes move_bg_sp { 0% { background-position: center 0px; }
  100% { background-position: center -140vw; } }


@-webkit-keyframes slide_corve { 0% { background-position: left top; }
  100% { background-position: 133px top; } }
@-o-keyframes slide_corve { 0% { background-position: left top; }
  100% { background-position: 133px top; } }
@-moz-keyframes slide_corve { 0% { background-position: left top; }
  100% { background-position: 133px top; } }
@keyframes slide_corve { 0% { background-position: left top; }
  100% { background-position: 133px top; } }


@-webkit-keyframes icon_rotate { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
@-o-keyframes icon_rotate { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
@-moz-keyframes icon_rotate { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes icon_rotate { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes icon_rotate_reverse { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } }
@-o-keyframes icon_rotate_reverse { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } }
@-moz-keyframes icon_rotate_reverse { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } }
@keyframes icon_rotate_reverse { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } }


.main_area {
    position: relative;
    background: #fcfcf9;
}

.main_area .main_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
}
.main_area .main_bg p {
    position: absolute;
    width: 100%;
    height: 500%;
    top: 0;
    background: center top;
}


.main_area .main_bg .bg1 {
    -webkit-animation: move_bg 30s linear infinite;
    -moz-animation: move_bg 30s linear infinite;
    -o-animation: move_bg 30s linear infinite;
    animation: move_bg 30s linear infinite;
}



.main_area .main_bg .bg2 {
    -webkit-animation: move_bg 25s linear infinite;
    -moz-animation: move_bg 25s linear infinite;
    -o-animation: move_bg 25s linear infinite;
    animation: move_bg 25s linear infinite;
}



.main_area .main_bg .bg3 {
    -webkit-animation: move_bg 35s linear infinite;
    -moz-animation: move_bg 35s linear infinite;
    -o-animation: move_bg 35s linear infinite;
    animation: move_bg 35s linear infinite;
}

.main_area .main_bg .bg1 {
    background-image: url(/images/user/bg_repeat_1.png);
}

.main_area .main_bg .bg2 {
    background-image: url(/images/user/bg_repeat_2.png);
}

.main_area .main_bg .bg3 {
    background-image: url(/images/user/bg_repeat_3.png);
}


.main_area .main_lead {
    /* width: 648px; */
    /* width: 46.28%; */
    margin: 0 auto;
    top: 0;
}

.main_area .main_lead {
    position: relative;
    z-index: 5;
}




/* サークルテキスト */


p.bg_circle_1, p.bg_circle_2  {
    top: calc(50% - 265px);
    content: "";
    display: block;
    position: fixed;
    background: url(/images/user/bg_circle_text.png) no-repeat center;
    -webkit-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    z-index: 1;
}

p.bg_circle_1 {
    -webkit-animation: icon_rotate 25s linear infinite;
    -moz-animation: icon_rotate 25s linear infinite;
    -o-animation: icon_rotate 25s linear infinite;
    animation: icon_rotate 50s linear infinite;
}

p.bg_circle_2 {
    -webkit-animation: icon_rotate_reverse 25s linear infinite;
    -moz-animation: icon_rotate_reverse 25s linear infinite;
    -o-animation: icon_rotate_reverse 25s linear infinite;
    animation: icon_rotate_reverse 50s linear infinite;
}

p.bg_circle_1, p.bg_circle_2 {
    width: 550px;
    height: 550px;
}

p.bg_circle_1 {
    left: -210px;
}

p.bg_circle_2 {
    right: -210px;
}