/* * Main CSS definitions for terakotta */ body{ margin:0; padding:0; background-color:#FFF0F5; background:-webkit-gradient(liner, left top, left bottom, from(0%, #FFF), color-stop(50%,#ffd5dc),to(100%, #FFF)); background:-webkit-linear-gradient(top,#FFF 0%,#ffd5dc 50%,#fff 100%); background:-moz-linear-gradient(top,#FFF 0%,#ffd5dc 50%,#fff 100%); background:-o-linear-gradient(top,#FFF 0%,#ffd5dc 50%,#fff 100%); background:linear-gradient(to bottom,#FFF 0%,#ffd5dc 50%,#fff 100%); -webkit-text-size-adjust: 100%; } #page { width: 100%; margin: 0 auto; } /* header */ header{ margin:0; padding:0; width:100%; height:auto; background:#fff; background-position:right; background-repeat:no-repeat; font-weight:bold; font-size:18px; font-family:'Yu Mincho', meiryo ,sans-serif; text-align:center; color:#40361f; } /* menu */ #menu { width:200px; font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size:small; float:left; } #menu ul{ background:#fff; list-style-type:none; margin:0; padding:10px; } #menu li{ width:100%; line-height:2em; border-bottom: 1px solid #ebe4da; } #menu a{ display:block; text-decoration:none; color:#463a1c; padding:13px 5px 13px; position:relative; } #menu a:hover{ background-color: rgba(255,213,236,0.5); } #menu a:active{ background-color: #FF9999; } #menu a:after{ font-family: 'Mv Boli', cursive; font-size:0.8em; color: #cbbe9c; position:absolute; bottom:0; left:5px; } #menu li.now{ background-color: rgba(255,213,236,0.5); } #menu li:last-child{ border-bottom:none; } /* main contents */ #main_contents{ background-color:#fff; margin:0; padding:0 1.5em; width:750px; min-height:700px; float:right; } #main:after{ content:""; clear:both; display:block; } h2{ font-size:x-large; font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif; } h3{ font-size:large; font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif; } p:not(footer > p){ font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif; color:#463a1c; line-height:1.5em; } img.img-left{ padding: 3ex 0; float:left; } img.img-right{ padding: 3ex 0; float:left; } div.box-text-left{ border:dotted 5px #494949; border-radius: 3em 3em; margin:2em 1ex; padding: 2ex 1ex; float:left; width:380px; } div.box-text-right{ background: #fff; border:dotted 5px #494949; 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; } /* footer */ footer{ clear:both; background:#372F2D; position: relative; bottom: 0; margin:0.5ex; padding:0.5ex; font-family:Arial,sans-serif; font-size:small; color:#fff; text-align:center; } /* what table */ table { width: 100%; border-collapse: collapse; } th.t_top { border-top: #b3b3b3 4px solid; } th:not(th.menu) { border-bottom: #e3e3e3 1px solid; border-left: #e3e3e3 1px solid; text-align: left; background: #f7f7f7; padding: 10px; font-weight: normal; white-space: nowrap; } td.t_top { border-top: #be1309 4px solid; } td:not(td.menu) { border-bottom: #e3e3e3 1px solid; border-right: #e3e3e3 1px solid; text-align: left; padding: 10px; } th.menu { text-align: left; font-weight: normal; white-space: nowrap; } td.menu { text-align: left; white-space: nowrap; } /* 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 + div{ display: none; } input[type="checkbox"].on-off:checked + div{ display: block; } div.qa{ padding:1ex; } /* Q&A print */ @media print{ header{ display: none; } #menu{ display: none; } footer{ height: 100%; display: none; } #main_contents{ background-color:#fff; margin:0; padding:5px; width:1000px; float:left; } div.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 + div{ display: block; } input[type="checkbox"].on-off:checked + div{ display: block; } } a.link{ display:block; text-decoration:none; color:#463a1c; } /* application */ input#name { width:200px; height:1.5em; font-size:1em; } input#ruby { width:200px; height:1.5em; font-size:1em; } select > option { width:100px; height:1.2em; font-size:1.2em; } input#e-mail { width:300px; height:1.5em; font-size:1em; } input#tel { width:200px; height:1.5em; font-size:1em; } input#address { width:500px; height:1.5em; font-size:1em; } input#school { width:200px; height:1.5em; font-size:1em; } input#class { width:100px; height:1.5em; font-size:1em; } input#number { width:100px; height:1.5em; font-size:1em; } textarea#message { width:500px; font-size:1em; } div.submit { padding: 10px; text-align : center ; } button { padding: 10px 30px; font-size: 1.2em; } div.box { background: #fff; border:dotted 5px #494949; margin:1.8em 1ex; padding: 2ex 1ex; text-align : center ; } em{ color: red; font-size:1.2em; } @media only screen and (max-width: 481px) { #menu { width: 750px; margin: 0 auto; } header{ margin:0; padding:0; width:750px; height:220px; background:#fff; background-position:right; background-repeat:no-repeat; font-weight:bold; font-size:18px; font-family:'Yu Mincho', meiryo ,sans-serif; text-align:center; color:#40361f; } header img{ width:750px; } #menu{ width: 0px; font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size:x-small; display: inline-block; overflow: hidden; } #menu ul{ background:#fff; list-style-type:none; overflow: hidden; } #menu li{ width: 180px; height:140px; text-align: center; border-bottom: 1px solid #ebe4da; float: left; line-height: 50px; margin-right: 10px; } #menu a{ width:95%; height:80%; display:block; text-decoration:none; color:#463a1c; text-decoration: none; font-weight: bold; } #menu a:hover{ background-color: rgba(255,213,236,0.5); } #menu a:active{ background-color: #FF9999; } #menu a:after{ font-family: 'Mv Boli', cursive; font-size:0.8em; color: #cbbe9c; position:absolute; bottom:0; left:5px; } #menu li.now{ background-color: rgba(255,213,236,0.5); } #menu li:last-child{ border-bottom:none; } } .box8 { padding: 0.5em 1em; margin: 2em 0; color: #232323; background: #fff8e8; border-left: solid 10px #ffc06e; } .box8 p { margin: 0; padding: 0; font-size: xx-large; } html { height: 100%; } body { height : 100%; }