/* * CSS for Junior Doctor Chokai Course */ @charset "UTF-8"; html { font-size: 100%; } body{ margin: 0; height: 100%; font-family: "Sawarabi Gothic"; color: rgb(45, 45, 45); font-size: 0.9rem; line-height: 1.7; } .c, body.top h2 {text-align: center;} body.top h2 { padding: 1ex 2em; width: 20em; border: groove #4a7 3px; margin: 5em auto; border-radius: 1em; } body.top a {text-decoration: none; color: #284} body.top a:hover h2 {background: #9ea;} body:after{ margin: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: #afeeee; /* background: -moz-linear-gradient(top, #afeeee 0%,#FFF 100%); */ /* background: -webkit-linear-gradient(top, #afeeee 0%,#FFF 100%); */ background: linear-gradient(to bottom, #afeeee 0%, #FFF 100%); z-index: -1; } body.vmenuspace {margin-top: 2em; border-top: 3px solid;} div.scrollbox { height: 6em; overflow: auto; background: #eff; } img { max-width: 100%; } /*--------------------------------------common---------------------------------*/ .wrapper { max-width: 1200px; margin: 0 auto; padding: 0 5%; } .section-title { font-size: 1.6rem; } /*--------------------------------------//common----------------------------------*/ /*--------------------------------------- header ---------------------------------*/ header{ width: 100%; height: auto; } header > div.list{ display: flex; align-items: center; justify-content: left; width: 100%; height: 50px; background: linear-gradient(to bottom, rgba(15, 15, 15, 0.8), rgba(40, 40, 40, 0.8)); } header nav a { color: white; text-decoration: none; margin-left: 20px; margin-right: 20px; } header nav a:hover { color: white; text-decoration: underline; } header ul{ display:flex; } header ul li{ list-style: none; } header > div.logobox { position: relative; margin-left: 20px; } header > div.logobox > h1 { position:absolute; top: 30px; left: 170px; } header > div.logobox > img { width: 150px; height: 150px; } /*--------------------------------------- //header -------------------------------*/ /* -------------------------------------- home ---------------------------------------*/ #home{ padding: 0 1ex; display: flex; flex-direction: row; flex-wrap: wrap; justify-content:space-evenly; align-items: center; } #home h3{ font-size: 1.3rem; } #home p{ font-size: 1.2rem; line-height: 2.0; } h2{ margin-left:20px; width: 100%; } .what_study{ width:730px; } #home .what_study h3{ background: linear-gradient(transparent 50%, yellow 50%); width: 346px; } main {margin: 1ex;} /* PLEASE Remove this if this is too much effective */ .aiming_top{ width:730px; margin-top: 50px; } .aiming_top > h3{ background: linear-gradient(transparent 50%, yellow 50%); width: 680px; } em.see { font-style: normal; font-weight: bold; background: linear-gradient(to top, yellow, transparent); } /* -------------------------------------- //ホーム ---------------------------------------*/ /* --------------------------------------- Q&A ----------------------------------------------*/ @keyframes slidein { 0% { opacity: 0; transform: translateY(-5px); } 100% { opacity: 1; transform: translateY(0px); } } .qa_list{ position: relative; margin: 20px 20px 30px 20px; border: dashed black; border-width: 0 0 2px 0; color: black; transition: .2s; } .qa_list:hover{ color: rgb(255, 60, 0); } .qa_list .plus{ position: relative; display: inline-flex; font-size: 28px; padding: 5px; transition: .3s; } .qa_list input[type="checkbox"]:checked ~ .plus{ transform: rotate(45deg); } .qa_list label{ display: block; position: absolute; top: 3px; left: 30px; padding: 5px; font-size: 23px; cursor: pointer; transition: .3s; } .qa_list .ans{ position: relative; display: none; color: black; margin: 5px; padding: 10px 10px 20px 10px; } .qa_list input[type="checkbox"]:checked ~ div.ans{ display: block; animation: slidein 0.5s; } .qa_list input{ display: none; } /* --------------------------------------- //Q&A ----------------------------------------------*/ /* ---------------------------------------- class-content -----------------------------------------*/ .class-content-items{ background-color:rgb(187, 235, 241); padding: 60px; margin-bottom: 60px; margin-top: 60px; box-shadow: 0 0 8px 4px #ccc; font-size: 1.1rem; } #class-content .class-content-items { display: flex; align-items: center; justify-content: space-evenly; flex-direction: row; flex-wrap: wrap; } .class-content-items-left{ width: 60%; padding-right: 35px; border-right: solid 2px #446; } .class-content-dl-left{ margin-right: 35px; } .class-content-dl > dt{ background-color: rgb(87, 87, 87); color: white; padding: 3px 4px; display: inline-block; margin-bottom: 4px; } .class-content-dl > dd{ margin-left: 60px; margin-bottom: 5px; } .bottom{ margin-left: 25px; } dl dt { margin: 0 1ex; padding: 0 1ex; width: 6em; border:rgb(80, 224, 243) solid; border-width: 0 0 1px 1.2em; } @media screen and (min-width: 1100px){ .framebox { border: double 5px gold; display: block; position: absolute; left: 60% ; bottom: 10px; } .clear {clear: both;} } @media screen and (max-width: 1099px){ .framebox { border: double 5px gold; display: block; margin-left: 40px; } } /* ----------------------------------------//class_content -----------------------------------------*/ /*------------------------------------------ infoのcss -------------------------------------------------*/ table.LectureSchedule{ text-align: center; border-collapse: collapse; border: 1px solid black; } table.LectureSchedule td.num{ text-align: right; padding-right: 1.2em; } table.LectureSchedule td.date{ text-align: left; padding-left: 0.7em; } table.LectureSchedule td.room{ text-align: left; padding-left: 0.7em; padding-right: 0.7em; } table.LectureSchedule td.lesson{ text-align: left; padding-left: 0.5em; } /*------------------------------------------//infoのcss -------------------------------------------------*/ /*------------------------------------------ footer -------------------------------------------------*/ footer { /* XXX: Change ME! */ border-top: 1px dashed #888; text-align: right; font-size: 70%; } table.school tr {visibility: collapse;} table.school tr.match {visibility: visible;} table.border, table.border td, table.border th { border: 1px solid #446; border-collapse: collapse; padding: 0.2ex 0.4ex; } table.border th {text-align: left; padding: 0.2ex 0.8ex;} table.form th:first-child {min-width: 10em;} /*------------------------------------------ //footer -------------------------------------------------*/