body { margin: 0; padding: 0; } h1 { background: linear-gradient(45deg, #833ab4, #fc9d45, #fc4545, #edfc45, #66fc45); -webkit-background-clip: text; color: transparent; } h3{ text-shadow: 1px 1px 2px #ff69b4 ; } @media screen and (max-width: 768px) { p { background-color: black; color: green; } } @media screen and (max-width: 480px) { p { background-color: black; color: red; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { } .bg-transparent { position: relative; padding: 100px 0; height: 100vh; /* 画面の高さいっぱいに広げる */ background-size: cover; } .bg-transparent::after { content: ""; position: absolute; top: 0; left: 0; opacity: 0.5; width: 100%; height: 100%; background-image: url('test.jpg'); background-repeat: no-repeat; background-size: cover; background-position: right; z-index: -1; /* テキストが上に来るようにするために追加 */ } .class0 { color: #000080 ; } .class1 { color: #8b008b ; } .class2 { color: #ff0000 ; } .class3 { color: #800080 ; } .class4 { color: #32cd32 ; } .class5 { color: #0000cd ; } .class6 { color: #d2691e ; } /* LINE004 */ .button_line004 a { position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 200px; padding: 10px 25px; color: #313131; transition: 0.3s ease-in-out; font-weight: 600; } .button_line004 a:before, .button_line004 a:after { content: ''; width: 18px; height: 18px; border-color: #ba55d3; box-sizing: border-box; border-style :solid; display: block; position: absolute; transition: all 0.3s ease-in-out; } .button_line004 a:before { top: -6px; left: -6px; border-width: 2px 0 0 2px; z-index: 5; } .button_line004 a:after { bottom: -6px; right: -6px; border-width: 0 2px 2px 0; } .button_line004 a:hover:before, .button_line004 a:hover:after { width: calc(100% + 12px); height: calc(100% + 12px); border-color: #4b0082; } .button_line004 a:hover { color: #7b68ee; background-color: transparent; border-color: #c71585; }