/*エフェクト系--------------*/ .reveal::before{ background:#000; } #header{ background:transparent; } @-webkit-keyframes resetcolor{ from { background:transparent; } to { background:transparent; } } /*メイン-----------------------------*/ section{ position:relative; width:100%; height:100vh; top:0; left:0; padding:0; margin:0; color:#fff; } section > img{ position:absolute; height:25vh; } section:nth-of-type(1){ background:url(../img/image_01.jpg) no-repeat center center; background-size:cover; } section:nth-of-type(2){ background:url(../img/image_02.jpg) no-repeat center center; background-size:cover; } section:nth-of-type(3){ background:url(../img/image_03.jpg) no-repeat center center; background-size:cover; } section:nth-of-type(4){ background:url(../img/image_04.jpg) no-repeat center center; background-size:cover; } section:nth-of-type(5){ background:url(../img/image_05.jpg) no-repeat center center; background-size:cover; } section:nth-of-type(6){ background:url(../img/image_06.jpg) no-repeat center center; background-size:cover; } section:nth-of-type(7){ background:url(../img/image_07.jpg) no-repeat center center; background-size:cover; } section:nth-of-type(8){ background:url(../img/image_08.jpg) no-repeat center center; background-size:cover; } section:nth-of-type(9){ background:url(../img/image_09.jpg) no-repeat center center; background-size:cover; } section:nth-of-type(10){ background:url(../img/image_10.jpg) no-repeat center center; background-size:cover; } section:nth-of-type(2) img,section:nth-of-type(3) img{ top:0; left:0; } section:nth-of-type(4) img,section:nth-of-type(5) img{ bottom:0; right:0; } section:nth-of-type(6) img,section:nth-of-type(7) img{ top:0; right:0; } section:nth-of-type(8) img,section:nth-of-type(9) img{ top:0; left:0; } #slogan{ position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); -webkit- transform:translateY(-50%); } #slogan div.imagemov { text-align:center; } #slogan div.imagemov p { margin:20px auto 0; font-size:14px; letter-spacing:1px; background-color:transparent; } #slogan div.imagemov p img { width:90%; } section > div{ position:absolute; text-align:left; } section:nth-of-type(2) > div{ top:10vh; left:55%; } section:nth-of-type(3) > div{ top:13vh; left:10%; } section:nth-of-type(4) > div{ bottom:12vh; right:8%; } section:nth-of-type(5) > div{ top:22vh; left:5%; } section:nth-of-type(6) > div{ top:30vh; left:18%; } section:nth-of-type(7) > div{ top:40vh; left:60%; } section:nth-of-type(8) > div{ top:40vh; left:5%; } section:nth-of-type(9) > div{ bottom:12vh; right:10%; } section:nth-of-type(10) > div{ top:50%; left:50%; width:auto; transform:translateY(-50%) translateX(-50%); -webkit- transform:translateY(-50%) translateX(-50%); } section:nth-of-type(10) > div img{ width:45vw; } section p{ display:table; position:relative; padding:4px; margin:0 0 2px 0; font-size:38px; background:#000; line-height:1; letter-spacing:-2px; } section > div div:nth-of-type(1){ margin:0; font-size:22px; } section > div div:nth-of-type(2){ margin:30px 0 0 0; font-size:12px; } section.client{ height:auto; color:#333; } .clientTitle{ position:relative; width:100%; margin:40px auto; text-align:center; } .clientTitle img { margin:100px 0 50px 0; width:20%; } @media screen and (max-width: 770px) { body{ font-size:3.6vw; } .pc{ display:none; } .sp{ display:block; } /*メイン-----------------------------*/ section p{ font-size:20px; } section > img{ position:absolute; height:10vh; } section:nth-of-type(10) > div img{ width:50vw; } .clientTitle img{ width:80%; } .clientTitle img { margin:50px 0 20px 0; width:40%; } } @media screen and (max-width: 420px) { body{ font-size:3.6vw; } .pc{ display:none; } .sp{ display:block; } /*メイン-----------------------------*/ section p{ font-size:20px; } section > img{ position:absolute; height:10vh; } section:nth-of-type(10) > div img{ width:50vw; } .clientTitle img{ width:80%; } .clientTitle img { margin:50px 0 20px 0; width:60%; } }