Skip to main content
L
léor38304831
Participant
June 28, 2019
Question

Erreur code

  • June 28, 2019
  • 2 replies
  • 1296 views

Bonjour,

Je suis en cours de développent d'un site web. Il est affiché qu'il y a deux erreurs mais je ne sais pas comment faire pour les résoudre:

  1. The attribute [ href ]  of the tag [ link ] must have a value.
  2. An alt attribute must be present on <img> elements

Merci d'avance pour votre aide.

_______________________________________________

Hello,

I am in the process of developing a website. It is displayed that there are two errors but I do not know how to solve them:

  1. The attribute [ href ]  of the tag [ link ] must have a value.
  2. An alt attribute must be present on <img> elements

Thank you in advance for your help.

This topic has been closed for replies.

2 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
June 28, 2019

Running the following code through the HTML checker

<!doctype html>

  <html lang="en"><head>

    <meta charset="UTF-8">

    <title>Untitled Document</title>

  </head>

  <body>

    <a href="">About Me</a>

    <img src="img/wappler-logo.png">

    <a class="arrow"></a>

  </body>

</html>

I get the following error

What does this mean?

  1. (The attribute [ href ]  of the tag [ link ] must have a value.) is not an error. But at the same time, both anchor tags in my example are not true hyperlinks. A true hyperlink contains a valid hyperlink reference ( [ href ]) attribute, i.e. contains a URI.
  2. HTML 5 does not specify that an [ alt ] attribute is a must. Hence, the [ alt ] attribute need not be used. However the specification goes on to say:
    The HTML5 specification requires conformance checkers to report the lack of an alt attribute as an error, except in certain cases; for details, see the Guidance for conformance checkers subsection of the Requirements for providing text to act as an alternative for images section of the spec.

    Authoring useful alt attribute content requires the author to carefully consider the context in which the image appears and the function that image may have in that context. For guidance on writing text alternatives refer to the Requirements for providing text to act as an alternative for images section of the spec


    This means that the checker needs to report the lack of an [ alt ] attribute; but is technically not an coding error.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
O
osgood_
Legend
June 28, 2019

BenPleysier  wrote


  1. HTML 5 does not specify that an [ alt ] attribute is a must. Hence, the [ alt ] attribute need not be used. However the specification goes on to say:
    The HTML5 specification requires conformance checkers to report the lack of an alt attribute as an error, except in certain cases; for details, see the Guidance for conformance checkers subsection of the Requirements for providing text to act as an alternative for images section of the spec.

    Authoring useful alt attribute content requires the author to carefully consider the context in which the image appears and the function that image may have in that context. For guidance on writing text alternatives refer to the Requirements for providing text to act as an alternative for images section of the spec



The alt attribute is mainly for the purpose of screen readers, it also might server a purpose for images that dont automatically load such as when building an email template.  Its not a coding error but its always 'polite' to add if there is something descriptive that could enhance the website for those at a disadvantage visually. As it requires zero extra time its good to just get into the habit of making sure one is present, regardless of what the w3c's take on it is, technically.

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
June 28, 2019

That is why I included the link to Requirements for providing text to act as an alternative for images​ which states

It is important what W3C's take is.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
O
osgood_
Legend
June 28, 2019

1) You have empty  anchor links:

<a href="">About Me</a>

Either add a link:

<a href="about_me.html">About Me</a>

or add #

<a href="#">About Me</a>

2) An alt attribute should be declared on all of your img tags:

<img src="rabbit.jpg" alt="Brown rabbit on grass">

or if its a non descriptive image:

<img scr="bullet.jpg" alt="">

L
léor38304831Author
Participant
June 28, 2019

Merci pour votre aide.

J'ai deux autres problèmes avec mon fichier css:

  1. Expected RBRACE at line _, col _
  2. Unexpected token '{' at line _, col _

___________

Thanks for your help.

I have two other problems with my css file:

Expected RBRACE at line _, collar _

Unexpected token '{' at line _, collar _

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
June 28, 2019

@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%

}

}


A rather long document, but cannot detect any real problems.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices