- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/style.css b/style.css
index f17450a..9e240bf 100644
--- a/style.css
+++ b/style.css
@@ -66,99 +66,121 @@
/*-------------------------------------------
Mainvisual
-------------------------------------------*/
-.out{
+#mainvisual {
+ height: 660px;
position: relative;
-}
-.in img{
- position: absolute;
- top: 0;
- left: 0;
- opacity: 0;
- transition: .5s;
- z-index: 0;
-}
-img{
- display: block;
- width: 50%;
- height: auto;
-}
-input{
- display: none;
-}
-.in{
- display: flex;
- justify-content: center;
-}
-label span{
- display: block;
- width: 15px;
- height: 15px;
- padding: 7px;
- margin: -40px 0 0;
- border-radius: 100%;
- cursor: pointer;
- position: relative;
- z-index: 2;
-}
-label span::before{
- content: "";
- display: block;
+ margin-bottom: 120px;
width: 100%;
- height: 100%;
- background: #4287f5;
- opacity: 0.5;
- border-radius: 100%;
-}
-input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before,
-input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before,
-input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before,
-input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before{
- background: #000;
- opacity: 1;
+ margin:0;
+ padding:0;
}
-label span::before{
- animation: slidebutton 14s infinite;
+.mainvisual-inner{
+ max-width: 100%;
}
-@keyframes slidebutton{
- 0%{opacity: 0.5;background: #4287f5;}
- 3.5%{opacity: 1;background: #000;}/* b÷x×100=y */
- 25%{opacity: 1;background: #000;}/* 100÷c=z */
- 28.5%{opacity: 0.5;background: #4287f5;}/* y+z */
-}
-label:nth-of-type(2) span::before,label:nth-of-type(2) img{
- animation-delay: 3.5s;
-}
-label:nth-of-type(3) span::before,label:nth-of-type(3) img{
- animation-delay: 7s;
-}
-label:nth-of-type(4) span::before,label:nth-of-type(4) img{
- animation-delay: 10.5s;
-}
-input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img,
-input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img,
-input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img,
-input:nth-of-type(4):checked ~ .in label:nth-of-type(4) img{
- opacity: 1;
- z-index: 1;
+.mainvisual-inner-title{
+ position: absolute;
+ background-color: #ffffffc3;
+ width: 500px;
+ top: 150px;
+ left: 70px;
+ z-index: 999;
}
-.in img{
- animation: slide 14s infinite;/* (a+b)×c=x */
- opacity: 0;
+.mainvisual-title{
+ text-align: center;
+ font-size: 2.4rem;
+ font-weight: bold;
+ margin-bottom: 60px;
+ padding-top: 30px;
+ z-index: 999;
}
-@keyframes slide{
- 0%{opacity: 0;}
- 3.5%{opacity: 1;z-index: 1;}/* b÷x×100=y */
- 25%{opacity: 1;}/* 100÷c=z */
- 28.5%{opacity: 0;z-index: 0;}/* y+z */
+.mainvisual-inner-title .mainvisual-title::after{
+ content: '';
+position: absolute;
+top: 50%;
+left: 50%;
+width: 225px;
+height: 2px;
+background: #868686;
+transform: translateX(-50%);
+z-index: 999;
}
-input:checked ~ .in img,input:checked ~ .in span::before{
- animation: none;
+.mainvisual-text{
+ text-align: center;
+ font-size: 1.1rem;
+ line-height: 1.7;
+ padding-bottom: 30px;
+ z-index: 999;
}
-.in:hover img,.in:hover span::before{
- animation-play-state:paused;/* マウスを載せると一時停止 */
+
+.mainvisual-img{
+position: relative;
+max-width: 100%;
}
-<<<<<<< HEAD
-=======
+#mainvisual .fade li {
+max-width: 100%;
+position: absolute;
+top: 0;
+right: 0;
+opacity: 0;
+animation: fade 25s infinite;
+list-style: none;
+}
+#mainvisual .fade li:nth-child(1) {
+animation-delay: 0s;
+}
+#mainvisual .fade li:nth-child(2) {
+animation-delay: 5s;
+}
+#mainvisual .fade li:nth-child(3) {
+animation-delay: 10s;
+}
+#mainvisual .fade li:nth-child(4) {
+animation-delay: 15s;
+}
+#mainvisual .fade li:nth-child(5) {
+animation-delay: 20s;
+}
+#mainvisual .fade li img {
+width: 1500px;
+height: 580px;
+object-fit: cover;
+border-radius:1% 1% 1% 1%;
+}
+#mainvisual .fade li::after {
+content: "";
+position: absolute;
+top: 0;
+bottom: 0;
+left: 0;
+right: 0;
+box-shadow: inset 0px 0px 10px 10px #fff;
+/* border-radius:1% 1% 1% 1%; */
+}
+@keyframes fade {
+0% {
+ opacity: 0;
+}
+15% {
+ opacity: 1;
+}
+25% {
+ opacity: 1;
+}
+35% {
+ opacity: 0;
+}
+100% {
+ opacity: 0;
+}
+}
+
+@media screen and (max-width: 746px){
+#mainvisual .top-text .text{
+ font-size: 1.4rem;
+ line-height: 2.5rem;
+ text-shadow: 0 3px 5px #000;
+}
+}
/*-------------------------------------------
@@ -179,18 +201,6 @@
button.btn {
font-size: 1rem;
font-weight: 700;
-
-
デザイン - -
-
-
-
-
-
-
+
-
+
+
+ はじめの一歩
+プログラミングに特化した、
動画学習を体験してみましょう。
+
-
+
-
+
+ 
+ -
+
-
+
CSS
Webページデザイン - -