@charset 'UTF-8';
/* --------------------------------------------------------------------------------
*   common
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*   text / font
-------------------------------------------------------------------------------- */
#loading .loadingPercent
{
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* --------------------------------------------------------------------------------
*   media query
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   z-index
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   easing
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   texture
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   color
*
-------------------------------------------------------------------------------- */
/* HSL */
/* RGB */
/* HSL */
/* RGB */
/* HSL */
/* RGB */
/* HSL */
/* RGB */
/* Coolors Exported Palette - coolors.co/040091-6901f5-b735fb-fe249b-ff5a78 */
/* HSL */
/* RGB */
/* HSL */
/* RGB */
/* HSL */
/* RGB */
/* --------------------------------------------------------------------------------
*
*   mixin
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   animation
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   media query
*
-------------------------------------------------------------------------------- */
/*
*
*   max order 
*
*/
/*
*
*   min order 
*
*/
/*
*
*   how to   
*
*/
/* --------------------------------------------------------------------------------
*
*   portrait,landscape
*
-------------------------------------------------------------------------------- */
/*
  *
  *   how to
  *
  */
/* --------------------------------------------------------------------------------
*
*   common
*
-------------------------------------------------------------------------------- */
.m-0
{
    margin: 0 !important;
}

.m-1
{
    margin: 5px !important;
}

.m-2
{
    margin: 10px !important;
}

.m-3
{
    margin: 20px !important;
}

.m-4
{
    margin: 30px !important;
}

.m-5
{
    margin: 40px !important;
}

.mt-0
{
    margin-top: 0 !important;
}

.mt-1
{
    margin-top: 5px !important;
}

.mt-2
{
    margin-top: 10px !important;
}

.mt-3
{
    margin-top: 20px !important;
}

.mt-4
{
    margin-top: 30px !important;
}

.mt-5
{
    margin-top: 40px !important;
}

.mr-0
{
    margin-right: 0 !important;
}

.mr-1
{
    margin-right: 5px !important;
}

.mr-2
{
    margin-right: 10px !important;
}

.mr-3
{
    margin-right: 20px !important;
}

.mr-4
{
    margin-right: 30px !important;
}

.mr-5
{
    margin-right: 40px !important;
}

.mb-0
{
    margin-bottom: 0 !important;
}

.mb-1
{
    margin-bottom: 5px !important;
}

.mb-2
{
    margin-bottom: 10px !important;
}

.mb-3
{
    margin-bottom: 20px !important;
}

.mb-4
{
    margin-bottom: 30px !important;
}

.mb-5
{
    margin-bottom: 40px !important;
}

.ml-0
{
    margin-left: 0 !important;
}

.ml-1
{
    margin-left: 5px !important;
}

.ml-2
{
    margin-left: 10px !important;
}

.ml-3
{
    margin-left: 20px !important;
}

.ml-4
{
    margin-left: 30px !important;
}

.ml-5
{
    margin-left: 40px !important;
}

.mx-0
{
    margin-right: 0 !important;
    margin-left: 0;
}

.mx-1
{
    margin-right: 5px !important;
    margin-left: 5px !important;
}

.mx-2
{
    margin-right: 10px !important;
    margin-left: 10px !important;
}

.mx-3
{
    margin-right: 20px !important;
    margin-left: 20px !important;
}

.mx-4
{
    margin-right: 30px !important;
    margin-left: 30px !important;
}

.mx-5
{
    margin-right: 40px !important;
    margin-left: 40px !important;
}

.my-0
{
    margin-top: 0;
    margin-bottom: 0 !important;
}

.my-1
{
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.my-2
{
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.my-3
{
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.my-4
{
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.my-5
{
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.p-0
{
    padding: 0 !important;
}

.p-1
{
    padding: 5px !important;
}

.p-2
{
    padding: 10px !important;
}

.p-3
{
    padding: 20px !important;
}

.p-4
{
    padding: 30px !important;
}

.p-5
{
    padding: 40px !important;
}

.pt-0
{
    padding-top: 0 !important;
}

.pt-1
{
    padding-top: 5px !important;
}

.pt-2
{
    padding-top: 10px !important;
}

.pt-3
{
    padding-top: 20px !important;
}

.pt-4
{
    padding-top: 30px !important;
}

.pt-5
{
    padding-top: 40px !important;
}

.pr-0
{
    padding-right: 0 !important;
}

.pr-1
{
    padding-right: 5px !important;
}

.pr-2
{
    padding-right: 10px !important;
}

.pr-3
{
    padding-right: 20px !important;
}

.pr-4
{
    padding-right: 30px !important;
}

.pr-5
{
    padding-right: 40px !important;
}

.pb-0
{
    padding-bottom: 0 !important;
}

.pb-1
{
    padding-bottom: 5px !important;
}

.pb-2
{
    padding-bottom: 10px !important;
}

.pb-3
{
    padding-bottom: 20px !important;
}

.pb-4
{
    padding-bottom: 30px !important;
}

.pb-5
{
    padding-bottom: 40px !important;
}

.pl-0
{
    padding-left: 0 !important;
}

.pl-1
{
    padding-left: 5px !important;
}

.pl-2
{
    padding-left: 10px !important;
}

.pl-3
{
    padding-left: 20px !important;
}

.pl-4
{
    padding-left: 30px !important;
}

.pl-5
{
    padding-left: 40px !important;
}

.px-0
{
    padding-right: 0 !important;
    padding-left: 0;
}

.px-1
{
    padding-right: 5px !important;
    padding-left: 5px !important;
}

.px-2
{
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.px-3
{
    padding-right: 20px !important;
    padding-left: 20px !important;
}

.px-4
{
    padding-right: 30px !important;
    padding-left: 30px !important;
}

.px-5
{
    padding-right: 40px !important;
    padding-left: 40px !important;
}

.py-0
{
    padding-top: 0;
    padding-bottom: 0 !important;
}

.py-1
{
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.py-2
{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.py-3
{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.py-4
{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.py-5
{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* --------------------------------------------------------------------------------
*
*   float
*
-------------------------------------------------------------------------------- */
.fl
{
    float: left;
}

.fr
{
    float: right;
}

.cl
{
    clear: both;
}

.fList > li,
.fList > dt,
.fList > dd,
.fList > .item
{
    float: left;
}

.fList > .item:last-child
{
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.flex > li:last-child,
.flex > dt:last-child,
.flex > dd:last-child,
.flex > .item:last-child
{
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.fBoth > li:first-child
{
    float: left;
}

.fBoth > li:last-child
{
    float: right;
}

.fBoth > dt,
.fBoth > .item:nth-child(1)
{
    float: left;
}

.fBoth > dd,
.fBoth > .item:nth-child(2)
{
    float: right;
}

/* --------------------------------------------------------------------------------
*
*   flex
*
-------------------------------------------------------------------------------- */
.flex
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}

/* --------------------------------------------------------------------------------
*
*   Clearfix
*
-------------------------------------------------------------------------------- */
.cf,
.fList
{
    zoom: 1;
}

.cf:after,
.fList:after,
.fBoth:after
{
    line-height: 0;

    display: block;
    visibility: hidden;
    clear: both;

    height: 0;

    content: '.';
}

/* --------------------------------------------------------------------------------
*
*   TextAlign
*
-------------------------------------------------------------------------------- */
.al
{
    text-align: left;
}

.ar
{
    text-align: right;
}

.ac
{
    text-align: center;
}

.vb
{
    vertical-align: baseline;
}

/* --------------------------------------------------------------------------------
*
*   Nav
*
-------------------------------------------------------------------------------- */
.nav
{
    zoom: 1;
}

.nav:after
{
    line-height: 0;

    display: block;
    visibility: hidden;
    clear: both;

    height: 0;

    content: '.';
}

/* --------------------------------------------------------------------------------
*
*   font
*
-------------------------------------------------------------------------------- */
.captalize
{
    text-transform: capitalize;
}

.uppercase
{
    text-transform: uppercase;
}

.lowercase
{
    text-transform: lowercase;
}

/* --------------------------------------------------------------------------------
*
*   responsive
*
-------------------------------------------------------------------------------- */
img.fitted
{
    width: 100% !important;
    height: auto !important;
}

/* --------------------------------------------------------------------------------
*
*   overflow hidden
*
-------------------------------------------------------------------------------- */
.oh
{
    overflow: hidden;
}

/* --------------------------------------------------------------------------------
*
*   word breadk
*
-------------------------------------------------------------------------------- */
.wb
{
    word-break: break-all;
}

/* --------------------------------------------------------------------------------
*
*   font-weight
*
-------------------------------------------------------------------------------- */
.fwb
{
    font-weight: bold;
}

/* --------------------------------------------------------------------------------
*
*   center
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   row
*
-------------------------------------------------------------------------------- */
.row
{
    font-size: 0;

    text-align: center;
}

.row .item
{
    display: inline-block;
}

.row.row_col2 > .item
{
    width: 50%;
}

.row.row_col3 > .item
{
    width: 33.3333%;
}

.row.row_col4 > .item
{
    width: 25%;
}

.row .item:last-child
{
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* --------------------------------------------------------------------------------
*
*   opacity
*
-------------------------------------------------------------------------------- */
.is-unvisible
{
    opacity: 0 !important;
}

.is-visible
{
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------------
*
*   display
*
-------------------------------------------------------------------------------- */
.is-block
{
    display: block !important;
}

.is-none
{
    display: none !important;
}

/* --------------------------------------------------------------------------------
*
*   overflow
*
-------------------------------------------------------------------------------- */
.is-scroll
{
    overflow: scroll !important;
}

.is-scroll-x
{
    overflow-x: scroll !important;
}

.is-scroll-y
{
    overflow-y: scroll !important;
}

.is-hidden
{
    overflow: hidden !important;
}

.is-hidden-x
{
    overflow-x: hidden !important;
}

.is-hidden-y
{
    overflow-y: hidden !important;
}

/* --------------------------------------------------------------------------------
*
*   position
*
-------------------------------------------------------------------------------- */
.is-fixed
{
    position: fixed !important;
}

.is-absolute
{
    position: absolute !important;
}

.is-relative
{
    position: relative !important;
}

.is-static
{
    position: static !important;
}

/* --------------------------------------------------------------------------------
*
*   // 画像保存禁止    
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   design(見本)
*
-------------------------------------------------------------------------------- */
.sample
{
    position: absolute;
    z-index: 99999;
    top: 0;
    left: 0;

    display: none;

    opacity: .3;
}

body
{
    margin: 0;
    padding: 0;

    border: none;
}

/* image */
img,
div,
p,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
form,
fieldset,
textarea
{
    font-size: 100%;
    font-style: normal;

    margin: 0;
    padding: 0;

    list-style: none;

    text-decoration: none;

    border: 0;
}

a
{
    cursor: pointer;
}

table
{
    font-size: 100%;
}

hr.separator
{
    display: none;
}

input[type='text'],
button,
select,
textarea
{
    resize: none;

    border: none;
    border-radius: 0;
    outline: none;
    background-color: transparent;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

select::-ms-expand
{
    display: none;
}

img
{
    vertical-align: bottom;
}

/* --------------------------------------------------------------------------------
*   parts
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   footer
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   header
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   html,body
*
-------------------------------------------------------------------------------- */
html
{
    font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Meiryo, 'メイリオ', Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;

    letter-spacing: .025em;

    opacity: 1;
    color: #000;
    background-color: #fff;

    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

body
{
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------------
*
*   #wrapper #inner
*
-------------------------------------------------------------------------------- */
#wrapper
{
    height: 100vh;

    background-image: url('/assets/images/bg_l.png'), url('/assets/images/bg_r.png');
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, right top;
}

/* --------------------------------------------------------------------------------
*
*   .wrapper .inner
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   opacity
*
-------------------------------------------------------------------------------- */
@media (min-width: 769px)
{
    .hover_op
    {
        transition: opacity .1s cubic-bezier(.25, .46, .45, .94) 0s;
    }
    .hover_op:hover
    {
        cursor: pointer;

        opacity: .5 !important;
    }
}

@media (min-width: 769px)
{
    .hover_sc
    {
        transition: -webkit-transform .8s cubic-bezier(.19, 1, .22, 1) 0s;
        transition:         transform .8s cubic-bezier(.19, 1, .22, 1) 0s;
        transition:         transform .8s cubic-bezier(.19, 1, .22, 1) 0s, -webkit-transform .8s cubic-bezier(.19, 1, .22, 1) 0s;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    .hover_sc img
    {
        transition: opacity .8s cubic-bezier(.19, 1, .22, 1) 0s;
    }
    .hover_sc:hover
    {
        cursor: pointer;
        -webkit-transform: scale(.96);
            -ms-transform: scale(.96);
                transform: scale(.96);
    }
    .hover_sc:hover img
    {
        opacity: .65 !important;
    }
}

@media (min-width: 769px)
{
    .hover_op_sns svg
    {
        transition: opacity .2s cubic-bezier(.25, .46, .45, .94) 0s, -webkit-transform .2s cubic-bezier(.25, .46, .45, .94) 0s;
        transition: opacity .2s cubic-bezier(.25, .46, .45, .94) 0s, transform .2s cubic-bezier(.25, .46, .45, .94) 0s;
        transition: opacity .2s cubic-bezier(.25, .46, .45, .94) 0s, transform .2s cubic-bezier(.25, .46, .45, .94) 0s, -webkit-transform .2s cubic-bezier(.25, .46, .45, .94) 0s;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    .hover_op_sns:hover svg
    {
        cursor: pointer;
        -webkit-transform: scale(.92);
            -ms-transform: scale(.92);
                transform: scale(.92);

        opacity: .6 !important;

        will-change: all;
    }
}

.showOp
{
    transition: opacity .6s cubic-bezier(.25, .46, .45, .94) 0s;

    opacity: 0;
}

.showOp.is-show
{
    opacity: 1;
}

/* --------------------------------------------------------------------------------
*
*   flash
*
-------------------------------------------------------------------------------- */
.flashD
{
    -webkit-animation: kf_flash .02s 10 normal;
            animation: kf_flash .02s 10 normal;
}

.flashD_g
{
    -webkit-animation: kf_flash_g .01s 13 normal;
            animation: kf_flash_g .01s 13 normal;
}

.flashD_g_main
{
    -webkit-animation: kf_flash_g .02s 13 normal;
            animation: kf_flash_g .02s 13 normal;
}

.flashD_sp
{
    -webkit-animation: kf_flash .02s 5 normal;
            animation: kf_flash .02s 5 normal;
}

.flashD_g_sp
{
    -webkit-animation: kf_flash_g .01s 6 normal;
            animation: kf_flash_g .01s 6 normal;
}

.flashD_g_main_sp
{
    -webkit-animation: kf_flash_g .02s 6 normal;
            animation: kf_flash_g .02s 6 normal;
}

@-webkit-keyframes kf_flash
{
    50%
    {
        opacity: 1.0;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
            filter: alpha(opacity=75);
    }
}

@keyframes kf_flash
{
    50%
    {
        opacity: 1.0;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
            filter: alpha(opacity=75);
    }
}

@-webkit-keyframes kf_flash_g
{
    50%
    {
        opacity: .0;
    }
}

@keyframes kf_flash_g
{
    50%
    {
        opacity: .0;
    }
}

.spantext
{
    white-space: nowrap;
}

.spantext .oh
{
    line-height: 1.3;

    position: relative;

    display: inline-block;
}

.spantext .oh .t
{
    opacity: 0;
}

.spantext .oh .overlay
{
    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
    background-color: black;
}

/* --------------------------------------------------------------------------------
*
*   scale
*
-------------------------------------------------------------------------------- */
.scale
{
    transition: -webkit-transform .35s cubic-bezier(.25, .46, .45, .94) 0s;
    transition:         transform .35s cubic-bezier(.25, .46, .45, .94) 0s;
    transition:         transform .35s cubic-bezier(.25, .46, .45, .94) 0s, -webkit-transform .35s cubic-bezier(.25, .46, .45, .94) 0s;
}

.scale:hover
{
    cursor: pointer;
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

.scale_img
{
    transition: -webkit-transform .3s cubic-bezier(.25, .46, .45, .94) 0s;
    transition:         transform .3s cubic-bezier(.25, .46, .45, .94) 0s;
    transition:         transform .3s cubic-bezier(.25, .46, .45, .94) 0s, -webkit-transform .3s cubic-bezier(.25, .46, .45, .94) 0s;
}

.scale_img:hover
{
    cursor: pointer;
    -webkit-transform: scale(1.15);
        -ms-transform: scale(1.15);
            transform: scale(1.15);
}

/* --------------------------------------------------------------------------------
*
*   color
*
-------------------------------------------------------------------------------- */
.hColor
{
    transition: color .3s cubic-bezier(.25, .46, .45, .94) 0s;
}

.hColor:hover
{
    cursor: pointer;

    color: #f63e69 !important;
}

.hBgColor
{
    transition: background-color .3s cubic-bezier(.25, .46, .45, .94) 0s;
}

.hBgColor:hover
{
    cursor: pointer;

    background-color: #f63e69 !important;
}

/*
*
*   cursor
*
*/
.cp
{
    cursor: pointer;
}

/* --------------------------------------------------------------------------------
*
*   shadow
*
-------------------------------------------------------------------------------- */
.hover_boxShadow
{
    transition: all .2s cubic-bezier(.25, .46, .45, .94) 0s;
}

.hover_boxShadow:hover
{
    cursor: pointer;

    opacity: .7;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2) !important;
}

/* --------------------------------------------------------------------------------
*
*   filte flash
*
-------------------------------------------------------------------------------- */
.wFlash
{
    cursor: pointer;
}

.wFlash:hover
{
    -webkit-animation: bF .8s cubic-bezier(.25, .46, .45, .94) 0s 1 normal;
            animation: bF .8s cubic-bezier(.25, .46, .45, .94) 0s 1 normal;
}

@-webkit-keyframes bF
{
    0%
    {
        background: white;
    }
    100%
    {
        background: rgba(255, 255, 255, 0);
    }
}

@keyframes bF
{
    0%
    {
        background: white;
    }
    100%
    {
        background: rgba(255, 255, 255, 0);
    }
}

.flash:hover
{
    -webkit-animation: kf_flash .05s infinite;
            animation: kf_flash .05s infinite;
}

.translate
{
    transition: -webkit-transform 1.2s cubic-bezier(.165, .84, .44, 1) 0s;
    transition:         transform 1.2s cubic-bezier(.165, .84, .44, 1) 0s;
    transition:         transform 1.2s cubic-bezier(.165, .84, .44, 1) 0s, -webkit-transform 1.2s cubic-bezier(.165, .84, .44, 1) 0s;
}

/* --------------------------------------------------------------------------------
*
*   pulse
*
-------------------------------------------------------------------------------- */
.pulse
{
    border-radius: 50%;
}

.pulse:hover
{
    -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
    -webkit-animation-delay: .3;
            animation-delay: .3;
}

@-webkit-keyframes pulse
{
    0%
    {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
    }
    70%
    {
        -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
    100%
    {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes pulse
{
    0%
    {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
    }
    70%
    {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
    100%
    {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* --------------------------------------------------------------------------------
*
*   section
*
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
*
*   bar
*
-------------------------------------------------------------------------------- */
.left_bar:after
{
    position: absolute;
    top: -.6rem;
    left: 0;

    display: block;

    width: .7rem;
    height: 3.5rem;

    content: '';

    background-color: #000;
}

.up_bar:before
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1rem;

    content: '';
    transition: height .18s cubic-bezier(.215, .61, .355, 1), background-color .2s cubic-bezier(.25, .46, .45, .94);

    background-color: #000;
}

/* --------------------------------------------------------------------------------
*
*   select
*
-------------------------------------------------------------------------------- */
body.no-select
{
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

         -o-user-select: none;
}

/* --------------------------------------------------------------------------------
*
*   grab
*
-------------------------------------------------------------------------------- */
.grab
{
    cursor: -ms-grab;
    cursor:     grab;
}

.grabbing
{
    cursor: -ms-grabbing;
    cursor:     grabbing;
}

/* --------------------------------------------------------------------------------
*
*   loading
*
-------------------------------------------------------------------------------- */
#loading
{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    overflow: hidden;

    width: calc(100% - 42% * 2);
    height: 100vh;
    margin: 0 42%;
}

@media (max-width: 768px)
{
    #loading
    {
        width: calc(100% - 40% * 2);
        margin: 0 40%;
    }
}

#loading .loadingBar
{
    position: absolute;
    top: 50%;
    left: 0;

    height: 1px;
    margin-top: -1px;

    background-color: #fff;
}

#loading .loadingPercent
{
    font-size: 12px;

    position: absolute;
    top: calc(50% + 20px);
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    color: #fff;
}

#loading .ballWrap
{
    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: calc(-40px + -10px);
    margin-left: -40px;
}

#loading .ballWrap .ball
{
    width: 80px;
    height: auto;
}

@media (max-width: 768px)
{
    .isIOSSafari #loading .loadingBar
    {
        margin-top: -40px;
    }
    .isIOSSafari #loading .loadingPercent
    {
        margin-top: -40px;
    }
}

.id_top #loading
{
    display: block;
}

/* --------------------------------------------------------------------------------
*
*   media query module
*
-------------------------------------------------------------------------------- */
@media only screen and (max-width: 768px)
{
    br.sp
    {
        display: inline-block;
    }
    br.pc
    {
        display: none;
    }
    .display.sp
    {
        display: inline-block;
    }
    .display.pc
    {
        display: none;
    }
    /*
  *
  *   display flex
  *
  */
    .sp-order-1
    {
        -webkit-order: 1;
        -ms-flex-order: 1;
                order: 1;
    }
    .sp-order-2
    {
        -webkit-order: 2;
        -ms-flex-order: 2;
                order: 2;
    }
    .sp-order-3
    {
        -webkit-order: 3;
        -ms-flex-order: 3;
                order: 3;
    }
    .sp-order-4
    {
        -webkit-order: 4;
        -ms-flex-order: 4;
                order: 4;
    }
    .sp-order-5
    {
        -webkit-order: 5;
        -ms-flex-order: 5;
                order: 5;
    }
    .sp-order-6
    {
        -webkit-order: 6;
        -ms-flex-order: 6;
                order: 6;
    }
    .sp-order-7
    {
        -webkit-order: 7;
        -ms-flex-order: 7;
                order: 7;
    }
    .sp-order-8
    {
        -webkit-order: 8;
        -ms-flex-order: 8;
                order: 8;
    }
    .sp-order-9
    {
        -webkit-order: 9;
        -ms-flex-order: 9;
                order: 9;
    }
}

@media only screen and (min-width: 769px)
{
    br.pc
    {
        display: inline-block;
    }
    br.sp
    {
        display: none;
    }
    .display.pc
    {
        display: inline-block;
    }
    .display.sp
    {
        display: none;
    }
    /*
  *
  *   display flex
  *
  */
    .pc-order-1
    {
        -webkit-order: 1;
        -ms-flex-order: 1;
                order: 1;
    }
    .pc-order-2
    {
        -webkit-order: 2;
        -ms-flex-order: 2;
                order: 2;
    }
    .pc-order-3
    {
        -webkit-order: 3;
        -ms-flex-order: 3;
                order: 3;
    }
    .pc-order-4
    {
        -webkit-order: 4;
        -ms-flex-order: 4;
                order: 4;
    }
    .pc-order-5
    {
        -webkit-order: 5;
        -ms-flex-order: 5;
                order: 5;
    }
    .pc-order-6
    {
        -webkit-order: 6;
        -ms-flex-order: 6;
                order: 6;
    }
    .pc-order-7
    {
        -webkit-order: 7;
        -ms-flex-order: 7;
                order: 7;
    }
    .pc-order-8
    {
        -webkit-order: 8;
        -ms-flex-order: 8;
                order: 8;
    }
    .pc-order-9
    {
        -webkit-order: 9;
        -ms-flex-order: 9;
                order: 9;
    }
}

/* --------------------------------------------------------------------------------
*
*   link
*
-------------------------------------------------------------------------------- */
a
{
    text-decoration: none;

    color: #000;
}

a:hover
{
    text-decoration: none;

    color: #000;
}

a:visited
{
    text-decoration: none;

    color: #000;
}

a:active
{
    text-decoration: none;

    color: #000;
}

/* --------------------------------------------------------------------------------
*
*   box-shadow
*
-------------------------------------------------------------------------------- */
.box-shadow
{
    box-shadow: 4px 2px 10px 1px #ccc inset;
}

/* --------------------------------------------------------------------------------
*
*   text-shadow
*
-------------------------------------------------------------------------------- */
.text-shadow
{
    text-shadow: 5px 5px 2px #ccc;
}

/* --------------------------------------------------------------------------------
*
*   color
*
-------------------------------------------------------------------------------- */
.highlight
{
    color: #ff405e;
}

.error
{
    color: #e83434;
}

.error
{
    position: absolute;
    bottom: 5.1rem;
    left: 50%;

    width: 100%;

    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

.underline
{
    text-decoration: underline;
}

/* --------------------------------------------------------------------------------
*   page
-------------------------------------------------------------------------------- */
#wrapper.id_login
{
    /* --------------------------------------------------------------------------------
*
*   section01
*
-------------------------------------------------------------------------------- */
}

#wrapper.id_login .f10
{
    font-size: 1.0rem !important;
}

#wrapper.id_login .f11
{
    font-size: 1.1rem !important;
}

#wrapper.id_login .f12
{
    font-size: 1.2rem !important;
}

#wrapper.id_login .f13
{
    font-size: 1.3rem !important;
}

#wrapper.id_login .f14
{
    font-size: 1.4rem !important;
}

#wrapper.id_login .f15
{
    font-size: 1.5rem !important;
}

#wrapper.id_login .f16
{
    font-size: 1.6rem !important;
}

#wrapper.id_login .f17
{
    font-size: 1.7rem !important;
}

#wrapper.id_login .f18
{
    font-size: 1.8rem !important;
}

#wrapper.id_login .f19
{
    font-size: 1.9rem !important;
}

#wrapper.id_login .f20
{
    font-size: 2.0rem !important;
}

#wrapper.id_login .f21
{
    font-size: 2.1rem !important;
}

#wrapper.id_login .f22
{
    font-size: 2.2rem !important;
}

#wrapper.id_login .f23
{
    font-size: 2.3rem !important;
}

#wrapper.id_login .f24
{
    font-size: 2.4rem !important;
}

#wrapper.id_login .f25
{
    font-size: 2.5rem !important;
}

#wrapper.id_login .f26
{
    font-size: 2.6rem !important;
}

#wrapper.id_login .f27
{
    font-size: 2.7rem !important;
}

#wrapper.id_login .f28
{
    font-size: 2.8rem !important;
}

#wrapper.id_login .f29
{
    font-size: 2.9rem !important;
}

#wrapper.id_login .f30
{
    font-size: 3.0rem !important;
}

#wrapper.id_login .f31
{
    font-size: 3.1rem !important;
}

#wrapper.id_login .f32
{
    font-size: 3.2rem !important;
}

#wrapper.id_login .f33
{
    font-size: 3.3rem !important;
}

#wrapper.id_login .f34
{
    font-size: 3.4rem !important;
}

#wrapper.id_login .f35
{
    font-size: 3.5rem !important;
}

#wrapper.id_login .f36
{
    font-size: 3.6rem !important;
}

#wrapper.id_login .text-primary
{
    color: #00af98;
}

#wrapper.id_login .text-note
{
    color: #808c98;
}

#wrapper.id_login .text-error
{
    color: #e00e28;
}

#wrapper.id_login .section
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    height: 100vh;
    padding: 0 20px;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}

#wrapper.id_login .section .login-panel
{
    box-sizing: border-box;
    width: 100%;
    max-width: 500px;
    padding: 50px;

    border: solid 1px #dde2e5;
    border-radius: 10px;
}

#wrapper.id_login .section .logo
{
    margin-bottom: 40px;
}

#wrapper.id_login .section .title
{
    font-size: 1.9rem;
    font-weight: bold;

    margin-bottom: 30px;
}

#wrapper.id_login .section .item
{
    margin-bottom: 20px;
}

#wrapper.id_login .section .input-text
{
    font-size: 1.5rem;

    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding-left: 40px;

    border: solid 1px #f5f6f7;
    border-radius: 6px;
    background-color: #f5f6f7;
    background-repeat: no-repeat;
}

#wrapper.id_login .section .input-text:focus
{
    border: solid 1px #4eaa9e;
    border-radius: 6px;
    outline: none;
    background-color: #fff;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .06);
}

#wrapper.id_login .section .input-text.is-user
{
    background-image: url('/assets/images/icon_user.svg');
    background-position: 15px center;
}

#wrapper.id_login .section .input-text.is-password
{
    background-image: url('/assets/images/icon_password.svg');
    background-position: 15px center;
}

#wrapper.id_login .section .input-text.is-error
{
    border: solid 1px #e00e28;
    background-color: #fff;
}

#wrapper.id_login .section .btn-area
{
    margin-top: 30px;
}

#wrapper.id_login .section a.btn,
#wrapper.id_login .section .btn
{
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 50px;

    display: block;

    box-sizing: border-box;
    width: 100%;
    height: 50px;

    cursor: pointer;
    text-align: center;
}

#wrapper.id_login .section a.btn-primary,
#wrapper.id_login .section .btn-primary
{
    color: #fff;
    border-radius: 25px;
    background: #00af98;
    background-image: linear-gradient(90deg, #04cfd9 0%, #009b86 99%);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15);
}

#wrapper.id_login .section .btn-area-text
{
    font-size: 1.4rem;

    margin-top: 15px;

    text-align: center;
}

#wrapper.id_login .section .link
{
    color: #00af98;
}

#wrapper.id_login .section .box-gray
{
    padding: 30px 10px;

    border-radius: 6px;
    background-color: #f5f6f7;
}

#wrapper.id_login .section .error-balloon
{
    font-size: 1.4rem;

    position: relative;

    padding: 15px;

    color: #e00e28;
    border-radius: 6px;
    background-color: #fbe6e9;
}

#wrapper.id_login .section .error-balloon::after
{
    position: absolute;
    bottom: -17px;
    left: 55px;

    display: block;

    box-sizing: border-box;
    width: 10px;
    height: 10px;

    content: '';

    border: 10px solid transparent;
    border-top: 8px solid #fbe6e9;
}