CSS
1@charset "UTF-8";2 3html, body, div, span, applet, object, iframe,4h1, h2, h3, h4, h5, h6, p, blockquote, pre,5a, abbr, acronym, address, big, cite, code,6del, dfn, em, img, ins, kbd, q, s, samp,7small, strike, strong, sub, sup, tt, var,8b, u, i, center,9dl, dt, dd, ol, ul, li,10fieldset, form, label, legend,11table, caption, tbody, tfoot, thead, tr, th, td,12article, aside, canvas, details, embed,13figure, figcaption, footer, header, hgroup,14menu, nav, output, ruby, section, summary,15time, mark, audio, video {16 margin: 0;17 padding: 0;18 border: 0;19 font-size: 100%;20 font: inherit;21 vertical-align: baseline;22}23 24/* HTML5 display-role reset for older browsers */25article, aside, details, figcaption, figure,26footer, header, hgroup, menu, nav, section {27 display: block;28}29 30body {31 line-height: 1;32}33 34ol, ul {35 list-style: none;36}37 38blockquote, q {39 quotes: none;40}41 42blockquote:before, blockquote:after,43q:before, q:after {44 content: "";45 content: none;46}47 48table {49 border-collapse: collapse;50 border-spacing: 0;51}52/*----------------------------- 53テスト用追記 54-----------------------------*/55.height {56 display: inline-block;57 height: 2000px;58}59 60/*---------------------- 61base 62----------------------*/63*, *:before, *:after {64 box-sizing: border-box;65}66 67body {68 font-size: 16px;69 line-height: 1.5;70 font-family: "Noto Sans JP", Meiryo, sans-serif;71 color: #333;72 background-origin: border-box;73 background-size: 30%;74 overflow-x: hidden;75}76 77a {78 color: inherit;79 text-decoration: none;80}81a:hover {82 text-decoration: none;83}84 85img {86 max-width: 100%;87 vertical-align: middle;88}89 90input {91 margin: 0;92 padding: 0;93}94 95textarea {96 padding: 0;97 font: inherit;98 color: inherit;99}100 101input::-moz-placeholder {102 font-family: "Noto Sans JP", Meiryo, sans-serif;103 font-size: 1rem;104}105 106input::placeholder {107 font-family: "Noto Sans JP", Meiryo, sans-serif;108 font-size: 1rem;109}110 111input::-moz-placeholder, textarea::-moz-placeholder {112 color: #B0B0B0;113}114 115input::placeholder, textarea::placeholder {116 color: #B0B0B0;117}118 119button {120 font: inherit;121 padding: 0;122 background-color: transparent;123 border: none;124 color: inherit;125 cursor: pointer;126}127 128.p-grid-wrapper {129 width: 85.4166666vw;130 display: grid;131 margin: 0 auto;132}133 134/*------------------------------- 135site-title 136-------------------------------*/137.c-site-title__title {138 padding: 249px 0 156px 0;139 margin: 0 auto;140 text-align: center;141 font-size: 2rem;142 font-weight: 100;143}144.c-site-title__arrow-container {145 margin: 0 auto;146 text-align: center;147}148.c-site-title__arrow {149 position: relative;150 display: inline-block;151 width: 1px;152 height: 171px;153 margin: 0 17.7px 300px 17.7px;154 border-radius: 9999px;155 background-color: #333;156 -webkit-animation: line-move 5s ease-in-out infinite;157 animation: line-move 5s ease-in-out infinite;158}159.c-site-title__arrow::before, .c-site-title__arrow::after {160 content: "";161 position: absolute;162 bottom: 0;163 left: calc(50% - 0.5px);164 width: 1px;165 height: 26px;166 border-radius: 9999px;167 background-color: #333;168 transform-origin: 50% calc(100% - 0.5px);169}170.c-site-title__arrow::before {171 transform: rotate(45deg);172}173.c-site-title__arrow::after {174 transform: rotate(-45deg);175}176.c-site-title__arrow-text {177 transform: rotate(90deg);178 padding-left: 30px;179}180.c-site-title__arrow-container {181 height: 171px;182}183 184@-webkit-keyframes line-move {185 0% {186 height: 0;187 top: 0;188 }189 33% {190 height: 171px;191 top: 0;192 }193 66% {194 height: 0px;195 top: 171px;196 }197 100% {198 height: 0;199 top: 0;200 }201}202 203@keyframes line-move {204 0% {205 height: 0;206 top: 0;207 }208 33% {209 height: 171px;210 top: 0;211 }212 66% {213 height: 0px;214 top: 171px;215 }216 100% {217 height: 0;218 top: 0;219 }220}221 222/*------------------------ 223section-title 224------------------------*/225 226.c-section-title {227 color: #FF472E;228 line-height: 1;229}230.c-section-title-flex-container {231 display: flex;232 align-items: flex-end;233 flex-wrap: nowrap;234}235.c-section-title__ja {236 flex: 1;237 font-weight: 100;238 white-space: nowrap;239 font-size: 13vw;240}241.c-section-title__en {242 flex: 1;243 margin-right: 7.291666vw;244 text-align: right;245}246.c-section-title__line-container {247 display: block;248 height: 64px;249 width: 92.708334vw;250}251.c-section-title__line {252 content: "";253 display: inline-block;254 border-top: 1px solid #333;255 height: 64px;256 width: 0;257}258.c-section-title__line.on {259 -webkit-animation: liner 1s linear forwards;260 animation: liner 1s linear forwards;261}262@-webkit-keyframes liner {263 0% {264 width: 0;265 }266 100% {267 width: 100%;268 }269}270@keyframes liner {271 0% {272 width: 0;273 }274 100% {275 width: 100%;276 }277}278 279 280section {281 position: relative;282}283 284.c-pads {285 position: absolute;286}287 288/*--------------------------- 289background-decoration 290--------------------------*/291 292.p-background-pads {293 position: absolute;294}295 296.p-background-pads--works {297 aspect-ratio: 600/620;298 width: 40vw;299 top: -25.2vw;300}301 302.p-background-pads .c-pads--01 {303 top: 0;304 left: 1.44%;305 transform: rotate(144.53deg);306}307.p-background-pads .c-pads--02 {308 top: 28.09%;309 left: 0.64%;310 transform: rotate(169.49deg);311}312.p-background-pads .c-pads--03 {313 top: 21.19%;314 left: 34.66%;315 transform: rotate(156.85deg);316}317.p-background-pads .c-pads--04 {318 top: 47.86%;319 left: 41.72%;320 transform: rotate(144.74deg);321}322.p-background-pads .c-pads--05 {323 top: 59.16%;324 left: 77.66%;325 transform: rotate(168.17deg);326}327.p-background-pads .c-pads--06 {328 top: 85.06%;329 left: 89.06%;330 transform: rotate(168.17deg);331}
0 コメント