body{ background-color: #ebe5e5; margin: 0px; padding: 0px; } /*-----ヘッダー始まり-----*/ header.header{ background-image: url(syumi_header.jpg); background-size: cover; background-position:center; background-repeat:no-repeat; display:flex; justify-content:center; align-items:center; flex-direction: column; width: 100%; min-width: 980px; } /*------ヘッダー終わり------*/ /*------------------------------メイン始まり----------------------------*/ main{ margin-left: 40px; margin-right: 40px; } h1{ color: #ffffff; text-shadow: 0 0 15px #000000; border-bottom: solid #ffffff; font-size: 5em; font-family: Georgia, 'Times New Roman', Times, serif; padding: 10% 0 0 30%; } h2{color:#434343; display:inline-block; font-size: 22px; font-family: Georgia, 'Times New Roman', Times, serif; } .flex-acapella-box{ margin-top: 30px; display: flex; align-items: center; justify-content: space-around; margin-left: 40px; margin-right: 40px; } .flex-acapella-item{ height: 200px; overflow: auto; background-color: #ece5e5; margin-right: 20px; box-shadow: 13px 13px 26px#cac5c5, -13px -13px 26px #ffffff; border-radius: 20px; } .flex-acapella-item:hover{ background-color: #e7e0e0; } .flex-acapella-item:nth-child(3){ margin-right: 0px; } .flex-acapella-overview{ font-size: 25px; border-bottom: solid 0.8px #000000; margin: 25px 20px 0; } .flex-acapella-overview-p{ font-size: 12px; padding: 8px; margin-left: 10px; } .flex-acapella-charm-p{ font-size: 12px; padding: 8px; margin-left: 10px; } .flex-acapella-member-p{ font-size: 12px; padding: 8px; margin-left: 10px; } .flex-acapella-history{ height: 270px; overflow: auto; border-radius: 40px; padding: 25px 20px; margin: 25px 40px; background-color: #ebe5e5; box-shadow: 13px 13px 26px#cac5c5, -13px -13px 26px #ffffff; } .flex-acapella-history:hover{ background-color: #e7e0e0; } .flex-acapella-history-h2{ font-size: 25px; border-bottom: solid 0.8px #000000; display: inline-block; margin-bottom: 0 ; } .flex-acapella-history-p{ font-size: 15px; padding: 0 10px 10px; } .acapella-youtube-channel{ border-radius: 20px; padding: 0 20px 20px; margin: 30px 40px; display: inline-block; background-color: #ffffff; box-shadow: 0 0 7px #c7c7c7; } .acapella-youtube-3{ background: linear-gradient(transparent 70%, #cecbff 70%); margin: 30px 40px 0; } .youtube-channel{ margin: 0 40px; } li.youtube-channel:first-child:hover{background-color: #00ff04; display: inline-block;} li + li:hover{background-color: #ffa500; display: inline-block;} li + li + li:hover{background-color: #eaff00; display: inline-block;} /*-----------------------------メイン終わり----------------------------------*/ /*------第4回課題始まり-----*/ div.class4{ background-color: #ffffff; padding: 0 10px 10px; border-style: solid; display: inline-block; margin: 20px 80px; } p.class4-p{font:30px bold; margin:3%;} p.happy,p.cry{color: #000000; margin: 0 10px;} h3.happy{ color: #000000; background: linear-gradient(#d7ad20, #ffffcd); display:inline-block; margin: 10px; } h3.cry{ color: #000000; background: linear-gradient(#6a5aca, #87cefa); display:inline-block; margin: 10px; } th:first-child{background-color: #e45858;} th + th{background-color: #ffc0cd;} th + th + th{background-color: #ffa500;} th + th + th + th{background-color: #87cefa;} th + th + th + th + th{background-color: #d2692e;} th + th + th + th + th + th{background-color: yellow;} th + th + th + th + th + th + th{background-color: #6495ed;} td:first-child{color: red;} td.holiday{color: red;} td:last-child{color: blue;} table,th,tr{text-align: center;} td{text-align: right; border: 1px solid; } /*-------第4回課題終わり------*/ a.link:hover{background-color: #fffd72;} a.link{ font-size: x-large; } .divlink{ margin: 0 80px 15px; }