/* * 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: 1000px; margin: 0 auto; } @media only screen and (max-width:999px) { #page { width: auto; margin: 0 auto; } } /* header */ /* header */ header{ text-align: center; margin: 0 auto; } header img{ width: 100%; } /* menu */ nav{ width:200px; font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size:small; float:right; } @media only screen and (max-width:999px) { nav{ width:20%; } } nav ul{ background:#fff; list-style-type:none; margin:0; padding:10px; } nav li{ width:100%; line-height:2em; border-bottom: 1px solid #ebe4da; } nav a{ display:block; text-decoration:none; color:#463a1c; padding:13px 5px 13px; position:relative; } nav a:hover{ background-color: rgba(255,213,236,0.5); } nav a:active{ background-color: #FF9999; } nav a:after{ font-family: 'Mv Boli', cursive; font-size:0.8em; color: #cbbe9c; position:absolute; bottom:0; left:5px; } nav li.now{ background-color: rgba(255,213,236,0.5); } nav li:last-child{ border-bottom:none; } /* main contents */ .main_contents{ background-color:#fff; margin:0; padding:2ex; width:750px; float:left; } @media only screen and (max-width:999px) { .main_contents{ width:75%; } } 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; } .box-text-left{ background: #fff; border:dotted 5px #494949; border-radius: 3em 3em; margin:2em 1ex; padding: 2ex 1ex; float:left; width:380px; } .box-text-right{ background: #fff; border:dotted 5px #494949; border-radius: 3em 3em; margin:2em 1ex; padding: 2ex 1ex; float:right; width:380px; } .box-text-right-border-none{ background: #fff; margin:1ex; padding: 2.2ex 1ex; float:right; width:400px; } .text-left{ float:left; width:700px; } .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 { 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 { 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 + 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; } /* 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; } /* footerを最下部に表示 */ html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .main_contents { flex: 1; }