/* 2019's terakotta css */ /* body */ body { margin: 0; padding: 0; background-color: white; } h2 { font-size:x-large; font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif; } /* header */ header { text-align: center; margin: 0 auto; } header img{ width: 100%; } /* menu */ #menu table, tr, td { border: 1px solid #fff; border-collapse: collapse } #menu table { height: 70px; text-align: center; } #menu table td{ margin: 5px; } #menu table tr td { padding-left: 14px; padding-right: 14px; border-left: 3px dotted orange; border-right: 3px dotted orange; background-color: pink; } h2 { font-size: x-large; } h3 { font-size: large; } /* div.box-text */ img.img-left{ padding: 3ex 0; float:left; } img.img-right{ padding: 3ex 0; float:left; } div.box-text-left{ background: #fff; border:dotted 5px green; border-radius: 3em 3em; margin:2em 1ex; padding: 2ex 1ex; float:left; width:380px; } div.box-text-right{ background: #fff; border:dotted 5px pink; border-radius: 3em 3em; margin:2em 1ex; padding: 2ex 1ex; float:right; width:380px; } div.box-text-right-border-none{ background: #fff; margin:1ex; padding: 2.2ex 1ex; float:right; width:400px; } div.text-left{ float:left; width:700px; } div.text-right{ float:right; width:700px; } a { -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } /* Q&A */ label:not(.label) { background: #FFF0F5; color: #000; padding: 10px; display: block; margin: 0; border: 1px solid #fff; cursor: pointer; } label:hover:not(.label) { background: #FF6699; } input[type="checkbox"].on-off{ display: none; } input[type="checkbox"].on-off + section{ display: none; } input[type="checkbox"].on-off:checked + section{ display: block; } section.qa{ padding:1ex; } /* Q&A print */ @media print{ header{ display: none; } nav{ display: none; } footer{ display: none; } .main_contents{ background-color:#fff; margin:0; padding:5px; width:1000px; float:left; } .qa{ padding:0; } label { background: #FFF0F5; color: #000; padding:0; display: block; margin: 0; border: 1px solid #fff; cursor: pointer; } input[type="checkbox"].on-off + section{ display: block; } input[type="checkbox"].on-off:checked + section{ display: block; } } a.link{ display:block; text-decoration:none; color:#463a1c; } /* footer */ footer{ clear: both; background-color: #372F2D; position: relative; bottom: 0; margin: 0.5ex; padding: 0.5ex; font-size: small; color: white; text-align: center; } html { height: 100%; } body { height: 100%; } #menu { height: 100%; }