@charset "utf-8";

/* =link
-------------------------------------------------------------------------*/
a,button,img,*:before,*:after { transition: all .3s; }

a.normal:before { width: 2em; }
a.normal:hover:before { width: 100%; }
p.more a:hover { opacity: .8; }
ul.check li a:hover:before { right: 1em; }


/* =tags
-------------------------------------------------------------------------*/
p.more,
form button.submit,form button.submit2 {
    width: 250px;
    background: url("/images/temp/more.svg") no-repeat 50% 0;
    background-size: contain;
    } 

p.more a,
form button.submit,form button.submit2 {
    height: 67px;
    line-height: 65px;
    font-size: 1.8rem;
    padding-right: 1em;
    }

p.more a:after,
form button.submit:after
{
    top: 1px;
    right: 30px;
    transition: right .2s;
    }

p.more a:hover:after,
form button.submit:hover:after { right: 20px; }

form button.submit2:hover:after { left: 30px; }

p.more.long,
form button.submit {
    width: 375px;
    }

form button.submit2 {
    width: 300px;
    }


p.more.long a,
form button.submit {
    height: 100px;
    line-height: 100px;
    font-size: 1.8rem;
    }

form button.submit2 {
    height: 85px;
    line-height: 85px;
    font-size: 1.8rem;
    }


form button.submit,form button.submit2 { font-size: 2rem; }

p.more.long a:after,
form button.submit:after { right: 40px; }


form button.submit2:after { left: 50px; }

p.more.long a:hover:after,
form button.submit:hover:after { right: 30px; }

form button.submit2:hover:after { left: 40px; }

p.jump a:before,
ul.jump li a:before,
a.jump:before { right: 25px; }

p.jump a:hover:before,
ul.jump li a:hover:before,
a.jump:hover:before { right: 15px; }

a.jump.internal:before { right: 15px; }
a.jump.internal:hover:before { top: 60%; }

button.more span:after { transition: bottom .2s; }
button.more:hover span:after { bottom: -14px; }


/* =#masthead
-------------------------------------------------------------------------*/
#masthead.shaped {
    height: 100px;
    transform: translateY(0);
        -webkit-transform: translateY(0);
    }

#masthead>h1 {
    position: absolute;
    top: 34%;
    left: 5px;
    width: 315px;
    height: 90px;
    margin: 0;
    transition: all .3s;
    transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }

#masthead.shaped>h1 {
    width: 200px;
    height: 60px;
	top:35%;
	left:20px;
    }

.gnav {
    position: absolute;
    top: 8px;
    right: 160px;
    width: calc(100% - 440px);
    max-width: 820px;
    z-index: 100;
    }




.gnav>div.ul {
    display: table;
    width: 100%;
	table-layout: fixed;
    }

.gnav>div.ul>div.li {
    position: relative;
    display: table-cell;
    width: calc((100% - 80px) * .2);
    padding: 0 3px;
    vertical-align: middle;
    }

.gnav>div.ul>div.li:first-child { width: 80px; }

.gnav>div.ul>div.li i,
.gnav>div.ul>div.li>a span,
.gnav>div.ul>div.li>span span {
    position: relative;
    display: block;
    height: 40px;
    line-height: 1.8;
    text-align: center;
    cursor: pointer;
    }

.gnav>div.ul>div.li i,
.gnav>div.ul>div.li:not(:first-child)>a span,
.gnav>div.ul>div.li>span span {
    transition: transform .3s,top .3s,font-size .3s;
        -webkit-transition: -webkit-transform .3s,top .3s,font-size .3s;
    }

.gnav>div.ul>div.li>a span,
.gnav>div.ul>div.li>span span {
    top: 40px;
    font-size: 1.2rem;
    white-space: nowrap;
    z-index: 10;
    }

.gnav>div.ul>div.li:first-child>a span { line-height: 2; }

.gnav>div.ul>div.li i {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    font-size: 2.2rem;
    line-height: 1.8;
    text-align: center;
    height: 40px;
    line-height: 40px;
    letter-spacing: .025em;
    z-index: 10;
    transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }

