/* reset CSS */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } span { display: inline-block; width: 7em; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; font-size: 18px; } /* End reset CSS */ body { font-size: 14px; font-family:'MS Pゴシック',sans-serif; background-color:#ffffff; background-image:url(../images/bg.png); } a { color: #003CB3; } #wrapper {} #header { background-color: #000340; box-shadow: 0 2px 2px #888; margin-bottom: 4px; .navbar { width: 950px; margin: 0 auto; a { text-decoration: none; } ul { display: block; margin: 0 auto; text-align: center; li { display: inline-block; width: 155px; padding: 30px 0; text-align: center; font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif; font-size: 23px; color: white; font-weight: normal; border-right: 1px solid #0000a5; box-shadow: 1px 0 0 #00005f; &.first { position: relative; padding: 0; border: none; width: 0px; &:before { content: ""; height: 78px; position: absolute; top: -44px; border-right: 1px solid #0000a5; box-shadow: 1px 0 0 #00005f; } } &:hover { background: rgb(69,72,77); /* Old browsers */ background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(32,232,132,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(32,32,132,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(32,32,132,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(32,32,132,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(32,32,132,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(32,32,132,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#202020',GradientType=0 ); /* IE6-9 */ } &:active { background: rgb(69,72,77); /* Old browsers */ background: -moz-linear-gradient(top, rgba(32,32,132,1) 0%, rgba(69,72,77,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(32,32,132,1)), color-stop(100%,rgba(69,72,77,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(32,32,132,1) 0%,rgba(69,72,77,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(32,32,132,1) 0%,rgba(69,72,77,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(32,32,132,1) 0%,rgba(69,72,77,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(32,32,132,1) 0%,rgba(69,72,77,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202020', endColorstr='#45484d',GradientType=0 ); /* IE6-9 */ } } } } } #container { display: block; width: 950px; margin: 0 auto; color: #404040; .sidebar { display: block; float: left; width: 300px; margin: 16px 10px 22px 0; .logo { display: inline-block; margin: 0 auto 10px; img { display: block; width: 300px; } } .nav { display: block; min-height: 500px; padding: 10px; background-color: white; border-top: 5px solid #A5FFA7; border-bottom: 5px solid #A5FFA7; border-radius: 1px; box-shadow: 0 0 4px #00330A; img { display: block; /*width: 250px; height: 120px;*/ margin: 0 auto 10px; } .description { clear: both; margin-bottom: 10px; h1 { font-weight: bold; margin-bottom: 10px; font-size: 21px; } p { //display: inline-block; margin-bottom: 10px; font-size: 21px; } a { float: right; } hr { margin-top: 0px; } } .footer { display: block; text-align: right; } } } .content { display: block; float: left; width: 620px; margin: 16px 0 22px; .banner { margin-bottom: 10px; box-shadow: 0 0 0px #00330A; img { vertical-align: top; } } .infomation { display: block; width: 600px; min-height: 400px; padding: 10px; background-color: white; border-top: 5px solid #A5FFA7; border-bottom: 5px solid #A5FFA7; border-radius: 1px; box-shadow: 0 0 4px #00330A; h1 { display: block; font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif; font-weight: bold; font-size: 24px; text-align: center; color: #003CB3; text-shadow: 2px 2px 0 #ccc; border-top: 1px solid #000051; border-left: 1px solid #000051; border-bottom: 1px solid #0000a1; border-right: 1px solid #0000a1; box-shadow: 1px 1px 2px #0000f1 inset; padding: 11px 0 7px 0; margin: 0 20px 10px; } h2 { display: block; font-weight: bold; font-size: 16px; text-align: center; color: #258dc8; text-shadow: 1px 1px 1px #ccc; text-decoration: underline; margin: 20px 0; } p { display: block; font-size: 20px; line-height: 26px; margin: 0 20px 20px; b { color: #003CB3; text-shadow: 1px 1px 1px #ccc; } } .section { display: block; border-bottom: 1px solid #258dc8; margin: 0 15px 5px; padding-bottom: 1px; h3 { display: block; background-image: url('../images/pict_block.png'); background-repeat: no-repeat; background-position-y: 8px; padding-left: 15px; border-bottom: 1px solid #bbb; font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif; font-size: 18px; line-height: 27px; text-shadow: 1px 1px 1px #ccc; font-weight: normal; color: #333; } } .contact-form { display: block; width: 400px; border: 1px solid #ccc; margin: 0 auto 15px; padding: 10px; p { display: inline-block; font-weight: bold; font-size: 14px; line-height: 14px; margin: 0; } h7 { display: inline-block; font-size: 12px; font-weight: normal; } input[type="text"] { display: block; width: 393px; padding: 2px; margin: 5px 0; } textarea { display: block; width: 395px; padding: 2px; margin: 5px 0; } input[type="submit"] { display: block; margin: 10px auto 0; } } .contact-confirm { display: block; width: 400px; margin: 0 auto; border: 1px solid #ccc; padding: 10px; input[type="button"] { width: 80px; margin-right: 5px; } input[type="submit"] { width: 80px; } .central { text-align: center; } } } } .footer { clear: both; } } #footer { display: block; background-color: #000340; color: white; border-top: 1px solid #4B4B4B; box-shadow: 0 -1px 0 #161616; .nav { display: block; margin-top: 10px; text-align: center; a { display: inline-block; color: white; margin-right: 15px; margin-bottom: 10px; position: relative; &:after { display: inline-block; position: absolute; content: ""; height: 18px; top: -2px; margin-left: 9px; border-left: 1px solid white; } } } .copyright { display: block; width: 920px; margin: 5px auto 0; padding-bottom: 20px; text-align: center; } }