Highlighted

Erreur code

New Here ,
Jun 28, 2019

Copy link to clipboard

Copied

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.

Views

195

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Erreur code

New Here ,
Jun 28, 2019

Copy link to clipboard

Copied

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.

Views

196

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 28, 2019 0
LEGEND ,
Jun 28, 2019

Copy link to clipboard

Copied

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="">

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
New Here ,
Jun 28, 2019

Copy link to clipboard

Copied

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 _

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

léor38304831  wrote

Thanks for your help.

I have two other problems with my css file:

Expected RBRACE at line _, collar _

Unexpected token '{' at line _, collar _

It would have helped if you had shown the complete code because then we could have told you exactly where the braces do not match.

Always keep in mind that a left brace requires a corresponding right brace.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
New Here ,
Jun 28, 2019

Copy link to clipboard

Copied

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

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
LEGEND ,
Jun 28, 2019

Copy link to clipboard

Copied

BenPleysier  wrote

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

There's 13 errors and about 75 warnings but nothing I could find in relation to missing }

As I don't use, never seen, or even understand 50% of what css is being used its not really for me to diagnose..........hummm some kind of rough template I would assume.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
LEGEND ,
Jun 28, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
LEGEND ,
Jun 28, 2019

Copy link to clipboard

Copied

BenPleysier  wrote

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.

Didn't click on that link. Not sure why it just wasnt addressed in a more succinct paragraph rather than a link, but that's the W3c for you, a bit obtuse at getting the most important information that counts across in a streamlined fashion without having to read a 'bible'.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

Perhaps we should include a TL;DR section for the impatient ones.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0
osgood_ LATEST
LEGEND ,
Jun 28, 2019

Copy link to clipboard

Copied

BenPleysier  wrote

Perhaps we should include a TL;DR section for the impatient ones.

As a web-developer I just want the most critical and important information to hand quickly, not have to rummage through pages of garbage, which a lot of it is.

Maybe you might present your TL;DR idea to the Wappler guys - plenty over there that seemingly share my opinion.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0