@media only screen and (max-width:1000px) {
    .gnav>div.ul>div.li i {
        font-size: 1.3rem;
    }
    .gnav>div.ul>div.li>a span, .gnav>div.ul>div.li>span span {
        font-size: 0.8rem;
    }
    .gnav {
        left:210px;
        width: calc(100% - 370px);
    }
    #masthead>h1 {
        width: 200px;
        height: 60px;
        top: 35%;
        left: 20px;
    }

}
@media only screen and (max-width:900px) {
    .gnav>div.ul>div.li i {
        font-size: 1rem;
    }
    .gnav>div.ul>div.li>a span, .gnav>div.ul>div.li>span span {
        display: none;
    }
}



.gnav>div.ul>div.li:first-child i:before {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    }

.gnav>div.ul>div.li b:before { font-size: 3.4rem; }

.gnav>div.ul>div.li i:before,
#masthead.shaped .gnav>div.ul>div.li:not(:first-child)>a span:before,
#masthead.shaped .gnav>div.ul>div.li>span span:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: calc(100% + 40px);
    height: 100%;
    border: 3px solid transparent !important;
    border-radius: 10px;
    z-index: 0;
    transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }

#masthead.shaped .gnav>div.ul>div.li:not(:first-child)>a span:before,
#masthead.shaped .gnav>div.ul>div.li>span span:before { width: calc(100% + 4px); }

#root .gnav>div.ul>div.li.home i:before,
#about .gnav>div.ul>div.li.about i:before,
#cashless .gnav>div.ul>div.li.cashless i:before,
#scenes .gnav>div.ul>div.li.scenes i:before,
#app .gnav>div.ul>div.li.app i:before,
#news .gnav>div.ul>div.li.news i:before,
#t-hamamatsu.prices .gnav>div.ul>div.li.h_prices i:before,
#t-hamamatsu.access .gnav>div.ul>div.li.h_access i:before,
#about #masthead.shaped .gnav>div.ul>div.li.about>a span:before,
#cashless #masthead.shaped .gnav>div.ul>div.li.cashless>a span:before,
#scenes #masthead.shaped .gnav>div.ul>div.li.scenes>span span:before,
#app #masthead.shaped .gnav>div.ul>div.li.app>a span:before,
#news #masthead.shaped .gnav>div.ul>div.li.news>a span:before,
#t-hamamatsu.prices #masthead.shaped .gnav>div.ul>div.li.h_prices>a span:before,
#t-hamamatsu.access #masthead.shaped .gnav>div.ul>div.li.h_access>a span:before { border-color: #00a99d !important; }

.gnav>div.ul>div.li i:after,
#masthead.shaped .gnav>div.ul>div.li:not(:first-child)>a span:after,
#masthead.shaped .gnav>div.ul>div.li>span span:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 106px;
    height: 50px;
    visibility: hidden;
    opacity: 0;
    background: url("/images/temp/ghover.svg") no-repeat 50% 50%;
    background-size: contain;
    z-index: -10;
    transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }

.gnav>div.ul>div.li>a:hover i:after,
.gnav>div.ul>div.li>span:hover i:after,
#masthead.shaped .gnav>div.ul>div.li:not(:first-child)>a:hover span:after,
#masthead.shaped .gnav>div.ul>div.li>span:hover span:after,
.gnav>div.ul>div.li.cascaded.active>span i:after,
#masthead.shaped .gnav>div.ul>div.li.cascaded.active>span span:after {
    visibility: visible;
    opacity: 1;
    }

#masthead.shaped .gnav>div.ul>div.li:not(:first-child) i {
    transform: translate(-50%,-100px);
        -webkit-transform: translate(-50%,-100px);
    }

#masthead.shaped .gnav>div.ul>div.li:not(:first-child)>a span,
#masthead.shaped .gnav>div.ul>div.li>span span {
    top: 0;
    font-size: 1.4rem;
    height: 40px;
    line-height: 40px;
    }

#masthead.shaped .gnav>div.ul>div.li:first-child>a span {
    transform: translateY(-90px);
        -webkit-transform: translateY(-90px);
    }

.gnav div.ul.lower {
    position: absolute;
    top: 100%;
    left: 0;
    border-top: 3px solid #fbb03b !important;
    z-index: 20;
    }

