@charset 'UTF-8';
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html
{
    font-family: sans-serif;
    /* 1 */

        -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/**
 * Remove default margin.
 */
body
{
    margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary
{
    display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video
{
    display: inline-block;
    /* 1 */

    vertical-align: baseline;
    /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls])
{
    display: none;

    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template
{
    display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a
{
    background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover
{
    outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title]
{
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong
{
    font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn
{
    font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1
{
    font-size: 2em;

    margin: .67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark
{
    color: #000; 
    background: #ff0;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small
{
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup
{
    font-size: 75%;
    line-height: 0;

    position: relative;

    vertical-align: baseline;
}

sup
{
    top: -.5em;
}

sub
{
    bottom: -.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img
{
    border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root)
{
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure
{
    margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr
{
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre
{
    overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp
{
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea
{
    /* 1 */
    font: inherit;
    /* 2 */

    margin: 0;

    color: inherit;
    /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button
{
    overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select
{
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type='button'],
input[type='reset'],
input[type='submit']
{
    /* 2 */
    cursor: pointer;

    -webkit-appearance: button;
    /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled]
{
    cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner
{
    padding: 0; 

    border: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input
{
    line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type='checkbox'],
input[type='radio']
{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button
{
    height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type='search']
{
    /* 1 */
    -webkit-box-sizing: content-box;
            box-sizing: content-box;

    -webkit-appearance: textfield;
    /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration
{
    -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset
{
    margin: 0 2px;
    padding: .35em .625em .75em; 

    border: 1px solid #c0c0c0;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend
{
    /* 1 */
    padding: 0;

    border: 0;
    /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea
{
    overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup
{
    font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table
{
    border-spacing: 0; 
    border-collapse: collapse;
}

td,
th
{
    padding: 0;
}

/*! minimum_reset.css v0.0.1 */
h1,
h2,
h3,
h4,
h5,
h6
{
    font-size: 100%;
    font-weight: normal; 

    margin: 0;
}

ul,
ol
{
    margin: 0;
    padding: 0;

    list-style: none;
}

ul li,
ol li
{
    margin: 0;
    padding: 0;

    list-style: none;
}

dl,
dt,
dd
{
    margin: 0;
    padding: 0;
}

p
{
    margin: 0;
}

address
{
    font-style: normal;
}

img
{
    vertical-align: bottom;
}

*,
*:before,
*:after
{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.w1p
{
    width: 10% !important;
}

.w2p
{
    width: 20% !important;
}

.w3p
{
    width: 30% !important;
}

.w4p
{
    width: 40% !important;
}

.w5p
{
    width: 50% !important;
}

.w6p
{
    width: 60% !important;
}

.w7p
{
    width: 70% !important;
}

.w8p
{
    width: 80% !important;
}

.w9p
{
    width: 90% !important;
}

.w10p
{
    width: 100% !important;
}

.mats
{
    margin-top: 20px;
}

.matm
{
    margin-top: 40px;
}

.matl
{
    margin-top: 60px;
}

.fw
{
    font-weight: bold !important;
}

.cred
{
    color: #c00 !important;
}

@media screen and (min-width: 769px), print
{
    .hide-pc
    {
        display: none;
    }
}

@media screen and (min-width: 0) and (max-width: 768px)
{
    .hide-sp
    {
        display: none;
    }
}

html
{
    /*
	background-color: $defaultBgColor;
	background-image: url(../images/mainbg_sp.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-attachment: fixed;
	*/
    font-family: 'Hiragino Maru Gothic W4 JIS2004', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 500; 

    color: #fffefe;
}
@media screen and (min-width: 769px), print
{
    html
    {
        font-size: 10px;
        /*
		background-image: url(../images/mainbg_pc.jpg);
		background-attachment: fixed;
		*/
    }
}

body
{
    line-height: 1.65;
}

.body-bg
{
    position: fixed;
    z-index: -1; 
    top: 0;
    right: 0;
    left: 0;

    display: block;

    height: 100%;
    padding-bottom: 108px;

    content: '';

    background: url(../images/bg_main_sp.jpg) no-repeat left top;
    background-size: 100% auto;
}
@media screen and (min-width: 769px), print
{
    .body-bg
    {
        background: url(../images/bg_main_pc.jpg) no-repeat right top;
        background-size: cover;
    }
}

/* link style */
a:link
{
    text-decoration: underline; 

    color: #fffefe;
}

a:visited
{
    text-decoration: none; 

    color: #fffefe;
}

a:hover,
a:active
{
    text-decoration: none; 

    color: #fffefe;
}

img
{
    max-width: 100%;
}

@media screen and (min-width: 769px), print
{
    .view-sp
    {
        display: none;
    }
}

.view-pc
{
    display: none;
}
@media screen and (min-width: 769px), print
{
    .view-pc
    {
        display: block;
    }
}

.m-box-hover
{
    position: relative;

    display: block;

    width: 100%;
}
.m-box-hover .hover-before
{
    opacity: 1;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
}
.m-box-hover .hover-after
{
    display: none;
}
@media screen and (min-width: 769px), print
{
    .m-box-hover .hover-after
    {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        display: block;

        margin: auto; 

        opacity: 0;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    }
}
@media screen and (min-width: 769px), print
{
    .m-box-hover .hover-punch
    {
        -webkit-transition: opacity .3s ease-in-out;
                transition: opacity .3s ease-in-out;
    }
}
@media screen and (min-width: 769px), print
{
    .m-box-hover:hover .hover-after
    {
        opacity: 1;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
    }
}
@media screen and (min-width: 769px), print
{
    .m-box-hover:hover .hover-punch
    {
        -webkit-animation: flash .15s ease-out;
                animation: flash .15s ease-out;
    }
}

@-webkit-keyframes flash
{
    0%
    {
        -webkit-transform: scale(1);
                transform: scale(1); 

        opacity: .1;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=10)';
    }
    50%
    {
        -webkit-transform: scale(.95);
                transform: scale(.95); 

        opacity: .4;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
    }
    100%
    {
        -webkit-transform: scale(1);
                transform: scale(1); 

        opacity: 1;

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

@keyframes flash
{
    0%
    {
        -webkit-transform: scale(1);
                transform: scale(1); 

        opacity: .1;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=10)';
    }
    50%
    {
        -webkit-transform: scale(.95);
                transform: scale(.95); 

        opacity: .4;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
    }
    100%
    {
        -webkit-transform: scale(1);
                transform: scale(1); 

        opacity: 1;

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

.m-box-punch
{
    position: relative;

    display: block;

    width: 100%;
}
@media screen and (min-width: 769px), print
{
    .m-box-punch
    {
        border: solid 1px #fff;
        border-radius: 8px;
    }
}
.m-box-punch .hover-before
{
    opacity: 1;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
}
.m-box-punch .hover-after
{
    display: none;
}
@media screen and (min-width: 769px), print
{
    .m-box-punch .hover-after
    {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        display: block;

        margin: auto; 

        opacity: 0;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    }
}
@media screen and (min-width: 769px), print
{
    .m-box-punch .hover-punch
    {
        -webkit-transition: opacity .3s ease-in-out;
                transition: opacity .3s ease-in-out;
    }
}
@media screen and (min-width: 769px), print
{
    .m-box-punch:hover .hover-after
    {
        opacity: 1;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
    }
}
@media screen and (min-width: 769px), print
{
    .m-box-punch:hover .hover-punch
    {
        -webkit-animation: flash .15s ease-out;
                animation: flash .15s ease-out;
    }
}

@keyframes flash
{
    0%
    {
        -webkit-transform: scale(1);
                transform: scale(1); 

        opacity: .1;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=10)';
    }
    50%
    {
        -webkit-transform: scale(.7);
                transform: scale(.7); 

        opacity: .4;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)';
    }
    100%
    {
        -webkit-transform: scale(1);
                transform: scale(1); 

        opacity: 1;

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

#l-wrap
{
    position: relative; 

    width: auto;
}
@media screen and (min-width: 769px), print
{
    #l-wrap
    {
        margin: 0 auto;
        padding: 0 0;
    }
}

.m-box-fixed
{
    width: 288px;
    margin: 0 auto;
}
@media screen and (min-width: 769px), print
{
    .m-box-fixed
    {
        width: 960px;
        margin: 0 auto;
    }
}

@media screen and (min-width: 769px), print
{
    .container
    {
        min-width: 960px; 
        margin: 0 auto;
    }
}

.logo-area
{
    position: relative;

    overflow: hidden; 

    margin-top: -14px;

    text-align: center;

    background-size: 51px 29px;
}
@media screen and (min-width: 769px), print
{
    .logo-area
    {
        height: 600px;
    }
}
.logo-area .logo-grandsummoners
{
    width: 100%;
    margin: 0 auto;
}
@media screen and (min-width: 769px), print
{
    .logo-area .logo-grandsummoners
    {
        position: absolute;
        top: 50px;
        right: 0;
        left: 0;

        width: auto; 
        margin: auto;
    }
}
.logo-area .logo-grandsummoners img
{
    width: 100%;
}
@media screen and (min-width: 769px), print
{
    .logo-area .logo-grandsummoners img
    {
        width: auto;
    }
}
.logo-area .area-l
{
    position: absolute;
    top: -76px;
    right: calc(50% + 104px);

    max-width: none; 
    margin: auto;
}
.logo-area .area-l img
{
    max-width: none;
}
.logo-area .area-r
{
    position: absolute;
    top: -119px;
    left: calc(50% + 130px);

    margin: auto;
}
.logo-area .area-r img
{
    max-width: none;
}

.comingsoon
{
    margin-top: 25px;

    text-align: center;
}
@media screen and (min-width: 769px), print
{
    .comingsoon
    {
        margin-top: 20px;
    }
}
.comingsoon img
{
    width: 298px;
}
@media screen and (min-width: 769px), print
{
    .comingsoon img
    {
        width: 940px;
    }
}

.cmp-box
{
    width: 288px;
    margin: 10px auto 0;

    background-color: rgba(0, 0, 0, .75);
}
@media screen and (min-width: 769px), print
{
    .cmp-box
    {
        width: 960px;
        margin-top: 0;
    }
}
.cmp-box .box-inner
{
    position: relative;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    border: 10px solid #000;
    background: url(../images/bg_campaing_flame_top_sp.png) left top no-repeat, url(../images/bg_campaing_flame_bottom_sp.png) left bottom no-repeat, url(../images/bg_campaing_flame_side_sp.png) center top repeat-y, url(../images/bg_campaing_picture_sp.png) 10% 44% no-repeat;
    background-size: 100%, 100%, 100%, 100%;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .box-inner
    {
        background: url(../images/bg_campaing_flame_front.png) left top no-repeat, url(../images/bg_campaing_picture_pc.png) 29px 93px no-repeat, url(../images/bg_campaing_flame_top.png) left top no-repeat;
        background-size: 940px ,499px ,940px;
    }
}
.cmp-box .cmp-area
{
    width: 249px;
    margin: auto;
    padding: 25px 0;

    *zoom: 1;
}
.cmp-box .cmp-area:after
{
    display: table;
    clear: both; 

    content: ' ';
}
@media screen and (min-width: 769px), print
{
    .cmp-box .cmp-area
    {
        width: auto;
        max-height: 490px; 
        padding: 50px 50px 60px;
    }
}
.cmp-box .cmp-area h1
{
    text-align: center;
}
.cmp-box .cmp-area h1 img
{
    margin: 0 auto;
}
.cmp-box .cmp-area .cmp-txt
{
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;

    margin-top: 10px;

    -webkit-transform: skewX(-10deg);
        -ms-transform: skewX(-10deg);
            transform: skewX(-10deg);
    text-align: center;
    letter-spacing: 2px;
    letter-spacing: .1em;

    text-shadow: 0 0 10px #000,0 0 10px #000,0 0 10px #000,0 0 10px #000;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .cmp-area .cmp-txt
    {
        font-size: 180%;
        line-height: 1.65; 

        margin-top: 10px;
    }
}
.cmp-box .cmp-area .cmp-txt span
{
    color: #ffd400;
}
.cmp-box .cmp-area .cmp-txt img
{
    margin: 0 auto;
}
.cmp-box .cmp-area .cmp-count
{
    margin-top: 40px;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .cmp-area .cmp-count
    {
        width: auto;
        margin: 20px auto 0;

        *zoom: 1;
    }
    .cmp-box .cmp-area .cmp-count:after
    {
        display: table;
        clear: both; 

        content: ' ';
    }
}
.cmp-box .cmp-area .cmp-count .left-txt
{
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;

    -webkit-transform: skewX(-10deg);
        -ms-transform: skewX(-10deg);
            transform: skewX(-10deg);
    text-align: center;
    letter-spacing: .04em;

    color: #fff;
    text-shadow: 0 0 10px #000,0 0 10px #000,0 0 10px #000,0 0 10px #000;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .cmp-area .cmp-count .left-txt
    {
        font-size: 2.4rem;
    }
}
.cmp-box .cmp-area .cmp-count .left-txt span
{
    font-size: 18px;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .cmp-area .cmp-count .left-txt span
    {
        font-size: 24px;
    }
}
.cmp-box .cmp-area .cmp-count .left-total
{
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 600;
    font-weight: bold;
    line-height: 1.2;

    margin-top: -10px;

    -webkit-transform: skewX(-10deg);
        -ms-transform: skewX(-10deg);
            transform: skewX(-10deg);
    text-align: center;

    color: #fff;
    text-shadow: 0 0 10px #000,0 0 10px #000,0 0 10px #000,0 0 10px #000;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .cmp-area .cmp-count .left-total
    {
        font-size: 250%;
        line-height: .6;

        margin-top: 10px;
    }
}
.cmp-box .cmp-area .cmp-count .left-total span
{
    font-size: 60px;
    font-size: 6.0rem;
    font-weight: 600; 

    color: #ffd400;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .cmp-area .cmp-count .left-total span
    {
        font-size: 8.0rem;

        margin: 0 5px 0; 

        letter-spacing: -.03em;
    }
}
@media screen and (min-width: 769px), print
{
    .cmp-box .count-left
    {
        float: left; 

        width: 350px;
        margin: 40px 0 0 70px;
    }
}
.cmp-box .count-right
{
    padding-top: 35px; 

    background: url(../images/bg_cmp_arrow.png) top center no-repeat;
    background-size: 38px 28px;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .count-right
    {
        position: relative; 

        float: right;

        width: 340px;
        margin: 0 20px 0 0;
        padding: 0;

        background: none;
    }
}
@media screen and (min-width: 769px), print
{
    .cmp-box .count-right:before
    {
        position: absolute;
        top: 60px;
        left: -70px; 

        display: block;

        width: 56px;
        height: 76px;

        content: '';

        background: url(../images/bg_cmp_arrow_pc.png) no-repeat;
    }
}
.cmp-box .count-right .right-txt
{
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;

    display: block !important;

    -webkit-transform: skewX(-10deg);
        -ms-transform: skewX(-10deg);
            transform: skewX(-10deg);
    text-align: center;

    color: #fff;
    text-shadow: 0 0 10px #000,0 0 10px #000,0 0 10px #000,0 0 10px #000;
}
.cmp-box .count-right .right-txt.txt-end
{
    font-size: 1.5em;
    line-height: 1.4; 

    margin: 5px;

    color: #cde108;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .count-right .right-txt.txt-end
    {
        font-size: 1.65em; 

        margin: -5px 5px 0;
    }
}
.cmp-box .count-right .right-txt.txt-end span
{
    display: block;

    margin-top: 10px;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .count-right .right-txt
    {
        font-size: 1.6rem;
    }
}
.cmp-box .count-right .right-txt .next-count
{
    font-size: 30px;
    font-size: 3.0rem;
    font-weight: 600;
    line-height: 1.2; 

    margin: 10px 3px 0;

    letter-spacing: .05em;

    color: #ffd400;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .count-right .right-txt .next-count
    {
        font-size: 4.0rem; 
        line-height: 1.2;
    }
}
.cmp-box .count-right .right-txt .next-present
{
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1; 

    margin-right: 3px;

    letter-spacing: .05em;

    color: #009ef3;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .count-right .right-txt .next-present
    {
        font-size: 2.4rem;
    }
}
.cmp-box .count-right .right-btn
{
    margin-top: 10px; 

    text-align: center;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .count-right .right-btn
    {
        height: auto;
        margin-top: 5px;
    }
}
.cmp-box .count-right .right-btn a
{
    position: relative;

    display: block;

    width: 80%; 
    margin: 0 auto;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .count-right .right-btn a
    {
        width: 274px; 
        margin: 0 auto;
    }
}
.cmp-box .count-right .right-btn a .btn-hover
{
    display: none;
}
@media screen and (min-width: 769px), print
{
    .cmp-box .count-right .right-btn a .btn-hover
    {
        position: absolute;
        top: 0;

        display: block;

        opacity: 0;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    }
    .cmp-box .count-right .right-btn a:hover .btn-hover
    {
        opacity: 1;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
    }
    .cmp-box .count-right .right-btn a:hover .btn-def
    {
        opacity: 0;

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

.info-area
{
    width: 288px;
    height: auto;
    margin: 20px auto 0; 

    *zoom: 1;
}
.info-area:after
{
    display: table;
    clear: both; 

    content: ' ';
}
@media screen and (min-width: 769px), print
{
    .info-area
    {
        width: auto; 
        margin: 50px 30px 30px 30px;
    }
}
.info-area .info-txt
{
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;

    margin: 20px 10px 20px; 

    text-align: center;
}
@media screen and (min-width: 769px), print
{
    .info-area .info-txt
    {
        width: 418px;
        margin: 40px auto 0;
    }
}
.info-area .info-txt > span
{
    font-size: 16px;
    font-size: 1.6rem;
}
@media screen and (min-width: 769px), print
{
    .info-area .info-txt > span
    {
        font-size: 2.0rem;
    }
}
.info-area .leftside
{
    position: relative; 

    height: auto;

    -webkit-box-shadow: 0 0 7px 7px rgba(0, 0, 0, .5);
            box-shadow: 0 0 7px 7px rgba(0, 0, 0, .5);
}
@media screen and (min-width: 769px), print
{
    .info-area .leftside
    {
        width: 550px;
        margin: 20px auto 0 auto;
    }
}
.info-area .leftside a
{
    display: block;
}
@media screen and (min-width: 769px), print
{
    .info-area .leftside a:after
    {
        position: absolute;
        top: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 100%;

        content: '';

        opacity: 0;
        background-color: #fff;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    }
}
@media screen and (min-width: 769px), print
{
    .info-area .leftside a:hover:after
    {
        opacity: .1;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=10)';
    }
}
.info-area .rightside
{
    height: auto;
    margin-top: 10px;
}
@media screen and (min-width: 769px), print
{
    .info-area .rightside
    {
        margin-top: 30px;
    }
}
.info-area .rightside h3
{
    margin-top: 20px;

    text-align: center;
}
@media screen and (min-width: 769px), print
{
    .info-area .rightside h3
    {
        margin-top: 30px;
    }
}
@media screen and (min-width: 769px), print
{
    .info-area .rightside h3 img
    {
        width: 450px;
    }
}
.info-area .rightside ul
{
    overflow: hidden;

    width: auto;
    height: auto;

    text-align: center;
}
.info-area .rightside ul li
{
    display: inline-block; 

    margin: 10px 0 0 0;
}
@media screen and (min-width: 769px), print
{
    .info-area .rightside ul li
    {
        margin: 30px 0 0 0;
    }
}
.info-area .rightside ul li a
{
    position: relative;

    display: inline-block;
}
@media screen and (min-width: 769px), print
{
    .info-area .rightside ul li a
    {
        width: 296px;
    }
}

.bnr-area
{
    margin-top: 20px;
}
@media screen and (min-width: 769px), print
{
    .bnr-area
    {
        margin: 50px 0 0 0;
    }
}
@media screen and (min-width: 769px), print
{
    .bnr-area .bnr-site
    {
        width: 345px;
        margin: 0 auto 50px;
    }
}
.bnr-area .bnr-site .btn-hover
{
    display: none;
}
.bnr-area .bnr-get
{
    margin-top: 20px;

    -webkit-box-shadow: 0 0 7px 7px rgba(0, 0, 0, .5);
            box-shadow: 0 0 7px 7px rgba(0, 0, 0, .5);
}
@media screen and (min-width: 769px), print
{
    .bnr-area .bnr-get
    {
        width: 576px;
        height: auto;
        margin: 0 auto 50px;
    }
}
.bnr-area .bnr-text
{
    margin-top: 10px;

    text-align: center;
}
@media screen and (min-width: 769px), print
{
    .bnr-area .bnr-text
    {
        margin-top: -30px;
    }
}
.bnr-area .bnr-text img
{
    width: 450px;
}

.sns-area
{
    margin-top: 20px;
}
@media screen and (min-width: 769px), print
{
    .sns-area
    {
        width: 576px;
        margin: 50px auto;

        *zoom: 1;
    }
    .sns-area:after
    {
        display: table;
        clear: both; 

        content: ' ';
    }
}
.sns-area .share-area
{
    position: relative;

    width: auto;
    margin: 0 auto;
    padding-right: 10px;

    text-align: center; 

    *zoom: 1;
}
.sns-area .share-area:after
{
    display: table;
    clear: both; 

    content: ' ';
}
@media screen and (min-width: 769px), print
{
    .sns-area .share-area
    {
        float: left;

        width: 265px;
        margin-top: 5px;
    }
}
.sns-area .share-area:before
{
    display: none;
}
@media screen and (min-width: 769px), print
{
    .sns-area .share-area:before
    {
        position: absolute;
        top: 50%;
        right: 112px;
        left: 138px;
        left: 133px;

        display: block;

        height: 1px;

        content: '';

        background: #fff;
    }
}
.sns-area .share-area .share-ttl
{
    display: inline-block;
}
@media screen and (min-width: 769px), print
{
    .sns-area .share-area .share-ttl
    {
        float: left;

        margin-top: 8px;
        padding-bottom: 0;
    }
}
.sns-area .share-area .share-ttl img
{
    display: block; 

    height: 26.5px;
}
@media screen and (min-width: 769px), print
{
    .sns-area .share-area .share-ttl img
    {
        width: 101px;
    }
}
.sns-area .share-area ul
{
    display: inline-block;

    margin-left: 12px;
}
@media screen and (min-width: 769px), print
{
    .sns-area .share-area ul
    {
        float: right;

        margin-left: 0;

        *zoom: 1;
    }
    .sns-area .share-area ul:after
    {
        display: table;
        clear: both; 

        content: ' ';
    }
}
.sns-area .share-area ul li
{
    float: left;
    overflow: hidden; 

    margin-left: -8px;

    -webkit-transform: skewX(-15deg);
        -ms-transform: skewX(-15deg);
            transform: skewX(-15deg);
}
@media screen and (min-width: 769px), print
{
    .sns-area .share-area ul li
    {
        float: left;

        width: 50px; 
        margin-left: 0;

        text-align: center;
    }
}
.sns-area .share-area ul li img
{
    height: 37px;

    -webkit-transform: skewX(15deg) scaleX(1.1);
        -ms-transform: skewX(15deg) scaleX(1.1);
            transform: skewX(15deg) scaleX(1.1);
}
@media screen and (min-width: 769px), print
{
    .sns-area .share-area ul li img
    {
        height: 50px;

        -webkit-transform: skewX(15deg) scaleX(1.4);
            -ms-transform: skewX(15deg) scaleX(1.4);
                transform: skewX(15deg) scaleX(1.4);
    }
}
@media screen and (min-width: 769px), print
{
    .sns-area .share-area ul li a .btn-pc
    {
        position: relative; 

        display: block;
    }
    .sns-area .share-area ul li a .btn-pc .btn-hover
    {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;

        -webkit-transition: all .3s ease;
                transition: all .3s ease; 

        opacity: 0;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    }
    .sns-area .share-area ul li a:hover .btn-pc .btn-hover
    {
        opacity: 1;

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

.official-area
{
    width: 288px;
    margin: 20px auto 0;

    text-align: center;
}
@media screen and (min-width: 769px), print
{
    .official-area
    {
        float: right; 

        width: 300px;
        margin: 0;
    }
}
@media screen and (min-width: 769px), print
{
    .official-area .official-btn a .btn-pc
    {
        position: relative; 

        display: block;
    }
    .official-area .official-btn a .btn-pc .btn-hover
    {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;

        -webkit-transition: all .3s ease;
                transition: all .3s ease; 

        opacity: 0;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    }
    .official-area .official-btn a:hover .btn-pc .btn-hover
    {
        opacity: 1;

        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
    }
}
.official-area .official-text
{
    width: 80%; 
    margin: 10px auto;
}
@media screen and (min-width: 769px), print
{
    .official-area .official-text img
    {
        width: 234px;
    }
}

.copyright
{
    margin: 20px 10px 20px; 

    text-align: center;

    text-shadow: 0 0 10px #000,0 0 10px #000,0 0 10px #000,0 0 10px #000;
}
@media screen and (min-width: 769px), print
{
    .copyright
    {
        margin-top: 40px;
    }
}

[data-delay]
{
    -webkit-transition: opacity .6s ease-in;
            transition: opacity .6s ease-in; 

    opacity: 0;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
}
[data-delay].is-show
{
    opacity: 1;

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

/* print style */
@media print
{
    html
    {
        background: none;
    }
    body
    {
        padding: 0;

        background: none;
    }
    /* for IE7 */
    *:first-child + html body
    {
        zoom: 67%;
    }
}