/* SKIP - Shonai Koeki Information Project - main style sheet */ /* body */ body{ margin:0; padding:0; background-color:#FFFFCC; } /* header */ header{ padding-top: 50px; text-align: center; margin: 0 auto; } header img{ width: 100%; } /* nav */ @media only screen and (min-width:601px) { nav{ border-top: 2px solid orange; border-bottom: 2px solid orange; margin: 10px 0; } nav ul{ display: table; margin: 0 auto; padding: 0; width: 80%; text-align: center; } nav ul li{ display: table-cell; min-width: 150px; border-right: 2px solid orange; } nav ul li:first-child{ border-left: 2px solid orange; } nav ul li a{ display: block; width: 100%; padding: 10px 0; text-decoration: none; color: #000; font-size: large; font-weight: bold; } nav ul li a:hover{ background-color:#F8E750; border-bottom: 0 solid #F8E750; } } @media only screen and (max-width:600px) { nav{ margin: 10px 2em; } nav ul { padding: 0; position: relative; } nav ul li { color: black; border-left: solid 8px orange; background: white; margin-bottom: 5px; line-height: 1.5; padding: 0.5em; list-style-type: none!important; } nav ul li a{ display: block; width: 100%; text-decoration: none; margin: 0 10px; color: #000; font-weight: bold; } nav ul li:hover{ background-color:#F8E750; } } /* section contents */ .contents{ margin: 0 2em; } /* h1 */ h1 { padding: 0.5em 1em; margin: 1em 0; background: #fbfbfb; border-left: solid 6px #5bb7ae; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); } /* h2 */ h2 { margin-top: 2em; position: relative; padding-left: 25px; } h2:before { position: absolute; content: ''; bottom: -3px; left: 0; width: 0; height: 0; border: none; border-left: solid 15px transparent; border-bottom: solid 15px rgb(119, 195, 223); } h2:after { position: absolute; content: ''; bottom: -3px; left: 10px; width: 100%; border-bottom: solid 3px rgb(119, 195, 223); } /* section explanation */ .explanation { background: #fff; border: 5px double #4cb; border-radius: 10px; padding: 0.5em 1em; margin: 2em 2ex; } /* img */ .explanation img { max-width: 100%; } /* a.tlink{ text-align: right; background-color: white; color: black; } */ /* footer */ footer{ font-size: 80%; width: 100%; text-align: center; padding-top: 10px; padding-bottom: 10px; background-color: #313131; } footer p.copyright{ color: #fff; /*letter-spacing: 5px;*/ /*font-style: normal;*/ } /*footerを最下部にする*/ html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .wapper { flex: 1; }