.gnav div.ul.lower div.li {
    font-size: 1.5rem;
    white-space: nowrap;
    }

.gnav div.ul.lower div.li a {
    display: block;
    padding: 1em 45px 1em 20px;
    color: #00a99d;
    background: rgba(255,255,255,.9);
    }

.gnav div.ul.lower div.li a:hover { background: rgba(255,255,255,1); }

.gnav div.ul.lower div.li a:after {
    visibility: hidden;
    opacity: 0;
    }

.gnav div.ul.lower div.li a:hover:after {
    visibility: visible;
    opacity: 1;
    }

p.reserve {
    top: 0;
    right: 30px;
    margin: 0;
    font-size: 1.8rem;
    text-transform: uppercase;
    }

p.reserve a {
    display: block;
    height: auto;
    font-weight: 800;
    line-height: 1.4;
    padding: 8px 25px 16px 15px;
    border-radius: 0 0 6px 6px;
    }

p.reserve a:after {
    position: absolute;
    top: 40%;
    right: 5px;
    transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    display: block;
    }

p.reserve a span {
    display: block;
    cursor: pointer;
    }

#masthead.shaped p.reserve a {
    line-height: 1.2;
    padding: 1px 25px 7px 15px;
    }

.store { top: calc(100% - 45px); }
.store div.ul.lower div.li:hover span:before { background: rgba(255,255,255,.3); }

.hidden .store { top: calc(100% - 53px); }

.store div.li.cascaded.active>span {
    color: #fff;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    }

.store div.li:first-child.cascaded.active>span { background: #eb812d; }
.store div.li:nth-child(2).cascaded.active>span { background: #e44649; }
.store div.li:nth-child(3).cascaded.active>span { background: #96be41; }

.download {
    width: 600px !important;
    margin: 0 auto;
    }


/* =article
-------------------------------------------------------------------------*/

.headline:before { display: none; }

.headline dl {
    padding: 1.25em 0 1.5em;
    background: url("/images/temp/border.svg") repeat-x 0 100%;
    background-size: 960px auto;
    border: none;
    }

.headline dd a:before {
    right: 10px;
    transition: right .2s;
    }

.headline dd a:hover:before { right: 0; }

ul.sns li:hover {
    animation: poyoyon .2s ease-in-out backwards;
        -webkit-animation: poyoyon .2s ease-in-out backwards;
    }

@keyframes poyoyon {
    from { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    to { transform: translateY(0); }
    }

@-webkit-keyframes poyoyon {
    from { -webkit-transform: translateY(0); }
    50% { -webkit-transform: translateY(-10px); }
    to { -webkit-transform: translateY(0); }
    }

.inputitems button.function:hover:before,
.inputitems .selector:hover:before { top: 60%; }

form .header dd:not(.function) span:hover:before {
    transform: translateY(-50%) rotate(180deg);
        -webkit-transform: translateY(-50%) rotate(180deg);
    }


/* =#colophon
-------------------------------------------------------------------------*/
#colophon nav {
    padding: 0 40px 1px;
    background: #fff;
    z-index: 10;
    }

#colophon nav ul { margin: 0 auto; }

#colophon nav ul#feature {
    width: calc(100% - 40px);
    margin-bottom: 60px;
    }

#colophon nav ul#feature li { margin: 120px 0 0; }

#colophon nav ul#feature li a {
    position: relative;
    display: block;
    }

#colophon nav ul#feature li figure p {
    position: relative;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.3;
    text-align: center;
    letter-spacing: .1em;
    margin: 0;
    color: #3ba448;
    background: #fff;
    }

#colophon nav ul#feature li figure p span {
    position: absolute;
    left: 50%;
    white-space: nowrap;
    cursor: pointer;
    transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }

#colophon nav ul#feature li figure p span i {
    display: block;
    text-align: left;
    }

#colophon nav ul#feature li figure p span i+i { margin-left: 2.5em; }

#colophon nav ul#feature li figure p span i:first-of-type:before {
    content: '\f054';
    margin-right: .3em;
    color: #8ddb08;
    }

#colophon nav ul#feature li figure figcaption {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 7px;
    padding: 1em 0 0;
    color: #f15a24 !important;
    z-index: 10;
    transform: translate(-50%,-80%);
        -webkit-transform: translate(-50%,-80%);
    }

