@charset 'UTF-8';
/**
 * compass/reset
 *
 * http://compass-style.org/reference/compass/reset/
 */
@import url('johnny.css') print;
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video
{
    font: inherit;
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline; 

    border: 0;
}

html
{
    line-height: 1;
}

ol,
ul
{
    list-style: none;
}

table
{
    border-spacing: 0; 
    border-collapse: collapse;
}

caption,
th,
td
{
    font-weight: normal;

    text-align: left;
    vertical-align: middle;
}

q,
blockquote
{
    quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after
{
    content: '';
    content: none;
}

a img
{
    border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary
{
    display: block;
}

body
{
    font-family: -apple-system,'Lucida Grande','Helvetica Neue','Hiragino Kaku Gothic ProN','游ゴシック','メイリオ',meiryo,sans-serif;

    min-width: 1110px;
}

.mpt
{
    visibility: hidden;
}

.oldie .mpt
{
    visibility: visible;
}

#header .page
{
    position: fixed;
    z-index: 100;
    top: 0;

    width: 100%;
    min-width: 1000px;
    height: 60px;

    background-repeat: no-repeat;
    background-position: center top;

    -webkit-filter: drop-shadow(rgba(0, 0, 0, .13) 0px 0px 5px);

            filter: drop-shadow(rgba(0, 0, 0, .13) 0px 0px 5px);
}
#header .page .bg
{
    position: relative;
    top: -50px;

    width: 100%; 
    height: 110px;

    background-color: #fff;
}
#header .page .bg2
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 107px;

    pointer-events: none;

    background-image: url(../images/header_bg.png);
    background-repeat: no-repeat; 
    background-position: center top;
}
#header .page .page-nav
{
    position: absolute;
    top: 0;
    left: 50%;

    width: 743px;
    height: 60px;
    margin-left: -372px;

    background-image: url(../images/header_nav_border.png);
    background-repeat: no-repeat;
    background-position: 154px 20px;
}
#header .page .page-nav .btn_about
{
    position: absolute;
    top: 0; 
    left: 0;

    display: block;
    overflow: hidden;

    width: 155px;
    height: 60px;

    text-decoration: none;

    background-image: url('../images/header_nav_1.png');
}
#header .page .page-nav .btn_about span
{
    display: block;
    overflow: hidden;

    width: 100%;
    height: 100%;

    -webkit-transition: opacity .2s linear;

    -o-transition: opacity .2s linear;

    -moz-transition: opacity .2s linear;

    transition: opacity .2s linear; 
    white-space: nowrap;
    text-indent: 100%;

    opacity: 0;
    background-image: url('../images/header_nav_1.png');
    background-position: 0 -60px;

    filter: alpha(opacity=0);
}
#header .page .page-nav .btn_about:hover span
{
    opacity: 1;
}
#header .page .page-nav .btn_lineup
{
    position: absolute;
    top: 0; 
    left: 155px;

    display: block;
    overflow: hidden;

    width: 166px;
    height: 60px;

    text-decoration: none;

    background-image: url('../images/header_nav_2.png');
}
#header .page .page-nav .btn_lineup span
{
    display: block;
    overflow: hidden;

    width: 100%;
    height: 100%;

    -webkit-transition: opacity .2s linear;

    -o-transition: opacity .2s linear;

    -moz-transition: opacity .2s linear;

    transition: opacity .2s linear; 
    white-space: nowrap;
    text-indent: 100%;

    opacity: 0;
    background-image: url('../images/header_nav_2.png');
    background-position: 0 -60px;

    filter: alpha(opacity=0);
}
#header .page .page-nav .btn_lineup:hover span
{
    opacity: 1;
}
#header .page .page-nav .btn_labo
{
    position: absolute;
    top: 0; 
    right: 131px;

    display: block;
    overflow: hidden;

    width: 185px;
    height: 60px;

    text-decoration: none;

    background-image: url('../images/header_nav_3.png');
}
#header .page .page-nav .btn_labo span
{
    display: block;
    overflow: hidden;

    width: 100%;
    height: 100%;

    -webkit-transition: opacity .2s linear;

    -o-transition: opacity .2s linear;

    -moz-transition: opacity .2s linear;

    transition: opacity .2s linear; 
    white-space: nowrap;
    text-indent: 100%;

    opacity: 0;
    background-image: url('../images/header_nav_3.png');
    background-position: 0 -60px;

    filter: alpha(opacity=0);
}
#header .page .page-nav .btn_labo:hover span
{
    opacity: 1;
}
#header .page .page-nav .btn_ad_gallery
{
    position: absolute;
    top: 0; 
    right: 0;

    display: block;
    overflow: hidden;

    width: 131px;
    height: 60px;

    text-decoration: none;

    background-image: url('../images/header_nav_4.png');
}
#header .page .page-nav .btn_ad_gallery span
{
    display: block;
    overflow: hidden;

    width: 100%;
    height: 100%;

    -webkit-transition: opacity .2s linear;

    -o-transition: opacity .2s linear;

    -moz-transition: opacity .2s linear;

    transition: opacity .2s linear; 
    white-space: nowrap;
    text-indent: 100%;

    opacity: 0;
    background-image: url('../images/header_nav_4.png');
    background-position: 0 -60px;

    filter: alpha(opacity=0);
}
#header .page .page-nav .btn_ad_gallery:hover span
{
    opacity: 1;
}
#header .page .logo
{
    position: absolute;
    z-index: 1; 
    top: 19px;
    left: 50%;

    margin-left: -35px;
}
#header .page.about .page-nav .btn_about
{
    background-position: 0 -60px;
}
#header .page.lineup .page-nav .btn_lineup
{
    background-position: 0 -60px;
}
#header .page.labo .page-nav .btn_labo
{
    background-position: 0 -60px;
}
#header .page.ad_gallery .page-nav .btn_ad_gallery
{
    background-position: 0 -60px;
}

#header .kose
{
    position: absolute;
    top: 0;
    left: 0;

    width: 120px;
    height: 60px;

    -webkit-transition: background-color .2s linear;

    -o-transition: background-color .2s linear;

    -moz-transition: background-color .2s linear;

    transition: background-color .2s linear; 

    background-color: #2653af;
}
#header .kose img
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    margin: auto;
}
#header .kose:hover
{
    background-color: #113b90;
}

