body, html {
height: 100%
}
html.is-tablet {
font-size: 56.25%
}
html.is-wait {
cursor: wait
}
html.is-wait * {
cursor: wait!important
}
html.is-transition {
cursor: wait
}
html.is-transition body * {
pointer-events: none!important
}
html.is-langChange {
cursor: wait
}
html.is-langChange body * {
pointer-events: none!important
}
body #wrapper {
color: #fff;
background-color: #252525;
font-size: 1rem;
line-height: 1.5;
letter-spacing: .3em;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
overflow-y: scroll;
overscroll-behavior-y: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body #wrapper .p-roll *{ color: #fff; font-size: 1rem; line-height: 1.5;
line-height: 1.5; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}
.page-content {
position: relative;
z-index: 10
}
.p-split {
display: inline-block
}
.js-target--parallax {
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
br.mq {
display: none
}
.l-container {
width: 100%;
max-width: 1000px
}
.l-container, .l-middle-container {
margin-right: auto;
margin-left: auto
}
.l-middle-container {
max-width: 82vw;
width: 1400px
}
.l-wide-container {
width: 87.5vw;
margin-right: auto;
margin-left: auto
}
@media screen and (min-width:1601px) {
.l-wide-container {
width: calc(100vw - 200px)
}
}
@media screen and (max-width:1140px) {
.l-container {
max-width: 87.5vw
}
}
@media screen and (max-width:767px) {
.l-middle-container {
max-width: 100%
}
.l-middle-container, .l-wide-container {
width: 100%;
padding-right: 25px;
padding-left: 25px
}
}
.l-indicator {
position: fixed;
height: 36px;
right: 0;
left: 0;
bottom: calc(6.25vw - 13px);
margin: 0 auto;
pointer-events: none;
z-index: 130;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@media screen and (min-width:1601px) {
.l-indicator {
bottom: 87px
}
}
@media screen and (max-width:767px) {
.l-indicator {
height: 30px;
bottom: 30%
}
}
.p-indicator {
position: absolute;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 120px;
bottom: 13px;
right: 0;
color: #1a1a1a;
-webkit-transition: color .6s;
transition: color .6s;
line-height: 1
}
.p-indicator, .p-indicator__child {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.p-indicator__child {
position: relative;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
font-size: 1rem;
letter-spacing: .5em;
overflow: hidden
}
.p-indicator__child__inner:first-of-type {
position: absolute;
width: 100%;
height: 100%;
top: -1.2rem;
left: 0;
white-space: nowrap
}
.p-indicator__child__inner:nth-of-type(3) {
position: absolute;
width: 100%;
height: 100%;
top: 1.2rem;
left: 0;
white-space: nowrap
}
.p-indicator__parent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
font-size: .8rem;
letter-spacing: .5em;
padding-left: .5em
}
.p-indicator__line {
position: relative;
width: 40px;
height: 1px;
background-color: rgba(26,26,26,.1)
}
.p-indicator__line, .p-indicator__line__inner {
-webkit-transition: background-color .6s;
transition: background-color .6s
}
.p-indicator__line__inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(26,26,26,.5);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
@media screen and (max-width:767px) {
}
.p-stage__menu {
display: none
}
.p-pageCover {
position: fixed;
width: 100%;
height: 110%;
top: 0;
left: 0;
background-color: #000;
z-index: 130;
pointer-events: none;
opacity: 0
}
@media screen and (max-width:767px) {
.p-pageCover__text {
font-size: 1.4rem;
padding-top: 0
}
}
.p-chasePointer {
position: fixed;
top: 0;
left: 0;
z-index: 160;
pointer-events: none;
mix-blend-mode: exclusion
}
.p-chasePointer__bg, .p-chasePointer__inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0
}
.p-chasePointer__bg {
z-index: 20;
-webkit-transition: opacity .4s;
transition: opacity .4s
}
.p-chasePointer__bg, .p-chasePointer__bg--02 {
background-color: #fff;
border-radius: 50%;
overflow: hidden
}
.p-chasePointer__bg--02 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .6;
-webkit-transform: scale(0);
transform: scale(0)
}
.p-chasePointer__bar {
position: absolute;
top: 50%;
right: 0;
left: 0;
width: 30%;
height: 2px;
margin: 0 auto;
border-radius: 2px;
z-index: 60
}
.p-chasePointer__bar__inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
z-index: 60;
-webkit-transition: -webkit-transform .5s cubic-bezier(.6, 0, .3, 1);
transition: -webkit-transform .5s cubic-bezier(.6, 0, .3, 1);
transition: transform .5s cubic-bezier(.6, 0, .3, 1);
transition: transform .5s cubic-bezier(.6, 0, .3, 1), -webkit-transform .5s cubic-bezier(.6, 0, .3, 1)
}
.p-chasePointer__bar__inner:nth-of-type(2) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
@media screen and (max-width:767px) {
}
.p-alert {
display: none
}
html.is-mobile .p-alert, html.is-tablet .p-alert {
position: fixed;
width: 100%;
height: 100%;
top: 1px;
left: 1px;
margin-top: -1px;
margin-left: -1px;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
background-color: #252525;
z-index: 190
}
html.is-mobile .p-alert__text, html.is-tablet .p-alert__text {
position: absolute;
width: 100%;
top: 50%;
left: 0;
text-align: center;
line-height: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
html.is-tablet .p-alert__text {
font-size: 2.5rem
}
html.is-mobile .p-alert__text {
font-size: 1.4rem
}
@media only screen and (orientation:portrait) {
html.is-tablet #wrapper {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden
}
html.is-tablet .p-alert {
display: block;
background-image: url(../img/common/bg_plan.jpg)
}
}
@media only screen and (orientation:landscape) {
html.is-mobile #wrapper {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden
}
html.is-mobile .p-alert {
display: block;
background-image: url(../img/common/bg_plan.jpg)
}
}
@media screen and (max-width:767px) {
}
body.is-stage-hide .js-canvas__info, body.is-stage-hide .p-canvas__bg, body.is-stage-hide canvas {
display: none!important
}
#top .l-canvas, #top .p-canvas {
pointer-events: none
}
.p-canvas {
z-index: -1
}
.p-canvas, .p-canvas__info {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0
}
.p-timer {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 120px;
top: 0;
right: 0;
color: #fff;
line-height: 3
}
.p-timer__child {
position: relative;
font-size: .6rem;
letter-spacing: .5em
}
.p-timer__child div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.p-timer__inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
background-color: hsla(0,0%,100%,.5)
}
.p-timer__line {
position: relative;
width: 40px;
height: 1px;
background-color: hsla(0,0%,100%,.3)
}
@media screen and (max-width:767px) {
.p-timer {
width: 87.5px;
left: -2px;
margin-right: auto;
margin-left: auto
}
.p-timer__line {
margin-top: -2px;
width: 30px
}
.p-timer__child {
font-size: .8rem
}
}
.p-control {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: fixed;
top: 50%;
right: 0;
left: 0;
opacity: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
z-index: 80
}
.p-control__btn {
position: relative;
width: 90px;
padding-top: 20px;
padding-bottom: 20px;
line-height: 1;
cursor: pointer;
pointer-events: all
}
.p-control__btn.prev .p-control__line {
left: 100%;
-webkit-transform-origin: right;
transform-origin: right
}
.p-control__btn.prev .p-control__text {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start
}
.p-control__btn.next {
text-align: right
}
.p-control__btn.next .p-control__line {
right: 100%;
-webkit-transform-origin: left;
transform-origin: left
}
.p-control__btn.next .p-control__text {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
.p-control__arrow {
display: none
}
.p-control__line {
position: absolute;
width: 12.5vw;
height: 1px;
top: 50%;
background: #fff;
margin-top: -3px;
opacity: .3;
will-change: transform;
pointer-events: none
}
.p-control__text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
will-change: opacity;
font-size: .6rem;
color: hsla(0,0%,100%,.6)
}
.p-control .p-split {
display: inline-block;
min-width: 1em;
text-align: center
}
@media screen and (max-width:767px) {
.p-control {
top: auto;
bottom: 5px;
-webkit-transform: none;
transform: none
}
.p-control__btn.prev {
padding-left: 25px;
margin-left: -25px
}
.p-control__btn.next {
padding-right: 25px;
margin-right: -25px
}
.p-control__arrow {
display: block;
position: absolute;
bottom: 20px
}
.p-control__arrow.prev {
left: 25px
}
.p-control__arrow.next {
right: 25px
}
.p-control__arrow svg {
width: 9px;
height: 9px
}
.p-control__arrow__st {
fill: none;
stroke: #fff;
stroke-miterlimit: 10
}
.p-control__text {
opacity: 0;
visibility: hidden;
font-size: .7rem
}
.p-control__line {
display: none
}
}
.p-drag {
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
pointer-events: all;
z-index: 70
}
.p-drag, .p-toggle-wrapper {
position: absolute;
top: 50%;
border-radius: 50%
}
.p-toggle-wrapper {
right: 0;
left: 0;
margin: 0 auto
}
.p-toggle {
cursor: -webkit-grab;
cursor: grab
}
.p-toggle, .p-toggle__inner {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%
}
.p-toggle__inner {
-webkit-transition: opacity .5s linear;
transition: opacity .5s linear;
opacity: 0
}
.p-toggle__inner:before {
display: block;
width: 100%;
height: 100%;
content: "";
position: absolute;
border: 1px solid hsla(0,0%,100%,.4);
border-radius: 50%;
-webkit-transform: scale(1.4) translateZ(1px);
transform: scale(1.4) translateZ(1px);
-webkit-transition: -webkit-transform .6s cubic-bezier(.25, .45, .45, 1);
transition: -webkit-transform .6s cubic-bezier(.25, .45, .45, 1);
transition: transform .6s cubic-bezier(.25, .45, .45, 1);
transition: transform .6s cubic-bezier(.25, .45, .45, 1), -webkit-transform .6s cubic-bezier(.25, .45, .45, 1)
}
.p-toggle__point {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin: 0 auto;
background-color: #fff;
border-radius: 50%;
opacity: 0;
-webkit-transition: opacity .5s linear;
transition: opacity .5s linear
}
.p-toggle:hover .p-toggle__inner {
-webkit-transition: opacity .4s linear;
transition: opacity .4s linear;
opacity: 1
}
.p-toggle:hover .p-toggle__inner:before {
-webkit-transform: scale(1.2) translateZ(1px);
transform: scale(1.2) translateZ(1px);
-webkit-transition: -webkit-transform .5s cubic-bezier(.25, .45, .45, 1);
transition: -webkit-transform .5s cubic-bezier(.25, .45, .45, 1);
transition: transform .5s cubic-bezier(.25, .45, .45, 1);
transition: transform .5s cubic-bezier(.25, .45, .45, 1), -webkit-transform .5s cubic-bezier(.25, .45, .45, 1)
}
.p-drag:hover .p-toggle__point {
opacity: 1;
-webkit-transition: opacity .3s linear;
transition: opacity .3s linear
}
body.is-slide__on-drag #canvasContainer a {
pointer-events: none
}
body.is-slide__on-drag .p-drag, body.is-slide__on-drag .p-toggle {
cursor: -webkit-grabbing;
cursor: grabbing
}
body.is-slide__on-drag .p-toggle {
pointer-events: none
}
body.is-slide__on-drag .p-toggle:hover .p-toggle__inner:before {
border-color: transparent;
-webkit-transform: scale(.75) translateZ(1px);
transform: scale(.75) translateZ(1px)
}
body.is-slide__on-drag .p-toggle__inner {
opacity: 1
}
body.is-slide__on-drag .p-toggle__inner:before {
border-color: transparent;
background-color: hsla(0,0%,100%,.3);
-webkit-transition: background-color .7s linear, border-color .7s linear, -webkit-transform .7s cubic-bezier(.19, 1, .22, 1);
transition: background-color .7s linear, border-color .7s linear, -webkit-transform .7s cubic-bezier(.19, 1, .22, 1);
transition: transform .7s cubic-bezier(.19, 1, .22, 1), background-color .7s linear, border-color .7s linear;
transition: transform .7s cubic-bezier(.19, 1, .22, 1), background-color .7s linear, border-color .7s linear, -webkit-transform .7s cubic-bezier(.19, 1, .22, 1);
-webkit-transform: scale(.75);
transform: scale(.75)
}
body.is-slide__on-drag .p-toggle__point {
opacity: 1
}
html.is-mobile .p-drag, html.is-tablet .p-drag {
display: none
}
.p-pie--works {
position: fixed;
width: 100vw
}
.p-pie--works, .p-pie__circle {
height: 100%;
top: 1px;
left: 0;
margin-top: -1px;
z-index: 100;
pointer-events: none
}
.p-pie__circle {
position: absolute;
width: 100%;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg)
}
.p-pie__circle.works {
opacity: .4
}
.p-pie__circle.back {
opacity: .15
}
.p-roll {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: fixed;
top: 50%;
left: 50%;
height: 3.2vh;
color: #fff;
padding-top: 5px;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
pointer-events: none;
z-index: 90
}
.p-roll__list {
padding-top: 1.6vh;
will-change: transform
}
.p-roll__list__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
pointer-events: none;
will-change: opacity
}
.p-roll__list__item a {
display: block;
padding-top: .5em;
padding-left: .4em;
letter-spacing: .5em;
line-height: 1.7
}
.p-roll__list__item div {
height: 150px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center
}
.p-roll__list__item.is-current a {
pointer-events: all
}
body.is-slide__on-drag .p-roll__list__item {
pointer-events: none!important
}
@media screen and (max-width:767px) {
.p-roll {
padding-top: 0
}
.p-roll__list__item div {
width: 300px
}
}