#colophon nav ul#feature li a:hover figure figcaption {
    animation: poyon .4s ease-in-out backwards;
        -webkit-animation: poyon .4s ease-in-out backwards;
    }

@keyframes poyon {
    from { transform: translate(-50%,-80%); }
    30% { transform: translate(-50%,-100%); }
    60% { transform: translate(-50%,-70%); }
    80% { transform: translate(-50%,-90%); }
    to { transform: translate(-50%,-80%); }
    }

@-webkit-keyframes poyon {
    from { -webkit-transform: translate(-50%,-80%); }
    30% { -webkit-transform: translate(-50%,-100%); }
    60% { -webkit-transform: translate(-50%,-70%); }
    80% { -webkit-transform: translate(-50%,-90%); }
    to { -webkit-transform: translate(-50%,-90%); }
    }

#colophon nav ul#feature li figure p {
    height: 110px;
    margin: 0 auto;
    background: url("/images/temp/root/feature-title.svg") no-repeat 50% 0;
    background-size: contain;
    }

#colophon nav ul#feature li a p span i {
    border-bottom: 1px solid transparent;
    transition: border .2s;
    }

#colophon nav ul#feature li a:hover p span i { border-bottom-color: #3ba448; }
#colophon nav ul#feature li figure p span { top: 42%; }

#colophon nav ul#feature li figure figcaption {
    height: 110px;
    margin-bottom: -20px;
    padding-top: 2em;
    background: url("/images/temp/root/feature-balloon.svg") no-repeat 50% 0;
    background-size: contain;
    }

#colophon nav ul:not(#feature) { text-align: center; }

#colophon nav ul:not(#feature) li {
    display: inline-block;
    font-size: 1.6rem;
    margin: 0 10px;
    }

#colophon nav ul:not(#feature) li a {
    opacity: .5;
    }

#colophon nav ul:not(#feature) li a:hover { opacity: 1; }

#colophon nav ul:not(#feature) li a:before {
    content: '\f054';
    margin-right: .3em;
    color: #f7931e;
    }


/* =p#gotop
-------------------------------------------------------------------------*/
p#gotop {
    display: block;
    position: fixed;
    top: auto;
    right: 10px;
    /*bottom: 400px;*/
    bottom: 10px;
    margin: 0;
    z-index: 800;
    }

p#gotop a {
    width: 120px;
    height: 229px;
    visibiliity: hidden;
    opacity: 0;
    background-image: url("/images/temp/top.svg");
    transition: visibility .3s,opacity .3s !important;
    }

p#gotop.active a {
    visibiliity: visible;
    opacity: 1;
    }

p#gotop a:hover { background-image: url("/images/temp/top-active.svg"); }


/* =.balbase
-------------------------------------------------------------------------*/
.balbase {
    position: relative;
    overflow: hidden;
    z-index: 200;
    }