#header .lang
{
    position: absolute;
    top: 0;
    right: 0;

    width: 60px;
    height: 60px; 

    -webkit-transition: height .3s cubic-bezier(.34, .01, .65, 1); 

    -o-transition: height .3s cubic-bezier(.34, .01, .65, 1); 

    -moz-transition: height .3s cubic-bezier(.34, .01, .65, 1); 

    transition: height .3s cubic-bezier(.34, .01, .65, 1);
}
#header .lang .trigger
{
    position: relative;
    z-index: 10;

    width: 60px;
    height: 60px;

    -webkit-transition: background-color .2s linear;

    -o-transition: background-color .2s linear;

    -moz-transition: background-color .2s linear;

    transition: background-color .2s linear; 

    background-color: #2653af;
}
#header .lang:hover .trigger
{
    background-color: #113b90;
}
#header .lang .lang_btn
{
    position: relative;
    position: absolute;
    top: 0; 

    width: 60px;
    height: 60px;

    -webkit-transition: background-color .2s linear, top .3s cubic-bezier(.34, .01, .65, 1);

    -o-transition: background-color .2s linear, top .3s cubic-bezier(.34, .01, .65, 1);

    -moz-transition: background-color .2s linear, top .3s cubic-bezier(.34, .01, .65, 1);

    transition: background-color .2s linear, top .3s cubic-bezier(.34, .01, .65, 1);

    background-color: #2653af;
}
#header .lang .lang_btn:hover
{
    background-color: #113b90;
}
#header .lang:hover
{
    height: 304px;
}
#header .lang:hover .lang-jp
{
    top: 61px;
}
#header .lang:hover .lang-en
{
    top: 122px;
}
#header .lang:hover .lang-han
{
    top: 183px;
}
#header .lang:hover .lang-kan
{
    top: 244px;
}
#header .lang img
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    margin: auto;
}

#header .share
{
    position: absolute;
    top: 0;
    right: 61px;

    width: 60px;
    height: 60px; 

    -webkit-transition: height .3s cubic-bezier(.34, .01, .65, 1); 

    -o-transition: height .3s cubic-bezier(.34, .01, .65, 1); 

    -moz-transition: height .3s cubic-bezier(.34, .01, .65, 1); 

    transition: height .3s cubic-bezier(.34, .01, .65, 1);
}
#header .share .trigger
{
    position: relative;
    z-index: 10;

    width: 60px;
    height: 60px;

    -webkit-transition: background-color .2s linear;

    -o-transition: background-color .2s linear;

    -moz-transition: background-color .2s linear;

    transition: background-color .2s linear; 

    background-color: #2653af;
}
#header .share:hover .trigger
{
    background-color: #113b90;
}
#header .share .share_btn
{
    position: relative;
    position: absolute;
    top: 0; 

    width: 60px;
    height: 60px;

    -webkit-transition: background-color .2s linear, top .3s cubic-bezier(.34, .01, .65, 1);

    -o-transition: background-color .2s linear, top .3s cubic-bezier(.34, .01, .65, 1);

    -moz-transition: background-color .2s linear, top .3s cubic-bezier(.34, .01, .65, 1);

    transition: background-color .2s linear, top .3s cubic-bezier(.34, .01, .65, 1);

    background-color: #2653af;
}
#header .share .share_btn:hover
{
    background-color: #113b90;
}
#header .share:hover
{
    height: 365px;
}
#header .share:hover .tw
{
    top: 61px;
}
#header .share:hover .fb
{
    top: 122px;
}
#header .share:hover .gp
{
    top: 183px;
}
#header .share:hover .mixi
{
    top: 244px;
}
#header .share:hover .line
{
    top: 305px;
}
#header .share img
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    margin: auto;
}

