html,
body,
article,
section,
nav,
aside,
h1,
h2,
h3,
h4,
h5,
h6,
header,
footer,
address,
p,
ol,
ul,
li,
dl,
dt,
dd,
div,
a,
strong,
small,
sup,
span,
img,
iframe,
embed,
object,
video,
audio,
table,
tr,
td,
th,
canvas,
svg {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
html {
cursor: default;
line-height: 1;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent
}
::-moz-selection {
background-color: #eee;
color: #000;
text-shadow: none
}
::selection {
background-color: #eee;
color: #000;
text-shadow: none
}
ol,
ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
article,
section,
nav,
aside,
header,
footer {
display: block
}
video,
audio,
canvas {
display: inline-block
}
audio:not([controls]) {
display: none;
height: 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
strong {
font-weight: inherit
}
strong {
font-weight: bolder
}
sub,
sup {
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
svg {
fill: currentColor
}
svg:not(:root) {
overflow: hidden
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
a:active,
a:hover {
outline-width: 0
}
a {
-ms-touch-action: manipulation;
touch-action: manipulation
}
img,
a {
-webkit-touch-callout: none;
-webkit-user-select: none
}
head {
font-family: large
}
html {
width: 100%;
height: 100%;
background-color: #fff;
overflow-x: hidden;
overflow-y: scroll;
overscroll-behavior: none;
font-family: Roboto, sans-serif;
}
html.isStart {
height: auto;
overflow-y: scroll
}
html.isStart.isSlide {
height: 100%
}
html.isStart.isSlide.mac {
overflow-y: hidden
}
body {
width: 100%;
height: 100%;
overflow: hidden
}
.isStart body {
height: auto
}
.isStart.isSlide body {
height: 100%
}
.isStart.ios main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
header {
visibility: hidden
}
.isStart header {
visibility: visible
}
a:link,
a:hover,
a:active {
color: #000;
text-decoration: none
}
a:visited {
color: #000
}
.header a,
.sns a {
transition: color .5s linear .5s
}
.isSlide .header a,
.isZoomIn .header a,
.isSlide .sns a,
.isZoomIn .sns a,
.slideNavi a {
color: #fff
}
.isSlide .header a:link,
.isZoomIn .header a:link,
.isSlide .sns a:link,
.isZoomIn .sns a:link,
.slideNavi a:link,
.isSlide .header a:hover,
.isZoomIn .header a:hover,
.isSlide .sns a:hover,
.isZoomIn .sns a:hover,
.slideNavi a:hover,
.isSlide .header a:active,
.isZoomIn .header a:active,
.isSlide .sns a:active,
.isZoomIn .sns a:active,
.slideNavi a:active,
.isSlide .header a:visited,
.isZoomIn .header a:visited,
.isSlide .sns a:visited,
.isZoomIn .sns a:visited,
.slideNavi a:visited {
color: #fff
}
.isList .header a,
.isZoomOut .header a,
.isList .sns a,
.isZoomOut .sns a {
color: #000
}
.isList .header a:link,
.isZoomOut .header a:link,
.isList .sns a:link,
.isZoomOut .sns a:link,
.isList .header a:hover,
.isZoomOut .header a:hover,
.isList .sns a:hover,
.isZoomOut .sns a:hover,
.isList .header a:active,
.isZoomOut .header a:active,
.isList .sns a:active,
.isZoomOut .sns a:active,
.isList .header a:visited,
.isZoomOut .header a:visited,
.isList .sns a:visited,
.isZoomOut .sns a:visited {
color: #000
}
.termination {
letter-spacing: 0!important
}
.inlineBlock {
display: inline-block
}
.slash:before {
content: "";
display: block;
position: absolute;
top: 0;
width: 1px;
height: 27px;
background-color: #000;
-ms-transform: rotate(22deg) scaleY(1);
transform: rotate(22deg) scaleY(1)
}
.slash.sns:before {
transition: background-color .5s linear .5s
}
.isSlide .slash.header:before,
.isZoomIn .slash.header:before,
.isSlide .slash.sns:before,
.isZoomIn .slash.sns:before,
.slash.slideNavi_count:before {
background-color: #fff
}
.isList .slash.header:before,
.isZoomOut .slash.header:before,
.isList .slash.sns:before,
.isZoomOut .slash.sns:before {
background-color: #000
}
.underline {
position: relative
}
.underline:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 1px;
background-color: #000;
-ms-transform: scaleX(0);
transform: scaleX(0);
-ms-transform-origin: 0 0;
transform-origin: 0 0;
transition: transform .3s cubic-bezier(.645, .045, .175, 1) 0s
}
.pc .underline:hover:after {
-ms-transform: none;
transform: none
}
.header .underline:after,
.sns .underline:after {
transition: transform .3s cubic-bezier(.645, .045, .175, 1) 0s, background-color .5s linear .5s
}
.isSlide .header .underline:after,
.isZoomIn .header .underline:after,
.isSlide .sns .underline:after,
.isZoomIn .sns .underline:after {
background-color: #fff
}
.isList .header .underline:after,
.isZoomOut .header .underline:after,
.isList .sns .underline:after,
.isZoomOut .sns .underline:after {
background-color: #000
}
@keyframes text_scaleY {
0% {
opacity: 1;
transform: none
}
20% {
opacity: 0;
transform: scaleY(0)
}
100% {
opacity: 1;
transform: none
}
}
.three {
position: fixed;
top: 0;
left: 0;
z-index: 30;
pointer-events: none
}
.isLoading .three {
display: none
}
.header {
display: block;
position: fixed;
top: 30px;
left: 40px;
z-index: 110;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: transform .8s cubic-bezier(.19, 1, .22, 1) 0s, visibility .8s linear 0s
}
.isLoading .header,
.isOpening .header,
.isSlideVimeoStart .header {
-ms-transform: translateY(-120px);
transform: translateY(-120px);
visibility: hidden;
transition: transform .6s cubic-bezier(.755, .05, .855, .06) 0s, visibility .6s linear 0s
}
.header:before {
left: 120px;
transition: transform .4s cubic-bezier(.77, 0, .175, 1) .5s, background-color .5s linear .5s
}
.isSlide.isSlideHome .header:before {
transition: transform .2s cubic-bezier(.165, .84, .44, 1) .2s, background-color .5s linear .5s;
-ms-transform: rotate(22deg) scaleY(0);
transform: rotate(22deg) scaleY(0)
}
.header_home {
margin-top: 8px;
display: block;
font-size: 14px;
font-weight: 400;
letter-spacing: .4em;
overflow: hidden
}
.isSlide.isSlideHome .header_home {
pointer-events: none
}
.isStart.edge .header_home {
transition: all .5s linear .5s!important
}
.header_home>div {
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
transition: transform .4s cubic-bezier(.165, .84, .44, 1) .4s
}
.isSlide.isSlideHome .header_home>div {
transition: transform .3s cubic-bezier(.895, .03, .685, .22) .3s;
-ms-transform: translateX(-200px);
transform: translateX(-200px)
}
.header_about {
cursor: pointer
}
.isStart.edge .header_about {
transition: all .5s linear .5s!important
}
.header_about_container {
position: absolute;
display: block;
top: 1px;
left: 135px;
width: 97px;
margin-top: 8px;
font-size: 14px;
letter-spacing: .2em;
transition: transform .5s cubic-bezier(.645, .045, .355, 1) .2s
}
.isSlide.isSlideHome .header_about_container {
transition: transform .5s cubic-bezier(.645, .045, .355, 1) .3s;
-ms-transform: translateX(-135px);
transform: translateX(-135px)
}
.header_about_text {
display: block
}
.header_about_arrow {
display: block;
position: absolute;
overflow: hidden;
right: 0;
bottom: 4px;
width: 45px;
height: 7px
}
.header_about_arrow>svg {
display: block;
width: 100%;
height: 100%;
-ms-transform: translateX(-12px);
transform: translateX(-12px);
transition: transform .3s cubic-bezier(.165, .84, .44, 1) 0s
}
.header_about_arrow>svg>polyline {
fill: #000;
display: block;
transition: fill .5s linear .5s
}
.isSlide .header_about_arrow>svg>polyline,
.isZoomIn .header_about_arrow>svg>polyline {
fill: #fff
}
.isList .header_about_arrow>svg>polyline,
.isZoomOut .header_about_arrow>svg>polyline {
fill: #000
}
.pc .header_about:hover .header_about_arrow>svg {
-ms-transform: translateX(0);
transform: translateX(0)
}
.sns {
position: fixed;
top: 30px;
right: 40px;
z-index: 110;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: transform .8s cubic-bezier(.19, 1, .22, 1) 0s, visibility .8s linear 0s
}
.isLoading .sns,
.isOpening .sns,
.isSlideVimeoStart .sns {
-ms-transform: translateY(-150px);
transform: translateY(-150px);
visibility: hidden;
transition: transform .6s cubic-bezier(.755, .05, .855, .06) 0s, visibility .6s linear 0s
}
.sns:before {
right: 55px
}
.sns>a {
margin-top: 8px;
margin-left: 30px;
display: inline-block;
position: relative;
font-size: 14px;
letter-spacing: .2em
}
.list {
position: relative;
margin-top: 120px;
margin-left: auto;
margin-right: auto;
width: 1095px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-ms-transform: translateX(0);
transform: translateX(0);
visibility: hidden
}
.primary.isSlide .list {
visibility: hidden!important
}
.list_home {
position: relative;
display: none
}
.list_home_arrow {
position: absolute;
top: 0
}
.list_item {
margin-bottom: 60px;
width: 325px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none
}
.list_item.isHide {
visibility: hidden;
opacity: 0
}
.isList .list_item {
pointer-events: auto
}
.list_item>a {
display: block
}
.list_num {
position: relative;
top: 7px;
font-size: 22px;
font-weight: 200;
letter-spacing: .05em;
height: 25px;
overflow: hidden;
z-index: -1
}
.list_num>span {
display: block;
height: 25px;
transition: transform .5s cubic-bezier(.215, .61, .355, 1) .1s
}
.list_item.isActive .list_num>span,
.pc .list_item>a:hover .list_num>span {
transition: transform .5s cubic-bezier(.215, .61, .355, 1) 0s;
-ms-transform: translateY(25px);
transform: translateY(25px)
}
.list_thumb {
width: 100%;
pointer-events: none;
transition: opacity .2s cubic-bezier(.39, .575, .565, 1) .5s
}
.list_thumb>img {
display: block;
width: 100%;
height: auto;
transition: opacity .2s cubic-bezier(.39, .575, .565, 1) 0s
}
.pc .list_item>a:hover .list_thumb {
opacity: 0;
transition: opacity .1s linear 0s
}
.list_item.isActive .list_thumb>img {
opacity: 0
}
.list_title {
padding-top: 5px;
font-size: 19px;
font-weight: 400;
letter-spacing: .05em;
line-height: 1.3;
overflow: hidden;
z-index: -1
}
.isList .list_title {
pointer-events: none
}
.list_title>span {
display: block;
height: 100%;
transition: transform .5s cubic-bezier(.215, .61, .355, 1) .1s
}
.list_item.isActive .list_title>span,
.pc .list_item>a:hover .list_title>span {
transition: transform .5s cubic-bezier(.215, .61, .355, 1) 0s;
-ms-transform: translateY(-120%);
transform: translateY(-120%)
}
.about {
padding-top: 50px;
margin-left: auto;
margin-right: auto;
width: 1100px;
visibility: hidden
}
.primary.isSlide .about {
visibility: hidden!important
}
.about_position {
display: block;
font-size: 28px;
font-weight: 400;
letter-spacing: .55em
}
.about_name {
display: block;
margin-top: 20px;
font-size: 60px;
letter-spacing: 1.58em;
white-space: nowrap
}
.about_from {
margin-top: 35px;
font-size: 20px;
font-weight: 400;
letter-spacing: .25em
}
.about_from>p {
letter-spacing: .3em
}
.about_from>a {
margin-top: 5px;
display: inline-block
}
.about_description, .about_office, .about_quote {
margin-top: 20px;
font-size: 15px;
font-weight: 400;
letter-spacing: .1em;
line-height: 1.9;
text-align:right
}
.about_sns {
position: relative;
display: none
}
.about_sns_facebook,
.about_sns_vimeo {
display: block
}
.about_sns_vimeo {
position: absolute;
top: 0
}
.about_sns_arrow {
position: absolute;
top: 0;
left: 17vw;
width: 6.1vw
}
.about_contact {
margin-top: 20px;
font-size: 20px;
font-weight: 200;
letter-spacing: .1em;
line-height: 1.7
}
.about_contact>equal{
display: inline-block;
width: 3.5em
}
.about_contact>a {
font-size: 20px
}
.backToTop {
position: relative;
margin-top: 100px;
margin-bottom: 100px;
margin-left: auto;
margin-right: auto;
width: 50px;
height: 35px;
cursor: pointer;
transition: transform .4s cubic-bezier(.895, .03, .685, .22) 0s, opacity .4s linear 0s, visibility .4s linear 0s;
-ms-transform: translateY(100px);
transform: translateY(100px);
visibility: hidden;
opacity: 0
}
.isList .backToTop.isShow {
transition: transform .4s cubic-bezier(.165, .84, .44, 1) .4s, opacity .2s linear .4s, visibility .2s linear .4s;
-ms-transform: translateY(0);
transform: translateY(0);
visibility: visible;
opacity: 1
}
.backToTop>span {
display: block;
width: 50px;
height: 35px
}
.backToTop>span:before {
content: "";
position: absolute;
top: 5px;
left: 25px;
display: block;
width: 23px;
height: 23px;
border-left: solid 2px #000;
border-top: solid 2px #000;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.isLoop .backToTop>span {
animation: backToTop_loop .6s cubic-bezier(.175, .885, .32, 1.275) 0s
}
.backToTop.isHover>span {
animation: backToTop_hover .4s cubic-bezier(.175, .885, .32, 1.275) 0s!important
}
@keyframes backToTop_loop {
0% {
transform: none
}
20% {
transform: translateY(15px)
}
100% {
transform: none
}
}
@keyframes backToTop_hover {
0% {
transform: none
}
20% {
transform: translateY(15px)
}
100% {
transform: none
}
}
.scroller {
position: absolute;
top: 0;
left: 0;
z-index: 10000000;
width: 100%;
height: 10000px;
background-color: transparent
}
.menuTrigger {
position: fixed;
top: 50%;
left: 40px;
z-index: 110;
margin-top: -15px;
width: 30px;
height: 30px;
transition: transform .8s cubic-bezier(.19, 1, .22, 1) 0s, visibility .8s linear 0s
}
.isLoading .menuTrigger,
.isOpening .menuTrigger,
.isSlideVimeoStart .menuTrigger {
-ms-transform: translateX(-100px);
transform: translateX(-100px);
visibility: hidden;
transition: transform .6s cubic-bezier(.755, .05, .855, .06) 0s, visibility .6s linear 0s
}
.menuTrigger_open,
.menuTrigger_close {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
cursor: pointer
}
.menuTrigger_open>span,
.menuTrigger_close>span {
position: absolute;
display: block
}
.menuTrigger_open>span:before,
.menuTrigger_close>span:before {
content: "";
width: 100%;
height: 100%;
display: block
}
.menuTrigger_open {
pointer-events: none
}
.isSlide .menuTrigger_open {
pointer-events: auto
}
.menuTrigger_open>span {
left: 0;
width: 100%;
height: 3px
}
.menuTrigger_open>span:before {
background-color: #fff
}
.menuTrigger_open>span:nth-child(1) {
top: 3px
}
.menuTrigger_open>span:nth-child(2) {
top: 13px
}
.menuTrigger_open>span:nth-child(3) {
top: 23px
}
.isSlide .menuTrigger_open>span {
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform: none;
transform: none
}
.isSlide .menuTrigger_open>span:nth-child(1) {
transition: transform .3s cubic-bezier(.77, 0, .355, 1) 0s
}
.isSlide .menuTrigger_open>span:nth-child(2) {
transition: transform .3s cubic-bezier(.77, 0, .355, 1) .1s
}
.isSlide .menuTrigger_open>span:nth-child(3) {
transition: transform .3s cubic-bezier(.77, 0, .355, 1) .2s
}
.menuTrigger_open>span {
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-ms-transform: scaleX(0);
transform: scaleX(0)
}
.menuTrigger_open>span:before {
animation: none
}
.menuTrigger_open>span:nth-child(1) {
transition: transform .2s cubic-bezier(.645, .045, .175, 1) 0s
}
.menuTrigger_open>span:nth-child(2) {
transition: transform .2s cubic-bezier(.645, .045, .175, 1) .1s
}
.menuTrigger_open>span:nth-child(3) {
transition: transform .2s cubic-bezier(.645, .045, .175, 1) .2s
}
.isLoop .menuTrigger_open>span:nth-child(1):before {
animation: menuTrigger_loopX .5s cubic-bezier(.645, .045, .175, 1) 0s
}
.isLoop .menuTrigger_open>span:nth-child(2):before {
animation: menuTrigger_loopX .5s cubic-bezier(.645, .045, .175, 1) .1s
}
.isLoop .menuTrigger_open>span:nth-child(3):before {
animation: menuTrigger_loopX .5s cubic-bezier(.645, .045, .175, 1) .2s
}
.menuTrigger_open.isHover>span:nth-child(1):before {
animation: menuTrigger_hoverX .4s cubic-bezier(.645, .045, .175, 1) 0s
}
.menuTrigger_open.isHover>span:nth-child(2):before {
animation: menuTrigger_hoverX .4s cubic-bezier(.645, .045, .175, 1) .1s
}
.menuTrigger_open.isHover>span:nth-child(3):before {
animation: menuTrigger_hoverX .4s cubic-bezier(.645, .045, .175, 1) .2s
}
.menuTrigger_close {
-ms-transform: rotate(45deg);
transform: rotate(45deg);
pointer-events: none
}
.isList .menuTrigger_close {
pointer-events: auto
}
.menuTrigger_close>span:before {
background-color: #000
}
.menuTrigger_close>span:nth-child(1) {
width: 100%;
height: 3px;
top: 13px;
left: 0
}
.menuTrigger_close>span:nth-child(2) {
width: 3px;
height: 100%;
top: 0;
left: 13px
}
.isList .menuTrigger_close>span:nth-child(1) {
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
-ms-transform: translateY(.5px) scaleX(1);
transform: translateY(.5px) scaleX(1);
transition: transform .3s cubic-bezier(.77, 0, .355, 1) 0s
}
.isList .menuTrigger_close>span:nth-child(2) {
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-ms-transform: translateX(.5px) scaleY(1);
transform: translateX(.5px) scaleY(1);
transition: transform .3s cubic-bezier(.77, 0, .355, 1) .1s
}
.menuTrigger_close>span:before {
animation: none
}
.menuTrigger_close>span:nth-child(1) {
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-ms-transform: translateY(.5px) scaleX(0);
transform: translateY(.5px) scaleX(0);
transition: transform .2s cubic-bezier(.645, .045, .175, 1) 0s
}
.menuTrigger_close>span:nth-child(2) {
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-ms-transform: translateX(.5px) scaleY(0);
transform: translateX(.5px) scaleY(0);
transition: transform .2s cubic-bezier(.645, .045, .175, 1) .15s
}
.isLoop .menuTrigger_close>span:nth-child(1):before {
animation: menuTrigger_loopX .6s cubic-bezier(.645, .045, .175, 1) 0s
}
.isLoop .menuTrigger_close>span:nth-child(2):before {
animation: menuTrigger_loopY .6s cubic-bezier(.645, .045, .175, 1) .15s
}
.menuTrigger_close.isHover>span:nth-child(1):before {
animation: menuTrigger_hoverX .5s cubic-bezier(.645, .045, .175, 1) 0s!important
}
.menuTrigger_close.isHover>span:nth-child(2):before {
animation: menuTrigger_hoverY .5s cubic-bezier(.645, .045, .175, 1) .15s!important
}
@keyframes menuTrigger_loopX {
0% {
transform-origin: 100% 0;
transform: none
}
45% {
transform-origin: 100% 0;
transform: scaleX(0)
}
55% {
transform-origin: 0 0;
transform: scaleX(0)
}
100% {
transform-origin: 0 0;
transform: none
}
}
@keyframes menuTrigger_hoverX {
0% {
transform-origin: 100% 0;
transform: none
}
45% {
transform-origin: 100% 0;
transform: scaleX(0)
}
55% {
transform-origin: 0 0;
transform: scaleX(0)
}
100% {
transform-origin: 0 0;
transform: none
}
}
@keyframes menuTrigger_loopY {
0% {
transform-origin: 0 100%;
transform: none
}
45% {
transform-origin: 0 100%;
transform: scaleY(0)
}
55% {
transform-origin: 0 0;
transform: scaleY(0)
}
100% {
transform-origin: 0 0;
transform: none
}
}
@keyframes menuTrigger_hoverY {
0% {
transform-origin: 0 100%;
transform: none
}
45% {
transform-origin: 0 100%;
transform: scaleY(0)
}
55% {
transform-origin: 0 0;
transform: scaleY(0)
}
100% {
transform-origin: 0 0;
transform: none
}
}
.slideHome {
position: absolute;
top: 0;
left: 0;
z-index: 105;
width: 100%;
height: 100%;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
color: #fff;
pointer-events: none;
display: none;
visibility: hidden
}
.slideHome::-moz-selection {
color: rgba(255, 255, 255, 0);
background-color: rgba(255, 255, 255, .5)
}
.slideHome::selection {
color: rgba(255, 255, 255, 0);
background-color: rgba(255, 255, 255, .5)
}
.primary .slideHome {
display: -ms-flexbox;
display: flex
}
.primary.isList .slideHome {
display: none
}
.isStart .slideHome {
visibility: visible
}
.primary.pc .slideHome {
color: rgba(255, 255, 255, 0)
}
.slideHome_container {
position: relative;
width: 900px;
pointer-events: none
}
.isSlideNavi.isSlideHome .slideHome_container {
pointer-events: auto
}
.isDrawingL .slideHome_container,
.isDrawingS .slideHome_container {
margin-bottom: 0
}
.isDrawingL .slideHome_container {
width: 900px
}
.isDrawingS .slideHome_container {
width: 750px
}
.slideHome_position {
display: block;
font-weight: 400;
font-size: 24px;
letter-spacing: .6em
}
.isDrawingL .slideHome_position,
.isDrawingS .slideHome_position {
font-size: 24px;
letter-spacing: .6em;
text-align: left
}
.slideHome_name {
display: block;
margin-top: 30px;
font-weight: 400;
font-size: 50px;
letter-spacing: 1.35em;
white-space: nowrap
}
.edge .slideHome_name {
letter-spacing: 1.33em
}
.isDrawingL .slideHome_name,
.isDrawingS .slideHome_name {
margin-top: 30px;
font-weight: 400;
font-size: 50px;
line-height: 1;
text-align: left
}
.isDrawingL .slideHome_name,
.isDrawingL.edge .slideHome_name {
letter-spacing: 1.33em
}
.isDrawingL.firefox .slideHome_name {
letter-spacing: 1.35em
}
.isDrawingS .slideHome_name,
.isDrawingS.edge .slideHome_name {
letter-spacing: 1em
}
.isDrawingS.firefox .slideHome_name {
letter-spacing: 1.02em
}
.slideHome_name>br {
display: none
}
.isDrawingL .slideHome_name>br,
.isDrawingS .slideHome_name>br {
display: none
}
.isDrawingL .slideHome_termination {
letter-spacing: 1.29em
}
.isDrawingS .slideHome_termination {
letter-spacing: 1em
}
.slideHome_from {
display: block;
margin-top: 20px;
margin-bottom: 15px;
text-align: right;
font-size: 14px;
letter-spacing: .25em
}
.isDrawingL .slideHome_from,
.isDrawingS .slideHome_from {
margin-top: 20px;
text-align: right;
font-size: 14px;
letter-spacing: .25em;
line-height: 1
}
.slideHome_from>br {
display: none
}
.isDrawingL .slideHome_from>br,
.isDrawingS .slideHome_from>br {
display: none
}
.slideWorks {
position: absolute;
top: 0;
left: 0;
z-index: 105;
width: 100%;
height: 100%;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
color: #fff;
pointer-events: none;
font-weight: 200;
display: none;
visibility: hidden;
transition: visibility .2s linear 0s, opacity .2s linear 0s
}
.slideWorks::-moz-selection {
color: rgba(255, 255, 255, 0);
background-color: rgba(255, 255, 255, .5)
}
.slideWorks::selection {
color: rgba(255, 255, 255, 0);
background-color: rgba(255, 255, 255, .5)
}
.isDrawingL .slideWorks,
.isDrawingS .slideWorks {
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center
}
.primary .slideWorks {
display: -ms-flexbox;
display: flex
}
.primary.isList .slideWorks {
display: none
}
.primary.pc .slideWorks {
color: rgba(255, 255, 255, 0)
}
.isStart .slideWorks {
visibility: visible
}
.isStart.isSlideInfo .slideWorks {
visibility: hidden;
opacity: 0
}
.slideWorks_container {
position: relative;
box-sizing: border-box;
width: 900px;
min-height: 160px;
pointer-events: none
}
.isSlideNavi.isSlideWorks .slideWorks_container {
pointer-events: auto
}
.isDrawingL .slideWorks_container,
.isDrawingS .slideWorks_container {
min-height: 160px;
margin-bottom: 0;
padding-top: 0;
padding-left: 0;
padding-right: 0
}
.isDrawingL .slideWorks_container {
width: 900px
}
.isDrawingS .slideWorks_container {
width: 750px
}
.slideWorks_header {
position: relative;
transition: none
}
.pc .slideWorks_header {
transition: visibility .2s linear 0s, opacity .2s linear 0s
}
.isSlideVimeoStart .slideWorks_header {
visibility: hidden;
opacity: 0
}
.slideWorks_header:before {
content: "";
display: block;
position: absolute;
top: -5px;
left: 65px;
width: 1px;
height: 30px;
background-color: #fff;
-ms-transform: rotate(22deg);
transform: rotate(22deg)
}
.pc .slideWorks_header:before {
display: none
}
.isDrawingL .slideWorks_header:before,
.isDrawingS .slideWorks_header:before {
top: -5px;
left: 65px;
height: 30px
}
.slideWorks_num {
font-size: 22px;
letter-spacing: .1em
}
.isDrawingL .slideWorks_num,
.isDrawingS .slideWorks_num {
font-size: 22px
}
.slideWorks_category {
position: absolute;
top: 0;
left: 80px;
font-size: 22px;
letter-spacing: .1em
}
.isDrawingL .slideWorks_category,
.isDrawingS .slideWorks_category {
left: 80px;
font-size: 22px
}
.slideWorks_title {
margin-top: 20px;
font-size: 40px;
letter-spacing: .05em;
font-weight: 400;
line-height: 1.25;
box-sizing: border-box;
width: 720px;
transition: none
}
.isDrawingL .slideWorks_title,
.isDrawingS .slideWorks_title {
margin-top: 20px;
font-size: 40px;
padding-right: 0
}
.isDrawingL .slideWorks_title {
width: 720px
}
.isDrawingS .slideWorks_title {
width: 570px
}
.pc .slideWorks_title {
transition: visibility .2s linear 0s, opacity .2s linear 0s
}
.isSlideVimeoStart .slideWorks_title {
visibility: hidden;
opacity: 0
}
.slideWorks_description {
margin-top: 20px;
font-size: 15px;
letter-spacing: .1em;
line-height: 1.9;
width: 720px;
transition: none
}
.isDrawingL .slideWorks_description,
.isDrawingS .slideWorks_description {
letter-spacing: .097em;
display: block
}
.isDrawingL .slideWorks_description {
width: 720px
}
.isDrawingS .slideWorks_description {
width: 570px
}
.pc .slideWorks_description {
transition: visibility .2s linear 0s, opacity .2s linear 0s
}
.isSlideVimeoStart .slideWorks_description {
visibility: hidden;
opacity: 0
}
.slideWorks_share {
position: relative;
margin-top: 25px;
font-size: 16px;
letter-spacing: .2em;
font-weight: 400;
color: #fff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: visibility .2s linear 0s, opacity .2s linear 0s
}
.isDrawingL .slideWorks_share,
.isDrawingS .slideWorks_share {
display: block
}
.isSlideVimeoStart .slideWorks_share {
visibility: hidden;
opacity: 0
}
.slideWorks_share_label {
visibility: hidden;
opacity: 0;
transition: visibility .2s linear 0s, opacity .2s cubic-bezier(.39, .575, .565, 1) 0s
}
.isSlideNavi.isSlideWorks .slideWorks_share_label {
visibility: visible;
opacity: 1;
transition: visibility .2s linear 0s, opacity .2s cubic-bezier(.39, .575, .565, 1) 0s
}
.slideWorks_share_facebook,
.slideWorks_share_twitter {
position: absolute;
top: -8px;
display: block;
width: 30px;
height: 30px;
border-radius: 15px
}
.slideWorks_share_facebook,
.slideWorks_share_twitter {
visibility: hidden;
opacity: 0;
-ms-transform: scale(0);
transform: scale(0);
transition: transform .2s cubic-bezier(.895, .03, .685, .22) 0s, visibility .2s linear 0s, opacity .2s cubic-bezier(.39, .575, .565, 1) 0s
}
.isSlideNavi.isSlideWorks .slideWorks_share_facebook,
.isSlideNavi.isSlideWorks .slideWorks_share_twitter {
visibility: visible;
opacity: 1;
-ms-transform: none;
transform: none
}
.slideWorks_share_facebook>svg,
.slideWorks_share_twitter>svg {
display: block;
width: 30px;
height: 30px
}
.slideWorks_share_facebook>svg>path,
.slideWorks_share_twitter>svg>path {
fill: #fff
}
.slideWorks_share_facebook.isHover>svg,
.slideWorks_share_twitter.isHover>svg {
animation: slideWorks_sns_hover .4s cubic-bezier(.175, .885, .32, 1.275) 0s
}
.slideWorks_share_facebook {
left: 58px
}
.isSlideNavi.isSlideWorks .slideWorks_share_facebook {
transition: transform .3s cubic-bezier(.175, .885, .32, 1.275) .1s, visibility .2s linear .1s, opacity .2s cubic-bezier(.39, .575, .565, 1) .1s
}
.slideWorks_share_twitter {
left: 93px
}
.isSlideNavi.isSlideWorks .slideWorks_share_twitter {
transition: transform .3s cubic-bezier(.175, .885, .32, 1.275) .2s, visibility .2s linear .2s, opacity .2s cubic-bezier(.39, .575, .565, 1) .2s
}
.slideWorks_info {
position: relative;
letter-spacing: .1em;
color: #fff;
cursor: pointer;
display: none
}
.isDrawingL .slideWorks_info,
.isDrawingS .slideWorks_info {
display: none
}
.slideWorks_info:before {
content: "";
display: block;
position: absolute;
bottom: -1px;
width: 100%;
height: 1px;
background-color: #fff
}
.slideWorks_play {
position: absolute;
top: -10px;
right: 0;
width: 160px;
height: 160px;
border-radius: 80px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block
}
.isDrawingL .slideWorks_play,
.isDrawingS .slideWorks_play {
display: none
}
.isSlideVimeoStart .slideWorks_play {
pointer-events: none
}
.slideWorks_play>span {
display: block;
margin-top: 72px;
padding-right: 15px;
font-size: 20px;
text-align: center;
letter-spacing: .1em;
color: #000;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
visibility: hidden;
opacity: 0;
-ms-transform: translateX(-10px);
transform: translateX(-10px);
transition: transform .2s cubic-bezier(.895, .03, .685, .22) 0s, visibility .2s linear 0s, opacity .2s cubic-bezier(.39, .575, .565, 1) 0s
}
.isSlideNavi.isSlideWorks.isSlideVimeoStart .slideWorks_play>span {
color: #000;
visibility: hidden;
opacity: 0;
transition: visibility .1s linear 0s, opacity .1s cubic-bezier(.39, .575, .565, 1) 0s, color .1s cubic-bezier(.39, .575, .565, 1) 0s
}
.isSlideNavi.isSlideWorks .slideWorks_play>span {
visibility: visible;
opacity: 1;
-ms-transform: none;
transform: none;
transition: transform .3s cubic-bezier(.175, .885, .32, 1.275) .25s, visibility .2s linear .25s, opacity .2s cubic-bezier(.39, .575, .565, 1) .25s, color .3s cubic-bezier(.39, .575, .565, 1) 0s
}
.isSlideNavi.isSlideWorks .slideWorks_play.isDelay>span {
transition: transform .3s cubic-bezier(.175, .885, .32, 1.275) .3s, visibility .2s linear .3s, opacity .2s cubic-bezier(.39, .575, .565, 1) .3s, color .3s cubic-bezier(.39, .575, .565, 1) .3s
}
.pc .slideWorks_play:hover>span {
color: #fff
}
.slideWorks_play:before,
.slideWorks_play:after {
content: "";
display: block;
position: absolute
}
.slideWorks_play:before {
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: rgba(255, 255, 255, .7);
visibility: hidden;
opacity: 0;
-ms-transform: scale(.5);
transform: scale(.5);
transition: transform .2s cubic-bezier(.55, .085, .68, .53) .1s, visibility .2s linear .1s, opacity .2s cubic-bezier(.39, .575, .565, 1) .1s
}
.isSlideNavi.isSlideWorks.isSlideVimeoStart .slideWorks_play:before {
background-color: #000;
visibility: hidden;
opacity: 0;
transition: visibility .1s linear .1s, opacity .1s cubic-bezier(.39, .575, .565, 1) .1s, background-color .1s cubic-bezier(.39, .575, .565, 1) .1s
}
.isSlideNavi.isSlideWorks .slideWorks_play:before {
visibility: visible;
opacity: 1;
-ms-transform: none;
transform: none;
transition: transform .3s cubic-bezier(.175, .885, .32, 1.275) .1s, visibility .2s linear .1s, opacity .2s cubic-bezier(.39, .575, .565, 1) .1s, background-color .2s cubic-bezier(.39, .575, .565, 1) 0s
}
.isSlideNavi.isSlideWorks .slideWorks_play.isDelay:before {
transition: visibility .2s linear .3s, opacity .2s cubic-bezier(.39, .575, .565, 1) .3s, background-color .3s cubic-bezier(.39, .575, .565, 1) .3s
}
.pc .slideWorks_play:hover:before {
background-color: #000
}
.slideWorks_play:after {
top: 80px;
left: 105px;
width: 12px;
height: 12px;
border-right: solid 2px #000;
border-top: solid 2px #000;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
visibility: hidden;
opacity: 0;
-ms-transform: translateX(-20px) rotate(45deg);
transform: translateX(-20px) rotate(45deg);
transition: transform .2s cubic-bezier(.895, .03, .685, .22) 0s, visibility .2s linear 0s, opacity .2s cubic-bezier(.39, .575, .565, 1) 0s
}
.isSlideNavi.isSlideWorks.isSlideVimeoStart .slideWorks_play:after {
border-right: solid 1px #000;
border-top: solid 1px #000;
visibility: hidden;
opacity: 0;
transition: visibility .1s linear 0s, opacity .1s cubic-bezier(.39, .575, .565, 1) 0s, border-color .1s cubic-bezier(.39, .575, .565, 1) 0s
}
.isSlideNavi.isSlideWorks .slideWorks_play:after {
visibility: visible;
opacity: 1;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
transition: transform .3s cubic-bezier(.175, .885, .32, 1.275) .2s, visibility .2s linear .2s, opacity .2s cubic-bezier(.39, .575, .565, 1) .2s, border-color .2s cubic-bezier(.39, .575, .565, 1) 0s
}
.isSlideNavi.isSlideWorks .slideWorks_play.isDelay:after {
transition: transform .3s cubic-bezier(.175, .885, .32, 1.275) .3s, visibility .2s linear .3s, opacity .2s cubic-bezier(.39, .575, .565, 1) .3s, border-color .3s cubic-bezier(.39, .575, .565, 1) .3s
}
.pc .slideWorks_play:hover:after {
border-right-color: #fff;
border-top-color: #fff
}
.isLoop .slideWorks_play:before {
animation: slideWorks_play_before_loop .6s cubic-bezier(.175, .885, .32, 1.275) 0s
}
.isLoop .slideWorks_play:after {
animation: slideWorks_play_after_loop .6s cubic-bezier(.165, .84, .44, 1) 0s
}
.isLoop .slideWorks_play>span {
animation: slideWorks_play_span_loop .6s cubic-bezier(.165, .84, .44, 1) 0s
}
.slideWorks_play.isHover:before {
animation: slideWorks_play_before_hover .4s cubic-bezier(.175, .885, .32, 1.275) 0s
}
.slideWorks_play.isHover:after {
animation: slideWorks_play_after_hover .4s cubic-bezier(.165, .84, .44, 1) 0s
}
.slideWorks_play.isHover>span {
animation: slideWorks_play_span_hover .4s cubic-bezier(.165, .84, .44, 1) 0s
}
@keyframes slideWorks_sns_hover {
0% {
transform: none
}
20% {
transform: scale(.33)
}
100% {
transform: none
}
}
@keyframes slideWorks_play_before_hover {
0% {
transform: none
}
20% {
transform: scale(.75)
}
100% {
transform: none
}
}
@keyframes slideWorks_play_span_hover {
0% {
transform: none
}
20% {
transform: translateX(-10px);
opacity: 0
}
100% {
transform: none
}
}
@keyframes slideWorks_play_after_hover {
0% {
transform: rotate(45deg)
}
20% {
transform: translateX(-20px) rotate(45deg);
opacity: 0
}
100% {
transform: rotate(45deg)
}
}
@keyframes slideWorks_play_before_loop {
0% {
transform: none
}
20% {
transform: scale(.75)
}
100% {
transform: none
}
}
@keyframes slideWorks_play_span_loop {
0% {
transform: none;
opacity: 0
}
20% {
transform: translateX(-10px);
opacity: 0
}
100% {
transform: none
}
}
@keyframes slideWorks_play_after_loop {
0% {
transform: rotate(45deg);
opacity: 0
}
20% {
transform: translateX(-20px) rotate(45deg);
opacity: 0
}
100% {
transform: rotate(45deg)
}
}
.slideNavi {
position: absolute !important;
bottom: 50px;
left: 50%;
z-index: 100;
width: 900px;
height: 25%;
overflow: hidden;
margin-left: -450px;
color: #fff;
font-size: 18px;
font-style: italic;
letter-spacing: .075em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: visibility .2s linear 0s, opacity .2s linear 0s
}
.isSlide .slideNavi {
visibility: visible;
opacity: 1
}
.isSlide.isSlideInfo .slideNavi {
visibility: hidden;
opacity: 0
}
.isSlideNavi .slideNavi {
pointer-events: auto
}
.primary.isList .slideNavi {
display: none
}
.slideNavi_container {
position: relative;
height: 331px
}
.slideNavi_next,
.slideNavi_prev {
position: absolute;
bottom: 0;
width: 360px;
transition: transform .6s cubic-bezier(.19, 1, .22, 1) 0s, visibility .6s linear 0s
}
.isSlideVimeoStart .slideNavi_next,
.isSlideVimeoStart .slideNavi_prev {
-ms-transform: translateY(250px);
transform: translateY(250px);
visibility: hidden;
transition: transform .6s cubic-bezier(.755, .05, .855, .06) 0s, visibility .6s linear 0s
}
.slideNavi_next {
right: 0
}
.slideNavi_prev {
left: 0;
text-align: right
}
.slideNavi_num {
margin-bottom: 5px;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%
}
.slideNavi_num>span {
display: block;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%
}
.slideNavi_num {
-ms-transform: scaleY(0);
transform: scaleY(0);
visibility: hidden;
opacity: 0;
transition: transform .2s cubic-bezier(.895, .03, .685, .22) 0s, visibility .1s linear .1s, opacity .1s cubic-bezier(.47, 0, .745, .715) .1s
}
.isSlideNavi .slideNavi_num {
-ms-transform: none;
transform: none;
visibility: visible;
opacity: 1;
transition: transform .2s cubic-bezier(.165, .84, .44, 1) 0s, visibility .1s linear 0s, opacity .1s cubic-bezier(.39, .575, .565, 1) 0s
}
.slideNavi_next.isHover .slideNavi_num>span,
.slideNavi_prev.isHover .slideNavi_num>span {
animation: text_scaleY .5s cubic-bezier(.165, .84, .44, 1) 0s
}
.slideNavi_title {
width: 320px;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: scaleY(0);
transform: scaleY(0);
visibility: hidden;
opacity: 0;
transition: transform .2s cubic-bezier(.895, .03, .685, .22) .05s, visibility .1s linear .15s, opacity .1s cubic-bezier(.47, 0, .745, .715) .15s
}
.slideNavi_title>span {
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%
}
.slideNavi_prev .slideNavi_title>span {
margin-left: 40px
}
.isSlideNavi .slideNavi_title {
-ms-transform: none;
transform: none;
visibility: visible;
opacity: 1;
transition: transform .2s cubic-bezier(.165, .84, .44, 1) .05s, visibility .1s linear .05s, opacity .1s cubic-bezier(.39, .575, .565, 1) .05s
}
.slideNavi_next.isHover .slideNavi_title>span,
.slideNavi_prev.isHover .slideNavi_title>span {
animation: text_scaleY .6s cubic-bezier(.165, .84, .44, 1) 0s
}
.slideNavi_arrow {
bottom: 3px;
left: 0;
display: block;
width: 100%;
overflow: hidden
}
.slideNavi_arrow>span {
display: block;
width: 100%;
height: 7px
}
.slideNavi_prev .slideNavi_arrow>span {
-ms-transform: translateX(100%);
transform: translateX(100%)
}
.slideNavi_next .slideNavi_arrow>span {
-ms-transform: translateX(-100%);
transform: translateX(-100%)
}
.slideNavi_arrow>span {
visibility: hidden;
opacity: 0;
transition: transform .2s cubic-bezier(.895, .03, .685, .22) .1s, visibility .15s linear .15s, opacity .15s cubic-bezier(.47, 0, .745, .715) .15s
}
.isSlideNavi .slideNavi_arrow>span,
.isSlideNavi.ios .slideNavi_next .slideNavi_arrow>span {
visibility: visible;
opacity: 1;
-ms-transform: none;
transform: none;
transition: transform .3s cubic-bezier(.165, .84, .44, 1) 0s, visibility .1s linear 0s, opacity .1s cubic-bezier(.39, .575, .565, 1) 0s
}
.slideNavi_arrow>span>svg {
display: block;
width: 100%;
height: 100%
}
.slideNavi_next.isHover .slideNavi_arrow>span>svg {
animation: slideNavi_next_arrow .6s cubic-bezier(.19, 1, .22, 1) 0s
}
.slideNavi_prev.isHover .slideNavi_arrow>span>svg {
animation: slideNavi_prev_arrow .6s cubic-bezier(.19, 1, .22, 1) 0s
}
.slideNavi_count {
visibility: hidden;
opacity: 0;
transition: visibility .2s linear 0s, opacity .2s cubic-bezier(.47, 0, .745, .715) 0s;
position: absolute;
left: 50%;
bottom: 8px;
width: 200px;
height: 30px;
margin-left: -100px
}
.slideNavi_count:before {
content: "";
display: block;
position: absolute;
top: 0;
width: 1px;
height: 27px;
background-color: #fff;
-ms-transform: rotate(22deg) scaleY(1);
transform: rotate(22deg) scaleY(1)
}
.isStart.isSlide.isSlideText .slideNavi_count {
visibility: hidden;
opacity: 0;
transition: visibility .2s linear 0s, opacity .2s cubic-bezier(.47, 0, .745, .715) 0s
}
.isStart.isSlide .slideNavi_count {
visibility: visible;
opacity: 1;
transition: visibility .2s linear .8s, opacity .2s cubic-bezier(.39, .575, .565, 1) .8s
}
.slideNavi_count:before {
top: 5px;
left: 50%
}
.slideNavi_count_prev,
.slideNavi_count_next,
.slideNavi_count_total {
display: block;
position: absolute;
bottom: 0;
width: 100px
}
.slideNavi_count_prev,
.slideNavi_count_next {
right: 115px;
text-align: right;
visibility: hidden
}
.slideNavi_count_total {
display: block;
position: absolute;
left: 115px
}
@keyframes slideNavi_next_arrow {
0% {
opacity: 1;
transform: none
}
20% {
opacity: 0;
transform: translateX(-100%)
}
100% {
opacity: 1;
transform: none
}
}
@keyframes slideNavi_prev_arrow {
0% {
opacity: 1;
transform: none
}
20% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: none
}
}
.slideInfo {
position: fixed;
top: 0;
left: 0;
z-index: 120;
width: 100%;
height: 100%;
font-weight: 200;
color: #000;
display: none
}
.slideInfo:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgba(255, 255, 255, .95);
visibility: hidden;
opacity: 0;
-ms-transform: translateX(110%);
transform: translateX(110%);
transition: transform .6s cubic-bezier(.645, .045, .355, 1) .2s, visibility .2s linear .6s, opacity .2s linear .6s
}
.isSlideInfoEnd .slideInfo:before {
visibility: visible;
opacity: 1;
-ms-transform: none;
transform: none;
transition: transform .5s cubic-bezier(.645, .045, .355, 1) 0s, visibility .3s linear 0s, opacity .3s linear 0s
}
.slideInfo_scroll {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto
}
.slideInfo_container {
width: 100%;
overflow: hidden;
position: relative
}
.slideInfo_back {
position: absolute;
top: 20px;
left: 20px;
font-weight: 400;
font-size: 12px;
letter-spacing: .05em;
cursor: pointer;
visibility: hidden;
opacity: 0;
-ms-transform: translateX(100%);
transform: translateX(100%);
transition: transform .3s cubic-bezier(.895, .03, .685, .22) .1s, visibility .3s linear .1s, opacity .3s linear .1s
}
.isSlideInfoEnd .slideInfo_back {
visibility: visible;
opacity: 1;
-ms-transform: none;
transform: none;
transition: transform .6s cubic-bezier(.165, .84, .44, 1) .35s, visibility .3s linear .35s, opacity .3s linear .35s
}
.slideInfo_back_arrow {
position: absolute;
top: 3px;
left: 0;
width: 23px;
height: 5px
}
.slideInfo_back_text {
margin-left: 29px
}
.slideInfo_header {
position: relative;
visibility: hidden;
opacity: 0;
-ms-transform: translateX(50%);
transform: translateX(50%);
transition: transform .3s cubic-bezier(.895, .03, .685, .22) .075s, visibility .3s linear .075s, opacity .3s linear .075s
}
.isSlideInfoEnd .slideInfo_header {
visibility: visible;
opacity: 1;
-ms-transform: none;
transform: none;
transition: transform .6s cubic-bezier(.165, .84, .44, 1) .4s, visibility .3s linear .4s, opacity .3s linear .4s
}
.slideInfo_header:before {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: #000;
-ms-transform: rotate(22deg);
transform: rotate(22deg)
}
.slideInfo_num {
letter-spacing: .075em
}
.slideInfo_category {
position: absolute;
top: 0;
letter-spacing: .075em
}
.slideInfo_title {
width: 100%;
letter-spacing: .05em;
line-height: 1.25;
font-weight: 400;
visibility: hidden;
opacity: 0;
-ms-transform: translateX(50%);
transform: translateX(50%);
transition: transform .3s cubic-bezier(.895, .03, .685, .22) .05s, visibility .3s linear .05s, opacity .3s linear .05s
}
.isSlideInfoEnd .slideInfo_title {
visibility: visible;
opacity: 1;
-ms-transform: none;
transform: none;
transition: transform .6s cubic-bezier(.165, .84, .44, 1) .45s, visibility .3s linear .45s, opacity .3s linear .45s
}
.slideInfo_description {
letter-spacing: .1em;
line-height: 1.8;
visibility: hidden;
opacity: 0;
-ms-transform: translateX(50%);
transform: translateX(50%);
transition: transform .3s cubic-bezier(.895, .03, .685, .22) .025s, visibility .3s linear .025s, opacity .3s linear .025s
}
.isSlideInfoEnd .slideInfo_description {
visibility: visible;
opacity: 1;
-ms-transform: none;
transform: none;
transition: transform .6s cubic-bezier(.165, .84, .44, 1) .5s, visibility .3s linear .5s, opacity .3s linear .5s
}
.slideInfo_share {
letter-spacing: .1em;
font-weight: 400;
position: relative;
visibility: hidden;
opacity: 0;
-ms-transform: translateX(50%);
transform: translateX(50%);
transition: transform .3s cubic-bezier(.895, .03, .685, .22) 0s, visibility .3s linear 0s, opacity .3s linear 0s
}
.isSlideInfoEnd .slideInfo_share {
visibility: visible;
opacity: 1;
-ms-transform: none;
transform: none;
transition: transform .6s cubic-bezier(.165, .84, .44, 1) .55s, visibility .3s linear .55s, opacity .3s linear .55s
}
.slideInfo_share_facebook,
.slideInfo_share_twitter {
position: absolute;
display: block
}
.slideInfo_share:before {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: #000;
-ms-transform: rotate(22deg);
transform: rotate(22deg)
}
.slideVimeo {
position: fixed;
top: 0;
left: 0;
z-index: 120;
width: 100%;
height: 100%;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
display: none
}
.isSlideVimeoStart .slideVimeo {
display: -ms-flexbox;
display: flex
}
.isSlideVimeoEnd .slideVimeo {
background-color: #000
}
.slideVimeo>iframe {
visibility: hidden;
opacity: 0;
transition: visibility .2s linear 0s, opacity .2s linear 0s
}
.isSlideVimeoEnd .slideVimeo>iframe {
visibility: visible;
opacity: 1;
transition: visibility .6s linear 0s, opacity .6s linear 0s
}
.slideVimeo_close {
position: absolute;
top: 25px;
right: 25px;
width: 30px;
height: 30px;
cursor: pointer;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
visibility: hidden
}
.isSlideVimeoEnd .slideVimeo_close {
visibility: visible
}
.slideVimeo_close>span {
position: absolute;
display: block
}
.slideVimeo_close>span:before {
content: "";
width: 100%;
height: 100%;
display: block;
background-color: #fff
}
.slideVimeo_close>span:nth-child(1) {
width: 100%;
height: 3px;
top: 13px;
left: 0;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-ms-transform: translateY(.5px) scaleX(0);
transform: translateY(.5px) scaleX(0);
transition: transform .1s cubic-bezier(.645, .045, .175, 1) .1s
}
.isSlideVimeoEnd .slideVimeo_close>span:nth-child(1) {
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
-ms-transform: translateY(.5px) scaleX(1);
transform: translateY(.5px) scaleX(1);
transition: transform .3s cubic-bezier(.77, 0, .355, 1) .5s
}
.slideVimeo_close>span:nth-child(2) {
width: 3px;
height: 100%;
top: 0;
left: 13px;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-ms-transform: translateX(.5px) scaleY(0);
transform: translateX(.5px) scaleY(0);
transition: transform .1s cubic-bezier(.645, .045, .175, 1) 0s
}
.isSlideVimeoEnd .slideVimeo_close>span:nth-child(2) {
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-ms-transform: translateX(.5px) scaleY(1);
transform: translateX(.5px) scaleY(1);
transition: transform .3s cubic-bezier(.77, 0, .355, 1) .4s
}
.slideVimeo_close.isHover>span:nth-child(1):before {
animation: menuTrigger_hoverX .5s cubic-bezier(.645, .045, .175, 1) .15s!important
}
.slideVimeo_close.isHover>span:nth-child(2):before {
animation: menuTrigger_hoverY .5s cubic-bezier(.645, .045, .175, 1) 0s!important
}
.loading {
position: absolute;
top: 0;
left: 0;
z-index: 200;
width: 100%;
height: 100%;
font-size: 16px;
font-weight: 200;
letter-spacing: .4em;
visibility: hidden;
opacity: 0;
transition: visibility .2s linear 0s, opacity .2s cubic-bezier(.47, 0, .745, .715) 0s
}
.loading.isShow {
visibility: visible;
opacity: 1;
transition: visibility .8s linear 0s, opacity .8s cubic-bezier(.47, 0, .745, .715) 0s
}
.loading_name {
position: absolute;
bottom: calc(50% + 25px);
left: 0;
width: 100%;
text-align: center
}
.loading_bar {
position: absolute;
top: 50%;
left: calc(50% - 100px);
width: 200px;
height: 1px;
overflow: hidden
}
.loading_bar:before {
content: "";
position: absolute;
width: 2400px;
height: 1px;
background: linear-gradient(to right, transparent 0, transparent 5.5555555556%, black 11.1111111111%, black 16.6666666667%, transparent 22.2222222222%, transparent 27.7777777778%, black 33.3333333333%, black 38.8888888889%, transparent 44.4444444444%, transparent 50%, transparent 55.5555555556%, black 61.1111111111%, black 66.6666666667%, transparent 72.2222222222%, transparent 77.7777777778%, black 83.3333333333%, black 88.8888888889%, transparent 94.4444444444%, transparent 100%);
animation: loading_bar 2s linear 0s infinite
}
.loading.isFinish .loading_bar {
visibility: hidden;
opacity: 0;
transition: visibility .1s linear 0s, opacity .1s cubic-bezier(.39, .575, .565, 1) 0s
}
.loading:after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: #000;
-ms-transform: scaleX(0);
transform: scaleX(0);
transition: transform 1s cubic-bezier(.645, .045, .175, 1) 0s
}
.loading.isFinish:after {
-ms-transform: scaleX(1);
transform: scaleX(1)
}
@keyframes loading_bar {
0% {
transform: translateX(-1200px)
}
100% {
transform: none
}
}
.notSupported {
position: absolute;
top: 0;
left: 0;
z-index: 200;
display: table;
box-sizing: border-box;
width: 100%;
height: 100%;
padding-left: 20px;
padding-right: 20px;
text-align: center;
font-family: Times New Roman, serif
}
.primary .notSupported {
display: none
}
.notSupported_container {
display: table-cell;
vertical-align: middle;
text-align: center
}
.notSupported_name {
font-size: 24px;
letter-spacing: 1em
}
.notSupported_name>br {
display: none
}
.notSupported_description {
margin-top: 40px;
font-size: 14px;
line-height: 1.8;
letter-spacing: .05em
}
.notSupported_description-ios {
display: none
}
.ios .notSupported_description-ios {
display: block
}
.notSupported_description-android {
display: none
}
.android .notSupported_description-android {
display: block
}
.ios .notSupported_description-others,
.android .notSupported_description-others {
display: none
}
.notSupported_sns {
margin-top: 40px;
font-size: 16px;
letter-spacing: .1em
}
.notSupported_sns>a {
display: inline-block;
margin-left: 40px;
margin-right: 40px
}
.notSupported_sns>a:link {
text-decoration: underline
}
@media screen and (max-width: 1329px) {
head {
font-family: medium
}
.header {
left: 30px
}
.sns {
right: 30px
}
.list {
width: 750px
}
.about {
width: 750px
}
.about_position {
font-size: 24px
}
.about_name {
font-size: 50px;
letter-spacing: 1.1em
}
.about_from {
font-size: 18px
}
.about_description, .about_office, .about_quote {
font-size: 14px
}
.about_contact {
font-size: 18px
}
.about_contact>a {
font-size: 18px
}
.menuTrigger {
left: 30px
}
}
@media screen and (max-width: 1139px) {
head {
font-family: short
}
.slideHome_container {
width: 750px
}
.slideHome_name {
letter-spacing: 1.02em
}
.edge .slideHome_name {
letter-spacing: 1em
}
.slideWorks_container {
width: 750px
}
.slideWorks_title {
width: 570px;
}
.slideWorks_description {
width: 570px
}
.slideNavi {
width: 750px;
margin-left: -375px
}
.slideNavi_next,
.slideNavi_prev {
width: 320px
}
.slideNavi_title {
width: 280px
}
}
@media screen and (max-width: 959px) and (orientation: landscape) {
head {
font-family: tablet_l
}
.list {
margin-top: 150px;
box-sizing: border-box;
width: 100%;
padding-left: 100px;
padding-right: 100px
}
.list_item {
position: relative;
width: 100%;
margin-bottom: 12vw
}
.list_item>a {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center
}
.list_num>span {
height: auto
}
.list_num {
height: auto;
position: absolute;
left: 0;
top: -16px;
font-size: 20px
}
.list_item.isActive .list_num>span,
.pc .list_item>a:hover .list_num>span {
transition: none;
-ms-transform: none;
transform: none
}
.list_thumb {
width: 35vw
}
.pc .list_item>a:hover .list_thumb {
opacity: 1
}
.list_title {
box-sizing: border-box;
width: 45vw;
height: 100%;
padding-top: 0;
font-weight: 400;
font-size: 20px;
padding-left: 6vw
}
.list_item.isActive .list_title>span,
.pc .list_item>a:hover .list_title>span {
transition: none;
-ms-transform: none;
transform: none
}
.about {
margin-top: 60px;
padding-top: 40px;
box-sizing: border-box;
width: 100%;
padding-left: 100px;
padding-right: 100px
}
.about_position {
font-size: 2.4vw;
letter-spacing: .4em
}
.about_name {
font-size: 6vw;
letter-spacing: .8em
}
.about_from {
font-size: 16px
}
.about_description, .about_office, .about_quote {
font-size: 13px
}
.about_contact {
font-size: 16px
}
.about_contact>a {
font-size: 16px
}
.primary.pc .slideHome {
color: #fff
}
.slideHome_container {
width: 560px
}
.slideHome_position {
font-size: 20px;
letter-spacing: .4em
}
.slideHome_name {
font-size: 42px;
letter-spacing: .83em
}
.edge .slideHome_name {
letter-spacing: .81em
}
.primary.pc .slideWorks {
color: #fff
}
.slideWorks_container {
width: 560px
}
.pc .slideWorks_header {
transition: none
}
.pc .slideWorks_header:before {
display: block
}
.slideWorks_title {
width: 450px
}
.pc .slideWorks_title {
transition: none
}
.slideWorks_description {
width: 450px
}
.pc .slideWorks_description {
transition: none
}
.slideWorks_play {
width: 100px;
height: 100px;
border-radius: 50px
}
.slideWorks_play {
top: 50%;
margin-top: -50px
}
.slideWorks_play>span {
padding-top: 44px;
padding-right: 10px;
font-size: 15px;
letter-spacing: .1em
}
.slideWorks_play>span {
margin-top: 0
}
.slideWorks_play:after {
top: 50px;
left: 70px;
width: 8px;
height: 8px;
border-right: solid 1px #000;
border-top: solid 1px #000
}
.slideNavi {
width: 560px;
margin-left: -280px
}
.slideNavi_next,
.slideNavi_prev {
width: 240px
}
.slideNavi_title {
width: 210px
}
.slideNavi_prev .slideNavi_title>span {
margin-left: 30px
}
.isSlideVimeoStart .slideVimeo {
display: none
}
}
@media screen and (max-width: 812px) and (orientation: landscape) {
head {
font-family: mobile_l
}
.header {
top: 15px;
left: auto;
right: 15px
}
.header:before {
display: none
}
.header_home {
display: none
}
.header_about_container {
top: 0;
left: auto;
right: 0;
width: 63px;
margin-top: 0;
font-size: 12px;
letter-spacing: .1em;
transition: none
}
.header_about_container {
margin-right: calc(constant(safe-area-inset-right)/2)
}
.isSlide.isSlideHome .header_about_container {
transition: none;
-ms-transform: none;
transform: none
}
.header_about_arrow {
bottom: 3px;
width: 23px;
height: 5px
}
.header_about_arrow>svg {
-ms-transform: none;
transform: none
}
.sns {
display: none
}
.list {
margin-top: 10vw;
padding-left: 10vw;
padding-right: 10vw
}
.list_home {
display: block;
font-weight: 200;
letter-spacing: .05em;
visibility: hidden;
opacity: 0;
-ms-transform: translateY(-40px);
transform: translateY(-40px);
transition: transform .4s cubic-bezier(.895, .03, .685, .22) .3s, visibility .4s linear .3s, opacity .4s linear .3s
}
.list_home.isShow {
-ms-transform: none;
transform: none;
visibility: visible;
opacity: 1;
transition: transform .4s cubic-bezier(.165, .84, .44, 1) .3s, visibility .4s linear .3s, opacity .4s linear .3s
}
.list_home {
font-size: 3vw;
margin-bottom: 9vw
}
.list_home_arrow {
left: 9vw;
width: 4.6vw
}
.list_item {
margin-bottom: 8vw
}
.list_num {
top: -2.4vw;
font-size: 3vw
}
.list_title {
width: 51vw;
font-size: 3vw;
padding-left: 3vw
}
.about {
padding-left: 10vw;
padding-right: 10vw
}
.about_position {
font-size: 2.4vw;
letter-spacing: .4em
}
.about_name {
margin-top: 3vw;
font-size: 6vw;
letter-spacing: .8em
}
.about_from {
margin-top: 3vw;
font-size: 2.4vw;
letter-spacing: .05em
}
.about_description, .about_office, .about_quote {
margin-top: 3vw;
font-size: 2.4vw;
letter-spacing: .05em;
line-height: 1.6
}
.about_sns {
display: block;
font-weight: 200;
letter-spacing: .05em
}
.about_sns {
margin-top: 6vw;
font-size: 2.4vw
}
.about_sns_facebook,
.about_sns_vimeo {
width: 21vw
}
.about_sns_vimeo {
left: 21vw
}
.about_sns_arrow {
left: 13vw;
width: 4.6vw
}
.about_sns_vimeo>.about_sns_arrow {
left: 11vw
}
.about_contact {
margin-top: 3vw;
font-size: 2.4vw;
letter-spacing: .05em
}
.about_contact>a {
font-size: 2.4vw
}
.backToTop {
height: 0;
margin-bottom: 50px
}
.backToTop>span {
display: none
}
.menuTrigger {
top: 13px;
left: 15px;
margin-top: 0;
width: 23px;
height: 23px
}
.menuTrigger {
margin-left: calc(constant(safe-area-inset-left)/2)
}
.isLoading .menuTrigger,
.isOpening .menuTrigger,
.isSlideVimeoStart .menuTrigger {
-ms-transform: translateY(-150px);
transform: translateY(-150px)
}
.menuTrigger_open>span {
height: 2px
}
.menuTrigger_open>span:nth-child(1) {
top: 2px
}
.menuTrigger_open>span:nth-child(2) {
top: 10px
}
.menuTrigger_open>span:nth-child(3) {
top: 18px
}
.menuTrigger_close>span:nth-child(1) {
height: 2px;
top: 10px
}
.menuTrigger_close>span:nth-child(2) {
left: 10px;
width: 2px
}
.slideHome_container {
width: 70vw
}
.slideHome_position {
font-size: 2vw;
letter-spacing: .34em
}
.slideHome_name {
margin-top: 4vw;
font-size: 4.5vw;
letter-spacing: 1.08em
}
.edge .slideHome_name {
letter-spacing: 1.06em
}
.slideHome_from {
margin-top: 3vw;
font-size: 1.8vw;
letter-spacing: .2em
}
.slideWorks_container {
width: 60vw;
min-height: 100px;
margin-bottom: 4vw
}
.slideWorks_header:before {
top: -.375vw;
left: 7.62vw;
height: 3.125vw
}
.slideWorks_num {
font-size: 2.5vw
}
.slideWorks_category {
left: 9.3vw;
font-size: 2.5vw
}
.slideWorks_title {
width: 100%;
margin-top: 1.25vw;
font-size: 4.7vw;
padding-right: 18vw
}
.slideWorks_description {
display: none
}
.slideWorks_share {
display: none
}
.slideWorks_info {
display: inline-block;
margin-top: 2.2vw;
font-size: 2.5vw
}
.slideWorks_play {
width: 16vw;
height: 16vw;
border-radius: 8vw;
margin-top: -8vw
}
.slideWorks_play>span {
padding-top: 7.1875vw;
padding-right: 1.875vw;
font-size: 2.5vw
}
.slideWorks_play:after {
top: 8.25vw;
left: 11.125vw;
width: 1.375vw;
height: 1.375vw
}
.slideNavi {
bottom: 25px;
width: 250px;
margin-left: -125px;
font-size: 14px
}
.slideNavi_next,
.slideNavi_prev {
width: 100px
}
.slideNavi_num {
position: relative;
top: 3px
}
.slideNavi_title {
display: none
}
.slideNavi_arrow>span {
height: 5px
}
.slideNavi_count {
bottom: 5px
}
.slideNavi_count:before {
top: 9px;
height: 22px
}
.isSlideInfoStart .slideInfo {
display: block
}
.slideInfo_container {
display: block;
box-sizing: border-box
}
.slideInfo_container {
padding-bottom: 10vw;
padding-left: 10vw;
padding-right: 10vw
}
.slideInfo_header {
margin-top: 10vw
}
.slideInfo_header:before {
top: -.45vw;
left: 8.8vw;
height: 4.1vw
}
.slideInfo_num {
font-size: 3vw
}
.slideInfo_category {
left: 10.9vw;
font-size: 3vw
}
.slideInfo_title {
margin-top: 1.875vw;
font-size: 5.625vw
}
.slideInfo_description {
margin-top: 3.375vw;
font-size: 2.25vw
}
.slideInfo_share {
margin-top: 9vw;
font-size: 2.25vw
}
.slideInfo_share_facebook,
.slideInfo_share_twitter {
top: -1.8vw;
width: 4.875vw;
height: 4.875vw;
border-radius: 3.25vw
}
.slideInfo_share_facebook {
left: 8.25vw
}
.slideInfo_share_twitter {
left: 17vw
}
.slideInfo_share:before {
top: -1.275vw;
left: 15vw;
height: 4.125vw
}
.notSupported_name {
letter-spacing: .5em
}
.notSupported_description {
font-size: 12px
}
.notSupported_sns {
font-size: 14px
}
.notSupported_sns>a {
margin-left: 20px;
margin-right: 20px
}
}
@media screen and (max-width: 959px) and (orientation: portrait) {
head {
font-family: tablet_p
}
.list {
margin-top: 150px;
box-sizing: border-box;
width: 100%;
padding-left: 100px;
padding-right: 100px
}
.list_item {
position: relative;
width: 100%;
margin-bottom: 12vw
}
.list_item>a {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center
}
.list_num>span {
height: auto
}
.list_num {
height: auto;
position: absolute;
left: 0;
top: -16px;
font-size: 20px
}
.list_item.isActive .list_num>span,
.pc .list_item>a:hover .list_num>span {
transition: none;
-ms-transform: none;
transform: none
}
.list_thumb {
width: 35vw
}
.pc .list_item>a:hover .list_thumb {
opacity: 1
}
.list_title {
box-sizing: border-box;
width: 45vw;
height: 100%;
padding-top: 0;
font-weight: 400;
font-size: 20px;
padding-left: 6vw
}
.list_item.isActive .list_title>span,
.pc .list_item>a:hover .list_title>span {
transition: none;
-ms-transform: none;
transform: none
}
.about {
margin-top: 60px;
padding-top: 40px;
box-sizing: border-box;
width: 100%;
padding-left: 100px;
padding-right: 100px
}
.about_position {
font-size: 2.4vw;
letter-spacing: .4em
}
.about_name {
font-size: 6vw;
letter-spacing: .86em
}
.about_from {
font-size: 16px;
letter-spacing: 0.15em
}
.about_from>p {
letter-spacing: .2em
}
.about_description, .about_office, .about_quote {
font-size: 13px
}
.about_contact {
font-size: 16px
}
.about_contact>a {
font-size: 16px
}
.primary.pc .slideHome {
color: #fff
}
.slideHome_container {
width: 560px
}
.slideHome_position {
font-size: 20px;
letter-spacing: .4em
}
.slideHome_name {
font-size: 42px;
letter-spacing: .83em
}
.edge .slideHome_name {
letter-spacing: .81em
}
.primary.pc .slideWorks {
color: #fff
}
.slideWorks_container {
width: 560px
}
.pc .slideWorks_header {
transition: none
}
.pc .slideWorks_header:before {
display: block
}
.pc .slideWorks_title {
transition: none
}
.pc .slideWorks_description {
transition: none
}
.slideWorks_play {
width: 100px;
height: 100px;
border-radius: 50px
}
.slideWorks_play {
position: relative;
top: auto;
right: auto
}
.slideWorks_play>span {
padding-top: 44px;
padding-right: 10px;
font-size: 15px;
letter-spacing: .1em
}
.slideWorks_play>span {
margin-top: 50px
}
.slideWorks_play:after {
top: 50px;
left: 70px;
width: 8px;
height: 8px;
border-right: solid 1px #000;
border-top: solid 1px #000
}
.slideNavi {
width: 560px;
margin-left: -280px
}
.slideNavi_next,
.slideNavi_prev {
width: 240px
}
.slideNavi_title {
width: 210px
}
.slideNavi_prev .slideNavi_title>span {
margin-left: 30px
}
.isSlideVimeoStart .slideVimeo {
display: none
}
}
@media screen and (max-width: 767px) and (orientation: portrait) {
head {
font-family: mobile_p
}
.header {
top: 15px;
left: auto;
right: 15px
}
.header:before {
display: none
}
.header_home {
display: none
}
.header_about_container {
top: 0;
left: auto;
right: 0;
width: 63px;
margin-top: 0;
font-size: 12px;
letter-spacing: .1em;
transition: none
}
.isSlide.isSlideHome .header_about_container {
transition: none;
-ms-transform: none;
transform: none
}
.header_about_arrow {
bottom: 3px;
width: 23px;
height: 5px
}
.header_about_arrow>svg {
-ms-transform: none;
transform: none
}
.sns {
display: none
}
.list {
margin-top: 20vw;
padding-left: 7vw;
padding-right: 7vw
}
.list_home {
display: block;
font-weight: 200;
letter-spacing: .05em;
visibility: hidden;
opacity: 0;
-ms-transform: translateY(-40px);
transform: translateY(-40px);
transition: transform .4s cubic-bezier(.895, .03, .685, .22) .3s, visibility .4s linear .3s, opacity .4s linear .3s
}
.list_home.isShow {
-ms-transform: none;
transform: none;
visibility: visible;
opacity: 1;
transition: transform .4s cubic-bezier(.165, .84, .44, 1) .3s, visibility .4s linear .3s, opacity .4s linear .3s
}
.list_home {
font-size: 4vw;
margin-bottom: 11vw
}
.list_home_arrow {
left: 12vw;
width: 6.1vw
}
.list_num {
top: -3.2vw;
font-size: 4vw
}
.list_title {
width: 51vw;
font-size: 4vw;
padding-left: 4vw
}
.about {
padding-left: 7vw;
padding-right: 7vw
}
.about_position {
font-size: 3.2vw;
letter-spacing: .25em
}
.about_name {
margin-top: 4vw;
font-size: 8vw;
letter-spacing: .4em
}
.about_from {
margin-top: 4vw;
font-size: 3.2vw;
letter-spacing: .05em
}
.about_from>p {
letter-spacing: .07em
}
.about_description, .about_office, .about_quote {
margin-top: 4vw;
font-size: 3.2vw;
letter-spacing: .05em;
line-height: 1.6
}
.about_sns {
display: block;
font-weight: 200;
letter-spacing: .05em
}
.about_sns {
margin-top: 8vw;
font-size: 3.2vw
}
.about_sns_facebook,
.about_sns_vimeo {
width: 27vw
}
.about_sns_vimeo {
left: 27vw
}
.about_sns_arrow {
left: 17vw;
width: 6.1vw
}
.about_sns_vimeo>.about_sns_arrow {
left: 13vw
}
.about_contact {
margin-top: 4vw;
font-size: 3.2vw;
letter-spacing: .05em
}
.about_contact>a {
font-size: 3.2vw
}
.backToTop {
height: 0;
margin-bottom: 50px
}
.backToTop>span {
display: none
}
.menuTrigger {
top: 13px;
left: 15px;
margin-top: 0;
width: 23px;
height: 23px
}
.isLoading .menuTrigger,
.isOpening .menuTrigger,
.isSlideVimeoStart .menuTrigger {
-ms-transform: translateY(-150px);
transform: translateY(-150px)
}
.menuTrigger_open>span {
height: 2px
}
.menuTrigger_open>span:nth-child(1) {
top: 2px
}
.menuTrigger_open>span:nth-child(2) {
top: 10px
}
.menuTrigger_open>span:nth-child(3) {
top: 18px
}
.menuTrigger_close>span:nth-child(1) {
height: 2px;
top: 10px
}
.menuTrigger_close>span:nth-child(2) {
left: 10px;
width: 2px
}
.slideHome_container {
width: 74vw;
margin-bottom: 8vw
}
.slideHome_position {
font-size: 3.7vw;
letter-spacing: .34em;
text-align: center
}
.slideHome_name {
margin-top: 4vw;
font-size: 8vw;
letter-spacing: 1.1em;
text-align: center;
line-height: 1.75
}
.slideHome_name>br {
display: block
}
.slideHome_termination {
letter-spacing: 0
}
.slideHome_from {
margin-top: 2vw;
text-align: center;
font-size: 3.2vw;
letter-spacing: .17em;
line-height: 1.7
}
.slideHome_from>br {
display: block
}
.slideWorks {
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: start;
align-items: flex-start
}
.slideWorks_container {
width: 100%;
padding-top: 22vw;
padding-left: 6vw;
padding-right: 6vw
}
.slideWorks_header:before {
top: -.6vw;
left: 12.2vw;
height: 5.2vw
}
.slideWorks_num {
font-size: 4vw
}
.slideWorks_category {
left: 15vw;
font-size: 4vw
}
.slideWorks_title {
width: 100%;
margin-top: 2vw;
font-size: 7.5vw
}
.slideWorks_description {
display: none
}
.slideWorks_share {
display: none
}
.slideWorks_info {
display: inline-block;
margin-top: 3.5vw;
font-size: 4vw
}
.slideWorks_play {
width: 26vw;
height: 26vw;
border-radius: 13vw
}
.slideWorks_play>span {
padding-top: 11.5vw;
padding-right: 3vw;
font-size: 4vw
}
.slideWorks_play:after {
top: 13.2vw;
left: 17.8vw;
width: 2.2vw;
height: 2.2vw
}
.slideNavi {
bottom: 25px;
width: 250px;
margin-left: -125px;
font-size: 14px
}
.ios .slideNavi {
bottom: 20px;
width: 200px;
margin-left: -100px;
font-size: 17px
}
.slideNavi_next,
.slideNavi_prev {
width: 100px
}
.ios .slideNavi_next,
.ios .slideNavi_prev {
width: 200px
}
.ios .slideNavi_next {
text-align: center
}
.ios .slideNavi_prev {
display: none
}
.slideNavi_num {
position: relative;
top: 3px
}
.ios .slideNavi_num {
position: static
}
.slideNavi_title {
display: none
}
.ios .slideNavi_arrow {
position: static
}
.ios .slideNavi_next .slideNavi_arrow>span {
-ms-transform: translateY(-100%);
transform: translateY(-100%)
}
.slideNavi_arrow>span {
height: 5px
}
.ios .slideNavi_arrow>span {
margin-left: 100px;
width: 5px;
height: 43px
}
.slideNavi_count {
bottom: 5px
}
.ios .slideNavi_count {
bottom: 18px
}
.slideNavi_count:before {
top: 9px;
height: 22px
}
.ios .slideNavi_count:before {
top: 7px;
height: 25px
}
.isSlideInfoStart .slideInfo {
display: block
}
.slideInfo_container {
display: block;
box-sizing: border-box
}
.slideInfo_container {
padding-bottom: 20vw;
padding-left: 7vw;
padding-right: 7vw
}
.slideInfo_header {
margin-top: 22vw
}
.slideInfo_header:before {
top: -.6vw;
left: 11.75vw;
height: 5.5vw
}
.slideInfo_num {
font-size: 4vw
}
.slideInfo_category {
left: 14.5vw;
font-size: 4vw
}
.slideInfo_title {
margin-top: 2.5vw;
font-size: 7.5vw
}
.slideInfo_description {
margin-top: 4.5vw;
font-size: 3vw
}
.slideInfo_share {
margin-top: 13vw;
font-size: 3vw
}
.slideInfo_share_facebook,
.slideInfo_share_twitter {
top: -2.4vw;
width: 6.5vw;
height: 6.5vw;
border-radius: 2.4375vw
}
.slideInfo_share_facebook {
left: 11vw
}
.slideInfo_share_twitter {
left: 22.75vw
}
.slideInfo_share:before {
top: -1.7vw;
left: 20vw;
height: 5.5vw
}
.notSupported_name {
font-size: 20px;
line-height: 1.5
}
.notSupported_name>br {
display: block
}
.notSupported_name>span {
letter-spacing: 0
}
.notSupported_description {
font-size: 12px
}
.notSupported_sns {
font-size: 14px
}
.notSupported_sns>a {
margin-left: 20px;
margin-right: 20px
}
}
@media(-webkit-min-device-pixel-ratio:1.25),(min-resolution:1.25dppx){.underline:after{-ms-transform:scaleX(0) scaleY(.8);
transform:scaleX(0) scaleY(.8)
}
.pc .underline:hover:after {
-ms-transform: scaleX(1) scaleY(.8);
transform: scaleX(1) scaleY(.8)
}
}
@media(-webkit-min-device-pixel-ratio:1.5),(min-resolution:1.5dppx){.underline:after{-ms-transform:scaleX(0) scaleY(.5);
transform:scaleX(0) scaleY(.5)
}
.pc .underline:hover:after {
-ms-transform:scaleX(1) scaleY(.5);
transform:scaleX(1) scaleY(.5)
}
}
blockquote {
margin: 0 auto;
padding: 1em;
border-left: 4px solid #999;
}
blockquote:before {
display: none;
}
blockquote:not(:first-of-type) {
margin-top: .5em;
}
blockquote p {
color: #555;
}
blockquote footer {
margin-top: .5em;
padding: 0;
color: #777;
font-style: italic;
}
blockquote footer:before{
content: '— ';
}
blockquote footer:after{
content: ' —';
}
blockquote:nth-of-type(even) {
text-align: right;
border-left: none;
border-right: 4px solid #999;
}
blockquote:nth-of-type(even) footer {
text-align: right;
}
blockquote:nth-of-type(even) footer:before {
content: '';
}
blockquote:nth-of-type(even) footer:after {
content: ' —';
}
@element 'blockquote' and (min-width: 300px) {
blockquote {
padding: 1em 20% 1em 1em;
}
blockquote:nth-of-type(even) {
padding: 1em 1em 1em 20%;
}
}
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19F}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}
.carousel-cell {
width: 100%;
height: 200px;
margin-right: 10px;
border-radius: 5px;
counter-increment: carousel-cell;
}
.flickity-page-dots {
bottom: 0px;
}
.flickity-button{
display: none !important
}