body:not(#root) .balbase:before,
body:not(#root) .balbase:after,
body:not(#root) .balbase>div:before,
body:not(#root) .balbase>div:after {
    content: '';
    position: absolute;
    display: block;
    height: 10000px;
    background-repeat: repeat-y;
    background-position: 50% 0;
    z-index: 10;
	
	pointer-events: none; /**/
	
    }

body:not(#root) .balbase:before,
body:not(#root) .balbase:after {
    width: 95px;
    background-image: url("/images/temp/balloon00.svg");
    background-size: 95px auto;
    }

body:not(#root) .balbase:before {
    top: 1000px;
    right: -5px;
    }

body:not(#root) .balbase:after {
    top: 700px;
    left: -10px;
    }

body:not(#root) .balbase>div:before,
body:not(#root) .balbase>div:after {
    width: 172px;
    background-image: url("/images/temp/clouds.svg");
    background-size: 172px auto;
    }

body:not(#root) .balbase>div:before {
    top: 1300px;
    right: -10px;
    }

body:not(#root) .balbase>div:after {
    top: 1000px;
    left: -40px;
    }
@media screen and (max-width:1290px) {
  body:not(#root) .balbase:before,
body:not(#root) .balbase:after,
body:not(#root) .balbase>div:before,
body:not(#root) .balbase>div:after {
	display:none;
}
}

/* =#root
-------------------------------------------------------------------------*/
#root #intro { height: calc(100vh - 125px) !important; }

#root #intro #movie:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	/*
    background: rgba(255,255,255,.3) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAEklEQVQImWP4DwUM6ACnBB0AAEi+D/GMyxZGAAAAAElFTkSuQmCC") repeat;
    */z-index: 1;
    }

#root #intro .share li:nth-child(odd) {
    animation: horizontal1 1.1s ease-in-out infinite alternate;
        -webkit-animation: horizontal1 1.1s ease-in-out infinite alternate;
    }

#root #intro .share li:nth-child(even) {
    animation: horizontal2 1.2s ease-in-out infinite alternate;
        -webkit-animation: horizontal2 1.2s ease-in-out infinite alternate;
    }

@keyframes horizontal1 {
    from { transform: translateY(-2px); }
    top { transform: translateY(0); }
    }

@keyframes horizontal2 {
    from { transform: translateY(2px); }
    to { transform: translateY(0); }
    }

@-webkit-keyframes horizontal1 {
    from { -webkit-transform: translateY(-2px); }
    top { -webkit-transform: translateY(0); }
    }

@-webkit-keyframes horizontal2 {
    from { -webkit-transform: translateY(2px); }
    to { -webkit-transform: translateY(0); }
    }

#root #spot-news p a { text-decoration: none; }
#root #spot-news p a:hover { text-decoration: underline; }

#root #intro .scenes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    }

#root #intro .scenes li {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    background: rgba(255,255,255,.8);
    transition: all .2s;
    }

#root #intro .scenes li.active {
    visibility: visible;
    opacity: 1;
    }

#root #intro .scenes li img {
    position: absolute;
    top: 40%;
    left: 50%;
    height: 300px;
    z-index: 6;
    transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }

#root #intro .scenes li.about img { height: 240px; }
#root #intro .scenes li.family img { width: 565px; }
#root #intro .scenes li.child img { width: 542px; }
#root #intro .scenes li.party img { width: 557px; }
#root #intro .scenes li.diet img { width: 533px; }

#root #scenes {
    width: 1024px;
    height: 240px;
    background: url("/images/temp/root/scenes-nav.svg") repeat 50% -240px;
    background-size: cover;
    }

#root #scenes li {
    width: 204px;
    text-indent: -999em;
    }

#root #scenes li:not(:last-child) { margin-right: 1px; }
#root #scenes li:nth-child(3) { margin-right: 206px; }
#root #scenes li br { display: none; }

#root #scenes li a {
    height: 240px;
    background-image: url("/images/temp/root/scenes-nav.svg");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 1024px 480px;
    }

#root #scenes li:first-child a { background-position: -410px 0; }
#root #scenes li:nth-child(2) a { background-position: 0 0; }
#root #scenes li:nth-child(3) a { background-position: -205px 0; }
#root #scenes li:nth-child(4) a { background-position: -615px 0; }
#root #scenes li:last-child a { background-position: -820px 0; }
#root #scenes li:first-child a:hover { background-position: -410px 240px; }
#root #scenes li:nth-child(2) a:hover { background-position: 0 240px; }
#root #scenes li:nth-child(3) a:hover { background-position: -205px 240px; }
#root #scenes li:nth-child(4) a:hover { background-position: -615px 240px; }
#root #scenes li:last-child a:hover { background-position: -820px 240px; }
#root #scenes figure a:hover p span { border-bottom-color: rgba(255,255,255,1); }
#root #media { padding-bottom: 180px !important; }
#root #media:after { display: block; }

#root #media ul {
    width: calc(100% - 60px);
    max-width: 1200px;
    margin: 100px auto 0;
    list-style-type: none;
    }

#root #media ul li {
    width: calc((100% - 60px) / 4);
    margin: 0 20px 60px 0;
    float: left;
    }

#root #media ul li:nth-child(even) { margin-top: 40px; }
#root #media ul li:nth-child(4n) { margin-right: 0; }
#root #media ul li:nth-child(4n+1) { clear:left; }