#header .aw_banner
{
    position: fixed;
    z-index: 11; 
    top: 146px;
    right: 0;

    width: 150px;
    height: 128px;
}
#header .aw_banner .base
{
    position: absolute;
    top: -11px; 
    right: 0;
}
#header .aw_banner .fukidashi
{
    position: absolute;
    top: -49px;
    right: 94px;

    -webkit-transform-origin: 80% 90%;

       -moz-transform-origin: 80% 90%;

        -ms-transform-origin: 80% 90%;

         -o-transform-origin: 80% 90%;

            transform-origin: 80% 90%;
}

#contents
{
    padding-top: 60px;

    text-align: center;

    background-color: #398bcd;
}
#contents .inner
{
    overflow: hidden; 

    max-width: 1600px;
    margin: 0 auto;
}

#footer
{
    border-top: solid 1px #e5e5e5;
}
#footer .wrap
{
    zoom: 1;

    width: 960px; 
    margin: 0 auto;
    padding: 20px 0;
}
#footer .wrap:after
{
    display: block;
    clear: both; 

    content: '';
}
#footer .wrap .kose-logo
{
    display: inline-block;

    width: 66px;
    margin-right: 11px;
}
#footer .wrap .sns-links,
#footer .wrap .links
{
    font-size: 0;

    display: inline-block;
}
#footer .wrap .sns-links li,
#footer .wrap .links li
{
    display: inline-block;
}
#footer .wrap .links
{
    margin-top: 2px;

    border-left: solid 1px #ccd6ea;
}
#footer .wrap .links li
{
    padding: 5px 13px; 

    border-right: solid 1px #ccd6ea;
}
#footer .wrap .links li a
{
    font-size: 11px;
    line-height: 1;

    text-decoration: none;

    color: #2653af;
}
#footer .wrap .links li a:hover
{
    text-decoration: underline;
}
#footer .wrap .sns-links
{
    margin-left: 20px;
}
#footer .wrap .sns-links li
{
    display: inline-block;

    width: 20px;
    height: 20px;
    margin-left: 5px;
}
#footer .wrap .sns-links li:first-child
{
    margin-left: 0;
}
#footer .wrap .sns-links li a
{
    display: block;
    overflow: hidden; 

    width: 100%;
    height: 100%;

    white-space: nowrap;
    text-indent: 100%;

    background-image: url(../images/footer_sns_icons.png);
}
#footer .wrap .sns-links li.tw a
{
    background-position: 0 0;
}
#footer .wrap .sns-links li.fb a
{
    background-position: -25px 0;
}
#footer .wrap .sns-links li.gp a
{
    background-position: -50px 0;
}
#footer .wrap .sns-links li.mixi a
{
    background-position: -75px 0;
}
#footer .wrap .sns-links li.line a
{
    background-position: -100px 0;
}
#footer .wrap .copyright
{
    font-size: 10px;
    line-height: 1;

    float: right;

    margin-top: 10px;

    color: #2653af;
}

.johnny
{
    -webkit-user-select: none;
       -moz-user-select: none; 
            -ms-user-select: none; 
        user-select: none;

            touch-callout: none;
    -webkit-touch-callout: none;
       -moz-touch-callout: none;
}
.johnny *
{
    -webkit-user-select: none;
       -moz-user-select: none; 
            -ms-user-select: none; 
        user-select: none;

            touch-callout: none;
    -webkit-touch-callout: none;
       -moz-touch-callout: none;
}

.johnny-bg
{
    -webkit-user-select: none;
       -moz-user-select: none; 
            -ms-user-select: none; 
        user-select: none;

            touch-callout: none;
    -webkit-touch-callout: none;
       -moz-touch-callout: none;
}
.johnny-bg *
{
    -webkit-user-select: none;
       -moz-user-select: none; 
            -ms-user-select: none; 
        user-select: none;

            touch-callout: none;
    -webkit-touch-callout: none;
       -moz-touch-callout: none;
}

.johnny-cover
{
    -webkit-user-select: none;
       -moz-user-select: none; 
            -ms-user-select: none; 
        user-select: none;

            touch-callout: none;
    -webkit-touch-callout: none;
       -moz-touch-callout: none;
}