@font-face {
font-family: 'Objective';
src: url("../images/fonts/Objective-Medium.html") format("woff2");
font-weight: 400
}
@font-face {
font-family: 'Objective-bold';
src: url("../images/fonts/Objective-Bold.html") format("woff2");
font-weight: 700
}
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
line-height: 1;
word-break: break-all
}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video, input, textarea {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
vertical-align: baseline;
background: transparent
}
img {
vertical-align: bottom
}
main, article, aside, details, figcaption, figure, footer, header, menu, nav, section, div, address, iframe, canvas, hr, textarea {
display: block
}
iframe {
max-width: 100% !important
}
img, embed, object, video {
max-width: 100%
}
a, label {
cursor: pointer
}
blockquote {
padding: 0;
margin: 0;
display: block
}
address, em {
font-style: normal
}
hr {
border: 0;
margin: 0;
padding: 0
}
ul, ol, li {
list-style: none
}
textarea {
resize: vertical;
overflow: hidden;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border: 0
}
input, button, select {
vertical-align: middle;
border-radius: 0;
box-sizing: border-box;
border: 0;
background: none;
margin: 0;
padding: 0;
box-shadow: none;
cursor: pointer;
white-space: normal;
outline: 0;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none
}
button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: .01px;
text-overflow: ""
}
select::-ms-expand {
display:none
}
table {
border-collapse: collapse
}
*:before, *:after {
padding: 0;
margin: 0;
line-height: 1
}
* {
box-sizing: border-box
}
*:before, *:after {
box-sizing: border-box
}
br {
font-size: 0
}
::selection {
background: #FF4F4F;
color: #FF4F4F
}
input::selection, textarea::selection {
color: #FF4F4F
}
html {
font-size: 62.5%;
min-height: 100%;
width: 100%;
padding: 0
}
body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
font-size: 16px;
line-height: 2;
font-family: "Objective", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
background: #fff;
color: #2f2c2a;
width: 1280px;
width: 100%;
min-width: 100%;
letter-spacing: .01rem;
-webkit-overflow-scrolling: touch
}
@media all and (max-width: 767px) {
body {
font-size: 12px
}
}
input, button, select, textarea {
font-family: "Objective", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif
}
input:focus, button:focus, select:focus, textarea:focus, a:focus, div:focus, aside:focus {
outline: none
}
a {
color: #1b98dc;
text-decoration: none
}
a:hover {
text-decoration: underline
}
.l-container {
padding-left: 7.8125vw;
padding-right: 7.8125vw;
margin: 0 auto;
position: relative
}
@media all and (max-width: 767px) {
.l-container {
padding-left: 8vw;
padding-right: 8vw
}
}
.l-inner {
width: 75vw;
max-width: 1000px;
margin: 0 auto
}
@media all and (max-width: 767px) {
.l-inner {
width: auto;
padding-left: 10vw;
padding-right: 10vw
}
}
.jp .text-en {
display: none;
font-size: 1.4rem
}
.jp .text-jp {
font-size: 1.6rem
}
@media all and (max-width: 767px) {
.jp .text-jp {
font-size: 12px
}
}
a.link-blank {
position: relative;
display: inline-block
}
a.link-blank:after {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
display: block;
position: absolute;
right: -15px;
top: 1px;
background: #F9F9F9;
transform: rotate(-50deg);
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
mix-blend-mode: exclusion;
transform-origin: center
}
a.link-blank:hover::after {
border-radius: 0%;
transform: rotate(-180deg)
}
img {
width: 100%;
height: auto
}
.btn {
text-align: center;
transition: .3s
}
.h2 {
text-align: left;
font-size: 5.3125vw;
letter-spacing: 3px;
font-family: "Spectral", serif;
margin-top: 50px
}
@media all and (max-width: 767px) {
.h2 {
font-size: 9vw
}
}
.h3 {
text-align: left;
font-size: 50px;
font-family: "Spectral", serif;
margin-top: 50px;
letter-spacing: 0.05em
}
@media all and (max-width: 767px) and (max-width: 767px) {
.h3 {
font-size: 9vw
}
}
.h4 {
text-align: left;
font-size: 50px;
letter-spacing: 2px;
font-family: "Objective-bold", sans-serif
}
@media all and (max-width: 767px) {
.h4 {
font-size: 24px
}
}
.bg-black {
padding-top: 15.625vw;
background: #222;
padding-bottom: 15.625vw;
margin-bottom: 15.625vw
}
.bg-black .text-jp {
color: #fff
}
.bg-black .h3 {
color: #fff;
mix-blend-mode: none
}
.black {
background: #222
}
.black .text-jp {
color: #fff
}
.black .h3 {
color: #fff;
mix-blend-mode: none;
white-space: pre
}
#wrap.black {
background: #000;
transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1)
}
#wrap.black .main, #wrap.black .footer {
opacity: 0;
transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
filter: grayscale(100%)
}
#pjaxContent .fv-main {
position: relative
}
#pjaxContent .fv-main.fadeIn {
animation: fadeIn .8s cubic-bezier(0.215, 0.61, 0.355, 1)
}
#pjaxContent .fv-main.fadeOut {
animation: fadeOut .8s cubic-bezier(0.215, 0.61, 0.355, 1)
}
#pjaxContent .fv-main.fadeOutDelay {
animation: fadeOut .8s 0.8s cubic-bezier(0.215, 0.61, 0.355, 1)
}
@keyframes fadeIn {
0% {
right:100%
}
100% {
right:0
}
}
@keyframes fadeOut {
0% {
right:0
}
100% {
right:-100%
}
}
.l-grid {
text-align: center
}
.l-grid .l-grid-inner {
font-size: 0;
letter-spacing: 0
}
.l-grid .l-grid-item {
display: inline-block;
vertical-align: top
}
.l-grid.l-grid-col2 .l-grid-item {
width: 50%
}
.android .l-grid.l-grid-col2 .l-grid-item {
width: 49.99999%
}
.l-grid.l-grid-col3 .l-grid-item {
width: 33.3333%
}
.l-grid.l-grid-col4 .l-grid-item {
width: 25%
}
.android .l-grid.l-grid-col4 .l-grid-item {
width: 24.99999%
}
.l-grid.l-grid-col5 .l-grid-item {
width: 20%
}
.android .l-grid.l-grid-col5 .l-grid-item {
width: 19.99999%
}
.l-grid.l-grid-col6 .l-grid-item {
width: 16.6666%
}
@media all and (max-width: 990px) {
.l-grid.l-grid-lg-col1 .l-grid-item {
width: 100%
}
.l-grid.l-grid-lg-col2 .l-grid-item {
width: 100%
}
.android .l-grid.l-grid-lg-col2 .l-grid-item {
width: 49.99999%
}
.l-grid.l-grid-lg-col3 .l-grid-item {
width: 33.3333%
}
.l-grid.l-grid-lg-col4 .l-grid-item {
width: 25%
}
.android .l-grid.l-grid-lg-col4 .l-grid-item {
width: 24.99999%
}
.l-grid.l-grid-lg-col5 .l-grid-item {
width: 20%
}
.android .l-grid.l-grid-lg-col5 .l-grid-item {
width: 19.99999%
}
.l-grid.l-grid-lg-col6 .l-grid-item {
width: 16.6666%
}
}
@media all and (max-width: 767px) {
.l-grid.l-grid-sm-col1 .l-grid-item {
width: 100%
}
.l-grid.l-grid-sm-col2 .l-grid-item {
width: 100%
}
.android .l-grid.l-grid-sm-col2 .l-grid-item {
width: 49.99999%
}
.l-grid.l-grid-sm-col3 .l-grid-item {
width: 33.3333%
}
.l-grid.l-grid-sm-col4 .l-grid-item {
width: 25%
}
.android .l-grid.l-grid-sm-col4 .l-grid-item {
width: 24.99999%
}
.l-grid.l-grid-sm-col5 .l-grid-item {
width: 20%
}
.android .l-grid.l-grid-sm-col5 .l-grid-item {
width: 19.99999%
}
.l-grid.l-grid-sm-col6 .l-grid-item {
width: 16.6666%
}
}
#wrap {
position: relative;
background: #F9F9F9;
overflow: hidden
}
@media all and (max-width: 767px) {
.index #wrap {
overflow-y: auto
}
}
@media all and (max-width: 767px) {
.index .l-header {
height: 17.33333vw;
background: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100
}
}
.hi {
position: fixed;
bottom: 2vw;
left: 3.5vw;
color: #fff;
font-size: 1vw;
z-index: 999;
text-decoration: none;
mix-blend-mode: exclusion
}
@media all and (max-width: 767px) {
.hi {
display: none
}
}
.menu-btn {
background-blend-mode: exclusion;
mix-blend-mode: exclusion;
position: fixed;
text-decoration: none;
top: 3vw;
right: 2vw;
display: flex;
align-items: center;
z-index: 101
}
@media all and (max-width: 767px) {
.menu-btn {
right: 5vw;
top: 4vw
}
}
.menu-btn:hover {
text-decoration: none
}
.menu-btn__circles {
position: relative;
height: 13px;
width: 13px;
margin-right: 0.75vw
}
@media all and (max-width: 767px) {
.menu-btn__circles {
height: 2vw;
width: 2vw;
margin-right: 2vw
}
}
.menu-btn__circle {
display: block;
position: absolute;
top: -2px;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 50%
}
.menu-btn__circle--top {
visiblity: hidden;
opacity: 0
}
.menu-btn__text {
color: #fff;
mix-blend-mode: exclusion;
font-size: 1.8rem
}
.filter {
position: absolute;
top: 7.5%;
left: 50%;
transform: translateX(-50%);
z-index: 10
}
.filter__list {
display: flex
}
.filter__item {
display: block
}
.filter__link {
position: relative;
display: block;
color: rgba(255,255,255,0.9);
text-decoration: none;
padding: 0 1.5vw;
font-size: 1.15vw;
overflow: hidden
}
.filter__link-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #fff;
transform: translate3d(-100%, 0, 0);
transition: transform .75s ease;
z-index: 2
}
.filter__link-mask span {
display: block;
padding: 0 1.5vw;
font-size: 1.15vw;
transform: translate3d(100%, 0, 0);
transition: transform .75s ease;
color: #fff
}
.filter__link:hover .filter__link-mask span, .filter__link.is-active .filter__link-mask span {
transform: translate3d(0, 0, 0)
}
.filter__link:hover .filter__link-mask, .filter__link.is-active .filter__link-mask {
transform: translate3d(0, 0, 0)
}
.logo {
position: relative
}
.logo-wrap {
position: relative;
z-index: 101
}
.logo--top {
position: fixed;
top: 2vw;
left: 2vw;
z-index: 10
}
@media all and (max-width: 767px) {
.logo--top {
top: 3.8vw;
left: 4vw
}
}
.logo--top img {
height: 1vw;
width: auto
}
.logo--resize {
margin-bottom: 1rem
}
.logo--resize img {
width: 10rem;
margin: 0 auto
}
.logo--mask {
overflow: hidden;
margin-bottom: 2rem
}
.logo--mask img {
width: 20rem;
height: auto;
margin: 0 auto;
visibility: hidden;
opacity: 0
}
.cercle-home {
z-index: 9999;
position: absolute;
height: 5vw;
width: 5vw;
display: block;
border-radius: 50%;
background-color: #FF4F4F
}
@media all and (max-width: 767px) {
.cercle-home {
height: 10vw;
width: 10vw
}
}
.cercle-home::before {
content: '';
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
width: 100%;
height: 100%;
background: #FF4F4F
}
@media all and (max-width: 767px) {
.cercle-home::before {
display: none
}
}
.cercle-home:hover::before {
transition: transform .6s ease 0s, opacity .6s ease 0s, -webkit-transform .6s ease 0s;
-webkit-transform: scale(1.4);
transform: scale(1.4);
opacity: 0
}
.resize {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 9999
}
.resize__inner {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #fff;
text-align: center;
text-decoration: none
}
.resize span {
color: rgba(255,255,255,0.5)
}
.l-footer {
width: 100%;
height: 100px
}
*, *:before, *:after {
box-sizing: border-box
}
.cursor-dot, .cursor-dot-outline {
pointer-events: none;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out
}
.cursor-dot {
width: 8px;
height: 8px;
background-color: #dc5656;
z-index: 100
}
.cursor-dot-outline {
z-index: 100;
width: 30px;
height: 30px;
background-color: rgba(229,128,128,0.5)
}
.slide__inner .hover {
mix-blend-mode: exclusion
}
.button {
flex: 1 1 auto;
text-align: center;
position: relative;
overflow: hidden;
transition: .3s;
width: 100%;
display: block;
padding: 40px;
border: 1px solid #eee
}
.button-big {
padding-top: 12.5vw;
padding-bottom: 12.5vw;
border: none;
background: #222
}
.button-big .button-text {
font-size: 5.3125vw;
letter-spacing: 0.1em
}
.button-big:after {
height: 100% !important;
background: #222
}
.button-text {
text-transform: capitalize;
line-height: 1;
text-decoration: none;
color: #2f2c2a;
transition: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
font-family: "Objective-bold", sans-serif
}
.button:after {
position: absolute;
transition: .3s;
content: '';
width: 0;
left: 50%;
bottom: 0;
height: 100px;
background: #222;
right: 0;
}
@media all and (max-width: 767px) {
.button:after {
display: none
}
}
.button:hover {
cursor: pointer;
transition: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
color: #fff;
text-decoration: none
}
.button:hover:after {
width: 100%;
left: 0
}
.button:hover .button-text {
text-decoration: none;
z-index: 10;
color: #fff;
position: relative
}
.button-text-arrow {
position: absolute;
right: 0;
top: 50%
}
.about .button-big:after {
background: #000;
background-blend-mode: exclusion
}
.about .button-text {
color: #fff
}
.about .button:hover .button-text {
color: transparent;
-webkit-text-stroke: 1px #fff;
text-stroke: 1px #fff
}
.footer-next {
position: absolute;
left: 7.8125vw;
top: 200px;
color: #000;
mix-blend-mode: exclusion
}
.footer-button {
background: #222;
position: relative
}
.footer-button>a {
padding-top: 12.5vw;
padding-bottom: 12.5vw;
display: block;
text-decoration: none
}
@media all and (max-width: 767px) {
.footer-button>a {
font-size: 9vw;
padding-top: 26.66667vw;
padding-bottom: 26.66667vw;
padding-right: 10vw;
text-align: right
}
}
.footer-button>a:hover {
text-decoration: none;
transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 1s
}
.footer-button>a:hover .footer-button-text {
text-decoration: none;
-webkit-text-stroke: 1px #fff;
text-stroke: 1px #fff;
color: transparent
}
.footer-button>a:hover .footer-button-text:before {
-webkit-text-stroke: 0px #fff;
text-stroke: 0px #fff
}
.footer-button>a:hover .footer-button-text:after {
height: 1.8rem
}
.footer-button .btn {
text-align: left
}
.footer-button-text {
color: #D4D4D4;
font-size: 5.3125vw;
font-family: "Objective-bold", sans-serif;
text-align: right;
font-weight: bold;
position: relative;
text-decoration: none;
letter-spacing: 0.3rem;
transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s
}
@media all and (max-width: 767px) {
.footer-button-text {
font-size: 9vw;
margin-left: 0;
text-align: right
}
}
.footer-button-text:before {
position: absolute;
right: 0em;
top: -2.5em;
color: #D4D4D4;
display: inline-block;
content: "Next project";
font-size: 1.8rem
}
@media all and (max-width: 767px) {
.footer-button-text:after {
position: absolute;
right: 4px;
bottom: 15.6vw;
display: inline-block;
content: "";
width: 148px;
mix-blend-mode: exclusion;
height: 2px;
background-color: #fff
}
}
@-webkit-keyframes nameIn {
from {
opacity:1;
-webkit-transform:translate3d(0, 50%, 0);
transform:translate3d(0, 50%, 0)
}
60% {
opacity:1
}
to {
opacity:1;
-webkit-transform:none;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@keyframes nameIn {
from {
opacity:0;
-webkit-transform:translate3d(0, 50%, 0);
transform:translate3d(0, 50%, 0)
}
60% {
opacity:1
}
to {
opacity:1;
-webkit-transform:none;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
#fake-loading {
position: fixed;
z-index: 1000;
left: 0;
bottom: 0;
top: 0;
right: 0;
width: 100vw;
height: 100vh;
background: #000;
animation: fakeLoad 1s linear forwards
}
@keyframes fakeLoad {
0% {
transform:translate3d(0, 0, 0) scale3d(1, 1, 1);
display:block;
height:200vh;
top:0;
opacity:1
}
99% {
opacity:1
}
100% {
transform:translate3d(0, 0, 0) scale3d(1, 1, 1);
display:block;
height:200vh;
top:0;
z-index:-1;
opacity:0;
}
}
.loader {
background: #000;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1000
}
.loader-animation {
background: #222;
animation: slideInUp 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
top: 0;
left: 0;
width: 100%;
height: 100vh
}
.loader-animation:before, .loader-animation:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
z-index: 100
}
.loader-animation:before {
background-color: #fff;
width: 100%;
animation: slideInUp 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards
}
.loader-animation:after {
background-color: #000;
animation-delay: .5s;
width: 100%;
animation: slideInUp 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards
}
#js-loader-cartain {
content: '';
position: fixed;
top: 0;
right: 0;
width: 100vw;
background-color: #000;
z-index: 101;
height: 200vh;
display: block
}
#js-loader-cartain.open {
animation: revealOb 1s 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards
}
@keyframes revealOb {
0% {
transform:translate3d(0, 0, 0) scale3ds(1, 1, 1);
display:block;
height:200vh;
top:0
}
65% {
left:0;
transform:translateY(-65vh) scale3d(1, 1, 1);
height:165vh;
display:block
}
100% {
transform:translateY(0vh) scale3d(1, 1, 1);
display:none;
height:0vh
}
}
@keyframes load1 {
0%, 80%, 100% {
box-shadow:0 0;
height:4em
}
40% {
box-shadow:0 -2em;
height:5em
}
}
@media all and (max-width: 767px) {
.paging {
display: none !important
}
.paging .naxt-link, .paging .prev-link {
display: none
}
}
.paging a {
text-decoration: none
}
.paging-bg {
z-index: -1;
width: 9.2vw;
height: 100vh;
position: absolute;
top: 0;
bottom: 0;
background: #fff
}
.next {
transition: all 0.8s cubic-bezier(0.76, 0.07, 0.24, 0.96)
}
.next-link {
position: fixed;
right: 0;
top: 0;
bottom: 0;
height: 100vh;
width: 10vw;
z-index: 99;
font-size: 1.6rem;
transition: all 0.8s cubic-bezier(0.76, 0.07, 0.24, 0.96);
mix-blend-mode: exclusion
}
@media all and (max-width: 767px) {
.next-link {
font-size: inherit
}
}
.next-link:after {
position: absolute;
top: 50%;
right: -9vw;
width: 5.5vw;
display: block;
height: 1px;
background: #fff;
mix-blend-mode: exclusion;
transform: translate(-50%, -50%);
content: "";
transition: all 0.8s cubic-bezier(0.76, 0.07, 0.24, 0.96)
}
.next-link a {
color: #fff;
transition: all 0.8s cubic-bezier(0.76, 0.07, 0.24, 0.96);
letter-spacing: 0.1rem
}
.next-link:hover {
transition: all 0.8s cubic-bezier(0.76, 0.07, 0.24, 0.96);
text-decoration: none
}
.next-link:hover .paging-bg {
right: 0
}
.next-link:hover .next-text {
text-decoration: none;
transition: all 0.8s cubic-bezier(0.76, 0.07, 0.24, 0.96);
letter-spacing: 0.1rem
}
.next-link:hover:after {
right: -5vw
}
.next-link .paging-bg {
right: -9.2vw;
transition: all 0.8s cubic-bezier(0.76, 0.07, 0.24, 0.96)
}
.next-text {
position: absolute;
top: 50%;
left: 48%;
z-index: 1000;
white-space: nowrap;
transform: translate(-50%, -50%) rotate(90deg);
transition: all 0.8s cubic-bezier(0.76, 0.07, 0.24, 0.96);
mix-blend-mode: exclusion
}
.next-text:hover {
text-decoration: none
}
.prev-link {
position: fixed;
left: 0;
top: 0;
bottom: 0;
height: 100vh;
width: 10vw;
z-index: 99;
font-size: 1.6rem;
mix-blend-mode: exclusion
}
@media all and (max-width: 767px) {
.prev-link {
font-size: inherit
}
}
.prev-link a {
color: #fff;
letter-spacing: 0.1rem
}
.prev-link:after {
position: absolute;
top: 50%;
left: -9vw;
width: 5vw;
display: block;
height: 1px;
background: #fff;
mix-blend-mode: exclusion;
transform: translate(-50%, -50%);
content: "";
transition: all 0.8s cubic-bezier(0.76, 0.07, 0.24, 0.96)
}
.prev-link:hover {
transition: all 0.8s cubic-bezier(0.76, 0.07, 0.24, 0.96);
text-decoration: none
}
.prev-link:hover .paging-bg {
left: 0vw;
filter: grayscale(100%)
}
.prev-link:hover .prev-text {
mix-blend-mode: exclusion;
text-decoration: none;
letter-spacing: 0.1rem
}
.prev-link:hover:after {
left: 0vw
}
.prev-link .paging-bg {
left: -9.2vw;
transition: all 0.8s cubic-bezier(0.76, 0.07, 0.24, 0.96)
}
.prev-text {
position: absolute;
top: 50%;
left: 48%;
white-space: nowrap;
transform: translate(-50%, -50%) rotate(-90deg);
z-index: 10;
mix-blend-mode: exclusion
}
.bigTypo {
width: 100vw;
height: 75vw;
position: relative;
background: #fff;
overflow: hidden
}
@media all and (max-width: 767px) {
.bigTypo {
height: 60vh
}
}
.bigTypo .big-title {
color: #eee;
font-family: "Spectral", serif;
font-size: 14vw;
letter-spacing: -.01em;
margin: 0;
display: block;
text-transform: uppercase;
white-space: nowrap
}
.bigTypo .big-title.front {
z-index: 50;
color: #FF4F4F
}
.bigTypo .centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.bigTypo span {
display: inline-block
}
.bigTypo .moving {
animation: animLeft 80s linear infinite
}
@media all and (max-width: 767px) {
.bigTypo .moving {
animation: animLeft 30s linear infinite
}
}
.bigTypo .clipping-container {
position: relative;
background: url("../images/about/makoto_hirao01.jpg") center center no-repeat;
background-size: 100%;
z-index: 20;
width: 60vw;
max-width: 1000px;
height: 40vw;
overflow: hidden
}
@keyframes animLeft {
0% {
transform:translate(-20%, -50%)
}
100% {
transform:translate(-70%, -50%)
}
}
.other {
background: #000;
padding: 7.8125vw 0
}
.other a {
color: #D4D4D4;
text-decoration: none;
transition: opacity 0.3s cubic-bezier(0.76, 0.07, 0.24, 0.96)
}
.other a:hover figcaption {
opacity: 0
}
.other .js-tilt {
margin: 1%
}
.other .h2 {
font-family: "Objective-bold", sans-serif;
font-size: 1.8rem;
margin-top: 0;
margin-bottom: 0;
color: #D4D4D4
}
.other figure {
position: relative;
z-index: -1
}
.other figure img {
opacity: 0.9
}
.other figure figcaption {
position: absolute;
bottom: 5%;
left: 5%;
font-weight: bold;
color: #fff;
opacity: 1;
transition: opacity 0.5s cubic-bezier(0.76, 0.07, 0.24, 0.96);
letter-spacing: 0.1rem
}
@media all and (max-width: 767px) {
.other figure figcaption {
position: static;
padding-top: 2vw;
letter-spacing: 0.1px
}
}
.other-list {
overflow: hidden;
padding-top: 3vw;
padding: 3vw 0.5% 0 0.5%
}
.other-list-item {
float: left;
overflow: visible;
visibility: visible;
width: 28%;
margin-right: 8%;
position: relative;
margin-bottom: 11%
}
@media all and (max-width: 767px) {
.other-list-item {
width: 45%;
margin-right: 10%
}
.other-list-item:nth-child(2n) {
margin-right: 0%
}
}
.other-list-item:nth-child(3n) {
margin-right: 0
}
@media all and (max-width: 767px) {
.other-list-item:nth-child(3n) {
margin-right: 10%
}
}
.other-list-item:nth-child(2), .other-list-item:nth-child(5) {
transform: translateY(2vw)
}
@media all and (max-width: 767px) {
.other-list-item:nth-child(2), .other-list-item:nth-child(5) {
transform: none;
margin-right: 0
}
}
.other-list-item:nth-child(3n+1) {
clear: left
}
@media all and (max-width: 767px) {
.other-list-item:nth-child(3n+1) {
clear: none;
float: left
}
}
.copyLight {
text-align: center;
color: #555;
line-height: 1;
padding: 2vw;
background: #000
}
.copyLight a {
display: none
}
@media all and (max-width: 767px) {
.copyLight {
font-size: inherit;
padding: 3.8vw
}
.copyLight a {
display: inline-block;
line-height: 1;
color: #555
}
}
.index {
font-family: "Objective", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
height: 100%;
overflow-y: scroll;
padding: 0;
margin: 0;
background-color: #111;
user-select: none
}
.index h1, .index h2 {
font-weight: Bold;
font-family: "Objective-bold", sans-serif;
letter-spacing: 0.03em
}
.index .logo {
position: relative
}
.index .logo--top {
position: fixed;
top: 2vw;
left: 2vw;
z-index: 10
}
@media all and (max-width: 767px) {
.index .logo--top {
top: 3.8vw;
left: 4vw
}
}
.index .logo--top img {
height: 1vw;
width: auto
}
.index .logo--resize {
margin-bottom: 1rem
}
.index .logo--resize img {
width: 10rem;
margin: 0 auto
}
.index .logo--mask {
overflow: hidden;
margin-bottom: 2rem
}
.index .logo--mask img {
width: 15rem;
height: auto;
margin: 0 auto;
visibility: hidden;
opacity: 0
}
.index figure {
padding: 0;
margin: 0
}
.index .scroll-content {
display: flex;
white-space: nowrap;
position: relative;
height: 100vh
}
.index .scroll-content--last {
position: absolute;
top: 0;
left: 0
}
.index .slide {
display: flex;
width: 50vw;
height: 100%;
padding: 20vh 0
}
@media all and (max-width: 767px) {
.index .slide {
width: 100%;
padding: 0 0 20vh
}
}
.index .slide--1 {
align-items: flex-start
}
.index .slide--2 {
align-items: flex-end
}
.index .slide--3 {
align-items: center
}
.index .slide:last-child {
width: 65vw;
padding-right: 15vw
}
@media all and (max-width: 767px) {
.index .slide:last-child {
width: 100%;
padding-right: 0
}
}
.index .slide__inner {
position: relative;
padding-left: 15vw;
width: 100%;
z-index: 11
}
@media all and (max-width: 767px) {
.index .slide__inner {
padding-left: 25vw
}
}
.index .slide__inner a {
@-webkit-transform: translate3d(0, 0, 0) scale(1) rotatex(0) rotatey(0);
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
position: relative;
display: block
}
.index .slide__sub-title {
position: absolute;
top: -5%;
left: 5vw;
color: rgba(255,255,255,0.5);
font-size: 1.3vw;
font-family: "Spectral", serif;
transform: translateZ(20px)
}
@media all and (max-width: 767px) {
.index .slide__sub-title {
font-size: 5vw
}
}
.index .slide__title {
position: absolute;
transform: translateZ(20px);
top: 7.5%;
left: 9vw;
color: #fff;
font-size: 4vw;
z-index: 2;
overflow: hidden
}
@media all and (max-width: 767px) {
.index .slide__title {
font-size: 8.5vw
}
}
.index .slide__project {
color: #fff;
position: absolute;
opacity: 0.6;
top: 100%;
right: 5%;
font-size: 1.54vw;
padding-top: 1.5vw;
font-family: "Spectral", serif
}
@media all and (max-width: 767px) {
.index .slide__project {
font-size: 4.9vw
}
}
.index .slide__img {
position: relative;
overflow: hidden;
padding-top: 65%;
width: 100%;
opacity: 0.95
}
@media all and (max-width: 767px) {
.index .slide__img {
width: 100%;
padding: 0 0 20vh
}
}
.index .slide__img figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.index .slide__img figure img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover
}
.index img {
display: block;
width: 100%;
height: auto
}
.index .scrollbar {
position: absolute;
bottom: 7.5%;
left: 20%;
right: 20%;
height: 1px;
background-color: rgba(255,255,255,0.25)
}
@media all and (max-width: 767px) {
.index .scrollbar {
background-color: rgba(255,255,255,0.25);
height: 20vw;
width: 1px;
left: 10vw;
bottom: 0%
}
}
.index .scrollbar__handle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: left;
background-color: #fff
}
@media all and (max-width: 767px) {
.index .scrollbar__handle {
width: 1px;
height: 3px;
display: block;
left: 0px;
transform-origin: center;
transform: none;
position: absolute;
animation: scroll 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite
}
@keyframes scroll {
from {
opacity:0.7;
top:-3px
}
80% {
opacity:1
}
to {
opacity:0;
top:100%
}
}
}
.index .mask {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1001;
visibility: hidden;
opacity: 0
}
.index .mask__slice {
flex: 1;
background-color: #000
}
.index .mask__inner {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%)
}
.index .mask-line {
position: relative;
transform-origin: left;
width: 20rem;
height: 2px;
overflow: hidden;
background-color: rgba(255,255,255,0.25);
visibility: hidden;
opacity: 0
}
.index .mask-line__inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
transform-origin: left
}
.index .slideFull {
width: 130vw
}
@media all and (max-width: 767px) {
.index .slideFull {
width: 100vw
}
}
.index .slideFull .slide__title span {
font-size: 13.8vw;
letter-spacing: 0;
color: #fff;
line-height: 1.2;
white-space: pre
}
@media all and (max-width: 767px) {
.index .slideFull .slide__title span {
font-size: 16vw;
margin-bottom: 10vw
}
.index .slideFull .slide__title span:nth-child(2):after {
content: "";
display: block
}
}
.index .slideFull .slide__sub-title {
left: 6vw;
bottom: 17vw;
font-size: 10.6vw;
top: inherit
}
.index .index-subtitle {
font-size: 5.3125vw;
letter-spacing: 0;
color: transparent;
line-height: 1.2;
-webkit-text-stroke: 1px #fff;
text-stroke: 1px #fff
}
@media all and (max-width: 767px) {
.index .index-subtitle {
font-size: 8.5vw;
margin-top: 7vw
}
}
.index a:hover {
cursor: pointer
}
.index .sp h1, .index .sp h2 {
mix-blend-mode: normal
}
.index .sp .hero {
margin-top: 25vh;
height: 57vh;
margin-bottom: 58vw
}
.index .sp .hero .slide__inner {
position: static;
padding: 0
}
.index .sp .hero h1.slide__title {
z-index: 0;
padding: 0 10vw;
position: static;
margin-left: 0vw;
transform: none
}
.index .sp .hero h1.slide__title span {
letter-spacing: 0.02em
}
.index .sp .hero .index-subtitle {
margin-bottom: 2vw;
letter-spacing: 0.02em
}
.index .sp .hero .index-hello {
display: none
}
@media all and (max-width: 480px) {
.index .sp .hero .index-hello {
display: block;
font-size: 1.8rem;
letter-spacing: 0.01em;
font-family: "Objective", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif
}
}
.index .sp-gallery img {
opacity: 0.90;
box-shadow: 8px 8px 6vw #000
}
.index .sp .button-text {
color: #fff
}
.js-tilt {
position: relative;
display: block;
box-shadow: 8px 8px 6vw rgba(0,0,0,0.7)
}
.js-tilt.moocres {
background: url(../images/moocres/main%402x.jpg) no-repeat;
background-size: cover
}
.js-tilt.mc {
background: url(../images/mc/main.jpg) no-repeat;
background-size: cover
}
.js-tilt.bit {
background: url(../images/bit/main%402x.jpg) no-repeat;
background-size: cover
}
.js-tilt.salonia {
background: url(../images/salonia/main%402x.jpg) no-repeat;
background-size: cover
}
.js-tilt.cid {
background: url(../images/cid/main.jpg) no-repeat;
background-size: cover
}
.fv {
width: 100%;
padding-left: 9vw;
z-index: 10;
vertical-align: top
}
@media all and (max-width: 767px) {
.fv {
padding-left: 0
}
}
.fv:after {
position: absolute;
width: 100%;
height: 100%;
background: #000;
content: "";
display: block;
top: 0;
right: 0;
animation: photoReveral 1.6s cubic-bezier(0.76, 0.07, 0.24, 0.96) forwards
}
.fv-title {
margin-left: 41.01562vw;
margin-top: 4.6875vw;
margin-bottom: 9.375vw
}
@media all and (max-width: 767px) {
.fv-title {
margin-left: 0;
text-align: right;
padding-right: 9vw
}
}
.fv-title>p {
font-family: "Spectral", serif;
font-size: 1.8rem
}
@media all and (max-width: 767px) {
.fv-title>p {
font-size: 1.4rem
}
}
.fv-title h2 span {
font-size: 5.3125vw;
font-family: "Objective-bold", sans-serif;
line-height: 1.5;
letter-spacing: 1px;
margin-bottom: 3rem;
padding-right: 5vw
}
@media all and (max-width: 767px) {
.fv-title h2 span {
padding-right: 0;
font-size: 9vw
}
}
.fv-main {
height: 45.3125vw;
overflow: hidden;
position: relative;
z-index: 10
}
@media all and (max-width: 767px) {
.fv-main {
height: 90.66667vw
}
}
.fv-main img {
min-height: 100%
}
@media all and (max-width: 767px) {
.fv-main img {
min-height: auto
}
}
@media all and (max-width: 767px) {
.fv {
height: auto;
margin-bottom: 10vw
}
}
.fv-photo {
position: relative
}
.fv-photo:before {
position: absolute;
width: 100%;
height: 100%;
background: #F9F9F9;
content: "";
display: block;
top: 0;
left: 0;
animation: photoReveral 1.6s cubic-bezier(0.76, 0.07, 0.24, 0.96) forwards
}
.fv-photo img {
min-height: 100%;
width: auto
}
@media all and (max-width: 767px) {
.fv-photo img {
min-height: 100%;
width: 100%;
object-fit: cover
}
}
@media all and (max-width: 767px) {
.fv-photo {
height: 116%
}
}
@-webkit-keyframes photoReveral {
0% {
transform:translateX(0)
}
65% {
transform:translateX(0)
}
100% {
transform:translateX(100%)
}
}
@keyframes photoReveral {
0% {
transform:translateX(0)
}
65% {
transform:translateX(0)
}
100% {
transform:translateX(100%)
}
}
.detail {
position: relative
}
.detail main {
padding-top: 10vw
}
@media all and (max-width: 767px) {
.detail main {
padding-top: 100px
}
.detail main .h3 {
font-size: 6.3vw;
margin-top: 0
}
}
.detail .text-en {
font-family: "Objective-bold", sans-serif;
letter-spacing: 0.3rem
}
.detail .article {
position: relative
}
.detail .data {
background-color: #222;
color: #D4D4D4;
padding-bottom: 11.71875vw;
margin-bottom: 15.625vw;
padding-left: 9vw;
padding-right: 7.8125vw;
padding-top: 19.53125vw;
margin-top: -11.71875vw
}
@media all and (max-width: 767px) {
.detail .data {
font-size: 12px;
margin-top: -20.8vw
}
}
@media all and (max-width: 767px) {
.detail .data .d-flex {
flex-direction: column
}
}
.detail .data-intro {
text-align: left;
width: 480px
}
@media all and (max-width: 767px) {
.detail .data-intro {
width: auto;
margin-bottom: 2em
}
}
.detail .data-prof {
text-align: left;
padding-right: 4.6875vw;
max-width: 420px
}
@media all and (max-width: 767px) {
.detail .data-prof {
width: auto
}
.detail .data-prof:first-child {
padding-top: 5vw
}
}
.detail .data-prof dl {
margin-bottom: 2rem;
width: 100%;
display: flex
}
@media all and (max-width: 767px) {
.detail .data-prof dl {
margin-bottom: 1rem
}
}
.detail .data-prof dl dt {
font-family: "Spectral", serif;
font-size: 1.8rem;
font-weight: normal;
text-align: left;
padding-right: 0.3em
}
@media all and (max-width: 767px) {
.detail .data-prof dl dt {
font-size: 1.4rem;
white-space: pre
}
}
.detail .data-prof dl dd {
text-align: left;
font-family: "Spectral", serif;
font-size: 1.8rem
}
.detail .data-prof dl dd:before {
content: "-";
padding-left: 0.3em;
margin-right: 0.5em
}
@media all and (max-width: 767px) {
.detail .data-prof dl dd {
font-size: 12px;
font-size: 1.4rem;
padding-left: 1.3em;
text-indent: -1.3em
}
}
.detail .data-prof dl dd a {
color: #D4D4D4
}
.detail .data-link {
font-family: "Spectral", serif;
font-size: 1.8rem;
margin-left: 9.375vw;
white-space: nowrap
}
@media all and (max-width: 767px) {
.detail .data-link {
flex-direction: column;
margin-left: 0;
font-size: inherit;
text-align: right;
padding-right: 20px
}
}
.detail .data-link a {
text-decoration: none;
color: #eee;
white-space: nowrap;
font-size: 1.8rem
}
@media all and (max-width: 767px) {
.detail .data-link a {
font-size: inherit
}
}
.detail .items {
margin-bottom: 15.625vw
}
.detail .items-short {
margin-bottom: 9.375vw
}
.detail .items .l-grid-item:nth-child(1) {
padding-right: 3.51852%
}
.detail .items .l-grid-item:nth-child(2) {
padding-left: 3.51852%
}
.detail .items .l-grid-item p {
text-align: left;
padding: 30px 0
}
.detail .items .l-grid-item img {
width: 100%
}
.feature {
display: flex;
width: 100%
}
@media all and (max-width: 767px) {
.feature {
flex-direction: column
}
}
.feature-img {
width: 62.5vw
}
@media all and (max-width: 767px) {
.feature-img {
width: 100%
}
}
.feature-img img.u-down {
transform: translateY(11.71875vw)
}
@media all and (max-width: 767px) {
.feature-img img.u-down {
transform: none
}
}
@media all and (max-width: 767px) {
.feature-img img {
width: 100%;
transform: none
}
}
.feature-text {
padding-left: 5.9375vw;
padding-right: 7.8125vw;
padding-top: 7.03125vw;
flex: 1
}
@media all and (max-width: 767px) {
.feature-text {
padding-left: 9vw;
padding-right: 9vw;
padding-top: 8vw;
padding-bottom: 8vw
}
}
.feature-text h2 {
color: #D4D4D4
}
.feature-text p {
color: #D4D4D4
}
.detail .footer-button>.btn {
text-align: right;
margin-right: 12vw
}
@media all and (max-width: 767px) {
.detail .footer-button>.btn {
margin-right: 0
}
}
.cid .feature-award {
width: 37.5vw;
padding-left: 13.28125vw;
padding-right: 7.8125vw;
padding-top: 5%
}
@media all and (max-width: 767px) {
.cid .feature-award {
display: none
}
}
.cid .feature-img {
width: 62.5vw
}
@media all and (max-width: 767px) {
.cid .feature-img {
width: 100%;
padding-left: 10vw;
padding-right: 10vw
}
}
.cid .feature-img img {
width: 100%
}
.cid .feature.items.bg-black {
margin-bottom: 0
}
.cid .movie-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 1080px
}
.cid .movie-wrap video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%
}
.cid .movie-wrap {
padding-bottom: 69%
}
.cid .movie-wrap video {
width: 124%;
max-width: none
}
.cid .mobile {
padding-top: 7.8125vw;
padding-bottom: 7.8125vw;
background: linear-gradient(180deg, #EAE8E8, #EAE8E8 50%, #E83F53 50%, #E83F53 100%)
}
.mc .feature.black {
margin-bottom: 31.25vw
}
.mc .data-prof {
width: 700px;
max-width: none
}
@media all and (max-width: 767px) {
.mc .data-prof {
width: 100%;
min-width: auto
}
}
.mc .feature {
flex-direction: row
}
.mc .feature img {
width: 100%
}
@media all and (max-width: 767px) {
.mc .the_day {
flex-direction: column
}
.mc .the_day .h3 {
margin-top: 0
}
}
.moocres .feature {
margin-bottom: 31.25vw
}
.moocres .mobile {
padding-top: 7.8125vw;
padding-bottom: 7.8125vw;
background: linear-gradient(180deg, #EAE8E8, #EAE8E8 50%, #3D17DC 50%, #3D17DC 100%)
}
.moocres .bg-black {
margin-bottom: 0
}
.moocres .data-prof {
width: 430px;
max-width: none;
min-width: 430px
}
@media all and (max-width: 767px) {
.moocres .data-prof {
width: 100%;
min-width: auto
}
}
.bit .mobile {
padding-top: 7.8125vw;
padding-bottom: 7.8125vw;
background: linear-gradient(180deg, #202020, #202020 50%, #080050 50%, #080050 100%)
}
.bit .data-prof {
width: 430px;
max-width: none
}
@media all and (max-width: 767px) {
.bit .data-prof {
width: 100%
}
}
.salonia .feature.bg-black {
margin-bottom: 0
}
.salonia .feature-img {
margin: 0 auto
}
@media all and (max-width: 767px) {
.salonia .feature-img {
width: 100%
}
}
.salonia .movie-wrap {
margin: 0 auto;
width: 100%
}
.salonia .movie-wrap {
position: relative;
padding-bottom: 54.5%;
height: 0;
overflow: hidden;
max-width: 1080px
}
.salonia .mobile {
padding-top: 7.8125vw;
padding-bottom: 7.8125vw;
background: linear-gradient(180deg, #000, #000 50%, #fff 50%, #fff 100%)
}
.insta {
position: relative;
height: 0;
overflow-y: hidden;
padding-bottom: 70%
}
.about a {
color: #888;
text-decoration: none
}
.about a.link-blank:after {
background: #222
}
.about h2 {
margin-top: 0;
line-height: 1
}
.about .jury {
position: absolute;
top: 50%;
right: 12.5%;
transform: translate(calc(12.5% + 3vw), -50%);
width: 13.28125vw
}
@media all and (max-width: 767px) {
.about .jury {
bottom: 0%;
width: 26.66667vw;
height: 26.66667vw;
transform: translate(calc(12.5%), 100%);
z-index: 100
}
}
.about .myname {
background: #222;
background: linear-gradient(90deg, #222 0%, #222 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
margin-top: 9.375vw;
position: relative
}
@media all and (max-width: 767px) {
.about .myname {
margin-top: 17.33333vw;
background: #222
}
}
.about .myname .l-inner {
padding-bottom: 7.8125vw;
padding-top: 6.25vw
}
@media all and (max-width: 767px) {
.about .myname .l-inner {
font-size: 9vw;
padding-bottom: 26.66667vw;
padding-top: 21.33333vw
}
}
.about .myname-title {
color: #eee;
font-weight: bold;
font-size: 5.3125vw;
font-family: "Objective-bold", sans-serif
}
@media all and (max-width: 767px) {
.about .myname-title {
font-size: 9vw
}
}
.about .myname-title p {
color: #fff;
font-size: 1.6rem;
line-height: 2.4
}
@media all and (max-width: 767px) {
.about .myname-title p {
font-size: 1.2rem
}
}
.about .myname-title p .slash {
display: inline-block;
margin-right: 8px;
margin-left: 8px
}
.about .myname-title p .repesen {
display: inline-block;
font-family: "Objective", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-weight: normal
}
@media all and (max-width: 767px) {
.about .myname-title p .slash {
display: none;
margin-right: 0
}
.about .myname-title p .repesen {
display: block
}
}
.about .myname-list {
width: 46%;
align-items: flex-start
}
.about .myname-list li {
font-family: "Spectral", serif;
font-size: 24px;
text-align: right
}
.about .face {
margin-bottom: 9.375vw
}
@media all and (max-width: 767px) {
.about .face {
position: relative;
overflow: hidden
}
.about .face .jury-sp {
position: absolute;
top: 6%;
right: 12.5%;
z-index: 99;
transform: translate(calc(12.5%), -75%);
width: 26.66667vw;
height: 26.66667vw
}
}
.about .face-inner {
width: 100%;
justify-content: space-between
}
.about .face-img {
width: 62.5vw;
width: 100%;
max-width: 480px
}
@media all and (max-width: 767px) {
.about .prof {
padding: 10vw
}
}
.about .prof .d-flex {
justify-content: space-between;
width: 100%;
flex: 1
}
.about .prof-disc {
width: 64.58333%
}
@media all and (max-width: 767px) {
.about .prof-disc {
width: auto
}
}
.about .prof h2 {
font-weight: normal;
font-family: "Spectral", serif;
white-space: pre;
margin-bottom: 20px;
font-size: 36px
}
@media all and (max-width: 767px) {
.about .prof h2 {
font-size: 7vw
}
}
.about .prof .text-en {
text-align: justify
}
.about .prof-text {
margin-bottom: 1em
}
@media all and (max-width: 767px) {
.about .prof-text {
letter-spacing: 0
}
}
.about .prof-text dl {
margin-bottom: 2em
}
.about .prof-history {
margin-bottom: 9.375vw
}
@media all and (max-width: 767px) {
.about .prof-history {
flex-direction: column
}
}
.about .prof-blog {
margin-bottom: 9.375vw
}
@media all and (max-width: 767px) {
.about .prof-blog {
flex-direction: column
}
}
.about .button-text {
text-transform: none
}/*!
* animate.css -http://daneden.me/animate
* Version - 3.5.0
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2016 Daniel Eden
*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}
@-webkit-keyframes fadeOut {
from {
opacity:1;
-webkit-transform:translate3d(0, 0%, 0);
transform:translate3d(0, 0%, 0)
}
to {
opacity:0;
-webkit-transform:translate3d(0, 15%, 0);
transform:translate3d(0, 15%, 0)
}
}
@keyframes fadeOut {
from {
opacity:1;
-webkit-transform:translate3d(0, 0%, 0);
transform:translate3d(0, 0%, 0)
}
to {
opacity:0;
-webkit-transform:translate3d(0, 15%, 0);
transform:translate3d(0, 15%, 0)
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@-webkit-keyframes textInUp {
from {
opacity:0;
-webkit-transform:translate3d(0, 15%, 0);
transform:translate3d(0, 15%, 0)
}
70% {
}
to {
opacity:1;
@-webkit-transform:none
}
}
@keyframes textInUp {
from {
opacity:0;
-webkit-transform:translate3d(0, 15%, 0);
transform:translate3d(0, 15%, 0)
}
70% {
opacity:0.7
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.textInUp {
-webkit-animation-name: textInUp;
animation-name: textInUp;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@-webkit-keyframes fadeInUp {
from {
opacity:0;
-webkit-transform:translate3d(0, 15%, 0);
transform:translate3d(0, 15%, 0)
}
to {
opacity:1;
@-webkit-transform:none
}
}
@keyframes fadeInUp {
from {
opacity:0;
-webkit-transform:translate3d(0, 15%, 0);
transform:translate3d(0, 15%, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@-webkit-keyframes slideInLeft {
from {
opacity:0;
-webkit-transform:translate3d(-15%, 0, 0);
transform:translate3d(-15%, 0, 0)
}
to {
opacity:1;
@-webkit-transform:none
}
}
@keyframes slideInLeft {
from {
opacity:0;
-webkit-transform:translate3d(-15%, 0, 0);
transform:translate3d(-15%, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
visibility:visible
}
to {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@keyframes slideInUp {
from {
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
visibility:visible
}
to {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0);
visibility:visible
}
to {
-webkit-transform:translate3d(0%, 0, 0);
transform:translate3d(0%, 0, 0)
}
}
@keyframes slideInLeft {
from {
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0);
visibility:visible
}
to {
-webkit-transform:translate3d(0%, 0, 100%);
transform:translate3d(0, 0, 100%)
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft
}
@-webkit-keyframes nameIn {
from {
opacity:1;
-webkit-transform:translate3d(0, 50%, 0);
transform:translate3d(0, 50%, 0)
}
60% {
opacity:1
}
to {
opacity:1;
-webkit-transform:none;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@keyframes nameIn {
from {
opacity:0;
-webkit-transform:translate3d(0, 50%, 0);
transform:translate3d(0, 50%, 0)
}
60% {
opacity:1
}
to {
opacity:1;
-webkit-transform:none;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
.nameIn {
-webkit-animation-name: nameIn;
animation-name: nameIn;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@keyframes itemIn {
from {
opacity:0;
transform:translate3d(0, 100px, 0) scale(0.95)
}
to {
opacity:1;
transform:translate3d(0, 0, 0) scale(1)
}
}
.itemIn {
-webkit-animation-name: itemIn;
animation-name: itemIn;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
@keyframes blanklink {
from {
border-radius:50%
}
to {
border-radius:0%
}
}
.blanklink {
-webkit-animation-name: blanklink;
animation-name: blanklink;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.text {
margin: auto;
text-align: center;
line-height: 1.75
}
.line {
transform-origin: 0% 50%;
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0.29, 0.135, 0.055, 1);
animation-fill-mode: both
}
.line:nth-child(1) {
animation-delay: 0.1s
}
.line:nth-child(1) a::after {
animation-delay: 0.25s
}
.line:nth-child(2) {
animation-delay: 0.2s
}
.line:nth-child(2) a::after {
animation-delay: 0.5s
}
.line:nth-child(3) {
animation-delay: 0.3s
}
.line:nth-child(3) a::after {
animation-delay: 0.75s
}
.line:nth-child(4) {
animation-delay: 0.4s
}
.line:nth-child(4) a::after {
animation-delay: 1s
}
.animation .line {
animation-name: line-appear
}
.animation .line a::after {
animation-name: underline-appear
}
@keyframes line-appear {
0% {
transform:rotate(5deg) translate3D(0, 50%, 0);
opacity:0
}
100% {
transform:rotate(0) translate3D(0, 0, 0);
opacity:1
}
}
@keyframes underline-appear {
0% {
transform:scaleX(0)
}
100% {
transform:scaleX(1)
}
}
.u-hidden {
overflow: hidden;
text-indent: 120%;
white-space: nowrap
}
.u-hide {
display: none
}
.u-show {
display: block
}
.u-clear {
zoom: 1
}
.u-clear:before, .u-clear:after {
content: "";
display: block
}
.u-clear:after {
clear: both
}
.u-elps {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis
}
.u-notap {
-webkit-tap-highlight-color: rgba(0,0,0,0)
}
.u-hide {
display: none
}
.u-pc-hidden {
display: none
}
.u-sp-hidden {
display: block
}
.u-en {
font-family: "Spectral", serif
}
em {
font-style: italic
}
.text-jp {
font-family: "Objective", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif
}
.d-flex {
display: flex
}
.ta-left {
text-align: left
}
@media all and (max-width: 767px) {
.u-pc-hidden {
display: block
}
.u-sp-hidden {
display: none
}
.u-sp-half {
width: 50%
}
}
12
Replies
AdChoices