#root #media ul li a {
    position: relative;
    display: block;
    padding-top: 200px;
    border-radius: 40px 40px 0 0;
    }


#root .ch-info-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    transition: all .4s ease-in-out;
    perspective: 800px;
        -webkit-perspective: 800px;
    }

#root .ch-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .4s ease-in-out;
    transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
    }

#root #media li a:hover .ch-info {
    transform: rotate3d(0,1,0,-180deg);
        -webkit-transform: rotate3d(0,1,0,-180deg);
    }

#root .ch-info>div {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: calc((100vw - 120px) / 4 * .75 + 12px);
    max-height: 217px;
    border-radius: 40px;
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,.3);
    backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

#root .ch-info .ch-info-front {
    border: 6px solid #fff !important;
    }

#root .ch-info .ch-info-back {
    border: 6px solid #fff !important;
    border-radius: 40px;
    background: #fff;
    overflow: hidden;
    transform: rotate3d(0,1,0,180deg);
        -webkit-transform: rotate3d(0,1,0,180deg);
    }

#root .ch-info .ch-info-back p {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    color: #fff;
    background: rgba(0,0,0,.7);
    }

#root .ch-info .ch-info-back p span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: calc(100% - 60px);
    font-weight: 600;
    cursor: pointer;
    transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }

#root #media ul li a header time,
#root #media ul li a header figcaption {
    display: block;
    text-align: center;
    }

#root #media ul li a header time {
    font-weight: 300;
    font-family: 'Nunito',sans-serif;
    font-size: 1.4rem;
    vertical-align: middle;
    margin-right: .5em;
    }

#root #media ul li a header figcaption {
    font-weight: 600;
    font-size: 1.6rem;
    }

#root #media ul li a:before {
    content: '';
    position: absolute;
    top: -23px;
    left: 50%;
    display: block;
    width: 18px;
    height: 29px;
    background: url("/images/temp/pushpin.svg") no-repeat 50% 0;
    z-index: 10;
    transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }

#root #media ul li a:hover:before {
    animation: test .4s forwards;
        -webkit-animation: test .4s forwards;
    }

@keyframes test {
    from { top: -23px; transform: translateX(-50%); }
    50% { top: -33px; transform: translateX(-35%); }
    to { top: -23px; transform: translateX(-50%); }
    }

@-webkit-keyframes test {
    from { top: -23px; -webkit-transform: translateX(-50%); }
    50% { top: -33px; -webkit-transform: translateX(-35%); }
    to { top: -23px; -webkit-transform: translateX(-50%); }
    }

.balloons {
    position: absolute;
    z-index: 100;
    }

.balloons01 {
    top: 80vh;
    left: 60%;
    transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
    animation: flyaway1 120s -70s infinite;
        -webkit-animation: flyaway1 120s -70s infinite;
    }

@keyframes flyaway1 {
    from { top: 100%; left: 60%; transform: rotate(15deg); }
    to { top: -100px; left: 70%; transform: rotate(15deg); }
    }

@-webkit-keyframes flyaway1 {
    from { top: 100%; left: 60%; -webkit-transform: rotate(15deg); }
    to { top: -100px; left: 70%; -webkit-transform: rotate(15deg); }
    }

.balloons02 {
    top: 30%;
    left: 5%;
    transform: rotate(-10deg) scale(1.1);
        -webkit-transform: rotate(-10deg) scale(1.1);
    animation: flyaway2 120s -50s infinite;
        -webkit-animation: flyaway2 120s -50s infinite;
    }

@keyframes flyaway2 {
    from { top: 100%; left: 5%; transform: rotate(-10deg) scale(1.3); }
    to { top: -100px; left: -3%; transform: rotate(-10deg) scale(1.3); }
    }

@-webkit-keyframes flyaway2 {
    from { top: 100%; left: 5%; -webkit-transform: rotate(-10deg) scale(1.3); }
    to { top: -100px; left: -3%; -webkit-transform: rotate(-10deg) scale(1.3); }
    }

.balloons03 {
    top: 50%;
    left: 75%;
    transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
    animation: flyaway3 120s -30s infinite;
        -webkit-animation: flyaway3 120s -30s infinite;
    }

@keyframes flyaway3 {
    from { top: 100%; left: 75%; transform: rotate(10deg); }
    to { top: -100px; left: 85%; transform: rotate(10deg); }
    }

@-webkit-keyframes flyaway3 {
    from { top: 100%; left: 75%; -webkit-transform: rotate(10deg); }
    to { top: -100px; left: 85%; -webkit-transform: rotate(10deg); }
    }

.balloons04 {
    top: 99%;
    left: 10%;
    animation: flyaway4 140s -10s infinite;
        -webkit-animation: flyaway4 140s -10s infinite;
    }

@keyframes flyaway4 {
    from { top: 100%; left: 10%; }
    to { top: -100px; left: 6%; }
    }

@-webkit-keyframes flyaway4 {
    from { top: 100%; left: 10%; }
    to { top: -100px; left: 6%; }
    }

.balloons li {
    position: absolute;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: contain;
    }

.balloons li.item01 {
    top: 0;
    left: 62px;
    width: 23px;
    height: 44px;
    background-image: url("/images/temp/ballon01.svg");
    transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

.balloons li.item02 {
    top: 60px;
    left: 30px;
    width: 33px;
    height: 61px;
    background-image: url("/images/temp/ballon02.svg");
    transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

.balloons li.item03 {
    top: 132px;
    left: 0;
    width: 21px;
    height: 38px;
    background-image: url("/images/temp/ballon03.svg");
    transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
    }

.balloons li.item04 {
    top: 42px;
    left: 90px;
    width: 28px;
    height: 56px;
    background-image: url("/images/temp/ballon04.svg");
    transform: rotate(25deg);
        -webkit-transform: rotate(25deg);
    }

.balloons li.item05 {
    top: 100px;
    left: 114px;
    width: 27px;
    height: 52px;
    background-image: url("/images/temp/ballon05.svg");
    transform: rotate(25deg);
        -webkit-transform: rotate(25deg);
    }

.balloons li.item06 {
    top: 147px;
    left: 65px;
    width: 36px;
    height: 73px;
    background-image: url("/images/temp/ballon06.svg");
    transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

.balloons li.item07 {
    top: 34px;
    left: 143px;
    width: 19px;
    height: 37px;
    background-image: url("/images/temp/ballon07.svg");
    transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
    }

.balloons li:nth-child(odd) {
    animation: horizontal1 1s ease-in-out infinite alternate;
        -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
    }

.balloons li:nth-child(even) {
    animation: horizontal2 1.1s ease-in-out infinite alternate;
        -webkit-animation: horizontal2 1.1s ease-in-out infinite alternate;
    }

.balloons li:nth-child(4),
.balloons li:nth-child(5),
.balloons li:nth-child(7) {
    animation: horizontal3 1.1s ease-in-out infinite alternate;
        -webkit-animation: horizontal3 1.1s ease-in-out infinite alternate;
    }

@keyframes horizontal1 {
    from { transform: translateX(-3px); }
    top { transform: translateX(0); }
    }

@keyframes horizontal2 {
    from { transform: translateX(3px); }
    to { transform: translateX(0); }
    }

@keyframes horizontal3 {
    from { transform: translateX(3px) rotate(25deg); }
    to { transform: translateX(0) rotate(30deg); }
    }


/* =#news
-------------------------------------------------------------------------*/
#news main nav li a:hover { border-bottom-color: #00a99d !important; }
#news.root main figure>span:hover { opacity: .8; }
#news.root main figure .text figcaption a:hover { border-bottom-color: #2b494e;; }

#news.root main figure {
    background: url("/images/temp/border.svg") repeat-x 0 100%;
    background-size: 960px auto;
    border: none !important;
    }


/* =.storearea
-------------------------------------------------------------------------*/
.storearea #masthead.hidden {
    transform: translateY(-205px) !important;
        -webkit-transform: translateY(-205px) !important;
    }

.storearea #storeinfo { margin-top: 100px; }
.storearea #storeinfo:after { display: block; }
.storearea #storeinfo>header { margin-bottom: 90px; }

.storearea nav.pagemenu.stores a:after {
    right: 40px;
    transition: right .1s ease-in-out;
    }

.storearea nav.pagemenu.stores a:hover:after { right: 30px; }

.storearea nav.pagemenu.gen a:after { bottom: 1em; }
.storearea nav.pagemenu.gen a:hover:after { bottom: .5em; }

.prices article { margin-bottom: -400px; }
.prices article>section:last-of-type { padding-bottom: 300px; }

.access p.more a:after { right: 30px; }
.access p.more a:hover:after { right: 20px; }

.access article .details+.details nav li a:before { bottom: 15%; }
.access article .details+.details nav li a:hover:before { bottom: 10%; }


/* =Media Query
-------------------------------------------------------------------------*/
@media only screen and (min-device-width:721px) and (orientation:landscape),only screen and (min-width:1024px){
    #colophon nav ul#feature { width: 720px }
    #colophon nav ul#feature li { width: calc(50% - 25px); float: left; margin-right: 50px; }
    #colophon nav ul#feature li:nth-child(even) { margin-right: 0; }
    #root #scenes:before { top: -20px; }
    #root #intro .share { bottom: 160px; }
    }

@media only screen and (min-width:1280px) {
    .gnav { width: calc(100% - 460px); }
    #masthead.shaped .gnav>div.ul>div.li:not(:first-child)>a span,#masthead.shaped .gnav>div.ul>div.li>span span { font-size: 1.7rem; }
    .gnav>div.ul>div.li:not(:first-child) i { letter-spacing: .1em; }
    #colophon nav ul#feature { width: 1200px }
    #colophon nav ul#feature li { width: calc((100% - 90px) / 3); float: left; margin-right: 30px; }
    #colophon nav ul#feature li:nth-child(even) { margin-right: 30px; }
    #colophon nav ul#feature li:last-child { margin-right: 0; }
    #colophon nav ul:not(#feature) li { margin: 0 20px; font-size: 1.8rem; }
    /*p#gotop { bottom: 275px; }*/
    #root #intro .share { bottom: 190px; }
    #root #scenes { width: 1154px; height: 270px; background: url("/images/temp/root/scenes-nav-l.svg") repeat 50% -270px; background-size: 1154px 540px; }
    #root #scenes:before { top: -40px; right: 15px; width: 120px; height: 120px; }
    #root #scenes li { width: 230px; }
    #root #scenes li:nth-child(3) { margin-right: 232px; }
    #root #scenes li a { height: 270px; background-image: url("/images/temp/root/scenes-nav-l.svg"); background-size: 1154px 540px; }
    #root #scenes li:first-child a { background-position: -462px 0; }
    #root #scenes li:nth-child(2) a { background-position: 0 0; }
    #root #scenes li:nth-child(3) a { background-position: -231px 0; }
    #root #scenes li:nth-child(4) a { background-position: -693px 0; }
    #root #scenes li:last-child a { background-position: -924px 0; }
    #root #scenes li:first-child a:hover { background-position: -462px 270px; }
    #root #scenes li:nth-child(2) a:hover { background-position: 0 270px; }
    #root #scenes li:nth-child(3) a:hover { background-position: -231px 270px; }
    #root #scenes li:nth-child(4) a:hover { background-position: -693px 270px; }
    #root #scenes li:last-child a:hover { background-position: -924px 270px; }
    #root #media ul { margin-top: 130px; }
    #root #media ul li a { padding-top: 230px; }
    #root #media ul li a header time { font-size: 1.5rem; }
    #root #media ul li a header figcaption { font-size: 1.7rem; }
    #root #media:after { transform: translateY(-16vw); -webkit-transform: translateY(-16vw);
    }

/* IE11,Edge */
_:-ms-lang(x),.gnav>div.ul>div.li i { height: 34px; line-height: 34px; }

/* IE11 */
_:lang(x)::-ms-backdrop,.headline dl,
_:lang(x)::-ms-backdrop,#news.root main figure {
    background: none;
    border-bottom: 2px solid #2b494e !important;
    }

_:lang(x)::-ms-backdrop,p.more a { line-height: 75px; }
_:lang(x)::-ms-backdrop,p.more a:after { top: -3px; }

/* Edge */
_:-ms-lang(x)::backdrop,.selector {  }

/* EOF
-------------------------------------------------------------------------*/