@charset "utf-8"; /* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html -------------------------------------------------------------- */ 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, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;} :focus{outline:0;} ol, ul{list-style:none;} table{border-collapse:separate;border-spacing:0;} caption, th, td{font-weight:normal;text-align:left;} blockquote:before, blockquote:after,q:before, q:after{content:"";} blockquote, q{quotes:"" "";} a img{border:0;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;} body{ font:12px/1.5 "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif; color:#333; -webkit-text-size-adjust:100%; background:#f8f6f2; } /* リンク設定 ------------------------------------------------------------*/ a{ margin:0; padding:0; text-decoration:none; outline:0; vertical-align:baseline; background:transparent; font-size:100%; color:#313131; } a:hover, a:active{ outline:none; color:#6f6f6f; } /**** Clearfix ****/ nav .panel:after, nav#mainNav:after, .newsTitle:after, .bg:after,.post:after, ul.post li:after,nav#mainNav .inner:after{content:""; display:table;clear:both;} nav .panel,nav#mainNav,.newsTitle,.bg, .post, ul.post li,nav#mainNav .inner{zoom:1;} /* フォーム ------------------------------------------------------------*/ input[type="text"], textarea{ vertical-align:middle; max-width:90%; line-height:30px; height:30px; padding:1px 5px; border:1px solid #d4d4d7; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; font-size:100%; color:#555; background:#fcfcfc; } textarea{ height:auto; line-height:1.5; } input[type="submit"],input[type="reset"],input[type="button"]{ padding:3px 10px; background:#878787; border:0; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; line-height:1.5; font-size:120%; color:#fff; } input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{ background:#a6a6a6; cursor:pointer; } *:first-child+html input[type="submit"]{padding:3px;} /* レイアウト ------------------------------------------------------------*/ #wrapper, .inner{ margin:0 auto; width:880px; } #header{ overflow:hidden; } #content{ float:right; width:627px; padding:22px 0 50px; } #sidebar{ float:left; width:233px; padding:22px 0 50px; } #footer{ clear:both; } /* ヘッダー *****************************************************/ /* サイト説明文 ----------------------------------*/ #header h1{ padding:5px 0; font-size:80%; font-weight:normal; } /* ロゴ (サイトタイトル) ----------------------------------*/ #header h2{ clear:both; float:left; padding:20px 5px 15px; color:#515151; font-size:160%; font-weight:bold; } /* コンタクト ----------------------------------*/ .contact{ float:right; padding:10px 0 0; text-align:right; color:#000; font-size:90%; } .contact .tel{ margin-bottom:-3px; font-size:180%; font-family:Arial, Helvetica, sans-serif; } /* トップページ メイン画像 ----------------------------------*/ #mainImg{ margin-top:20px; clear:both; line-height:0; text-align:center; z-index:0; } .post{ margin:0 0 20px 0; padding:20px 10px 20px 20px; border:1px solid #d5d5d5; background:#fff; } .toppage h4{ margin:0 0 10px; font-size:16px; font-weight:normal; color:#333; } .toppage{padding:10px 10px 20px 20px;} /* 記事ループ *****************************************************/ .list{ padding:10px 0; border-bottom:1px dashed #dcdcdc; } .list:last-child{border:0;} .post .list p{padding:0;} .list span{padding-left:10px;} /* タイポグラフィ *****************************************************/ h2.title{ clear:both; margin:0; padding:7px 10px 7px 10px; font-size:110%; color:#000; border:1px solid #d5d5d5; border-bottom:0; background:#fff url(images/headingBg.png) repeat-x 0 100%; } .dateLabel{ text-align:right; font-weight:bold; color:#858585; } .post p{padding-bottom:15px;} .post ul{margin:0 0 10px 10px;} .post ul li{ margin-bottom:5px; padding-left:15px; background:url(images/bullet.png) no-repeat 0 8px; } .post ol{margin:0 0 10px 30px;} .post ol li{list-style:decimal;} .post h1{ margin:20px 0; padding:5px 0; font-size:150%; color:#000; border-bottom:3px solid #000; } .post h2{ margin:10px 0; padding-bottom:2px; font-size:130%; font-weight:normal; color:#333; border-bottom:2px solid #515151; } .post h3{ margin:10px 0; font-size:100%; font-weight:normal; color:#2e2c2c; border-bottom:1px solid #515151; } .post blockquote{ clear:both; padding:10px 0 10px 15px; margin:10px 0 25px 30px; border-left:5px solid #ccc; } .post blockquote p{padding:5px 0;} .post table{ border:1px #ccc solid; border-collapse:collapse; border-spacing:0; margin:10px 0 20px; } .post table th{ padding:10px; border:#ccc solid; border-width:0 0 1px 1px; background:#fcfcfc; } .post table td{ padding:10px; border:1px #ccc solid; border-width:0 0 1px 1px; background:#fff; } .post dt{font-weight:bold;} .post dd{padding-bottom:10px;} .post img{max-width:100%;height:auto;} img.aligncenter{ display:block; margin:5px auto; } img.alignright, img.alignleft{ margin:10px 10px 15px 15px; display:inline; } img.alignleft{margin:10px 15px 15px 10px;} .alignright{float:right;} .alignleft{float:left;} #gallery-1 img{ border:1px solid #eaeaea !important; padding:5px; background:#fff; } #gallery-1 img:hover{background:#fffaef;} /* サイドバー ウィジェット *****************************************************/ section.widget ul, .widget_search, #calendar_wrap, .textwidget{ margin:0 0 20px 0; padding:10px 10px 10px 17px; border:1px solid #d5d5d5; background:#fff; } section.widget ul ul{ border:0; margin:0; padding:0 0 0 10px; } p.banner{padding-bottom:15px;} p.banner img{ max-width:233px; height:auto; } p.banner img:hover{ cursor:pointer; opacity:.8; } section.widget h3{ clear:both; margin:0; padding:7px 10px 7px 10px; font-size:110%; border:1px solid #d5d5d5; border-bottom:0; color:#000; background:#fff url(images/headingBg.png) repeat-x 0 100%; } section.widget li a{ display:block; padding:7px 0 7px 12px; background:url(images/arrow.gif) no-repeat 0 12px; border-bottom:1px dashed #dcdcdc; } section.widget li:last-child a{border:0;} #searchform input[type="text"]{ line-height:1.7; height:24px; width:90px; vertical-align:bottom; } /* カレンダー */ #calendar_wrap table{margin:0 auto;width:90%;} #calendar_wrap table caption{padding:10px 0;text-align:center;font-weight:bold;} #calendar_wrap table th, #calendar_wrap table td{padding:3px;text-align:center;} #calendar_wrap table th:nth-child(6),#calendar_wrap table td:nth-child(6){color:#0034af;} #calendar_wrap table th:nth-child(7),#calendar_wrap table td:nth-child(7){color:#950000;} #calendar_wrap table td#prev{text-align:left;} #calendar_wrap table td#next{text-align:right;} #calendar_wrap a{font-weight:bold;} /* お知らせ  -------------*/ .newsTitle{ clear:both; margin:0; padding:7px 10px 7px 10px; font-size:110%; border:1px solid #d5d5d5; border-bottom:0; color:#000; background:#fff url(images/headingBg.png) repeat-x 0 100%; } .newsTitle h3{ float:left; font-weight:normal; } .newsTitle p{ float:right; padding:0 0 0 10px; font-size:80%; background:url(images/arrow.gif) no-repeat 0 5px; } .news p{ clear:both; padding-bottom:2px; border-bottom:1px dashed #dcdcdc; } .news p:last-child{border:0;} .news p a{ display:block; padding:5px 0; color:#333; font-style:italic; font:italic 110% "Palatino Linotype", "Book Antiqua", Palatino, serif; } .news a span{ color:#515151; font:normal 90% Arial, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック',sans-serif; } .news span{padding-left:10px;} .news a:hover span{color:#6f6f6f;} /* フッター *****************************************************/ #footer ul{ padding:15px 0 25px; text-align:center; } #footer li{ display:inline-block; padding:5px 16px; border-left:1px dotted #d5d5d5; } *:first-child+html #footer li{display:inline;} #footer li:first-child{border:0;} #footer li a{ text-decoration:none; color:#000; } #footer li a:hover{color:#999;} #footer ul ul{display:none;} #copyright{ clear:both; padding:10px 0 37px; text-align:center; color:#000; font-size:10px; } /* page navigation ------------------------------------------------------------*/ .pagenav{ clear:both; width:100%; height:30px; margin:5px 0 20px; } .prev{float:left} .next{float:right;} #pageLinks{ clear:both; color:#4f4d4d; text-align:center; } /* トップページ 最新記事4件 ------------------------------------------------------------*/ ul.post{ padding:0; } ul.post li{ margin:0 10px; padding:20px 0 15px; border-bottom:1px dashed #dcdcdc; } ul.post li:last-child{border:0;} ul.post img{ float:left; margin:0 15px 5px 10px; } ul.post h3{ margin:0 0 10px 10px; font-size:14px; font-weight:normal; color:#333; border:0; } /* メインメニュー PC用 ------------------------------------------------------------*/ @media only screen and (min-width:1025px){ nav#mainNav{ clear:both; position:relative; z-index:200; width:100%; background:#f8f6f2; } nav#mainNav .inner{ padding-left:1px; border-left:1px solid #eee; } nav#mainNav ul li{ float: left; position: relative; border-right:1px solid #eee; } nav#mainNav ul li a{ display: block; text-align: center; _float:left; color:#333; height:35px; line-height:45px; font-size:110%; margin-right:1px; padding:10px 40px 0; } nav#mainNav ul li a span,nav#mainNav ul li a strong{ display:block; font-size:90%; line-height:1.4; } nav#mainNav ul li a span{ font-size:70%; color:#cccccc; font-weight:normal; } nav#mainNav ul li.current-menu-item a, nav#mainNav ul li a:hover span, nav#mainNav ul li a:hover, nav#mainNav ul li.current-menu-parent a{ color:#b0b0b0; } nav#mainNav ul ul{ width:160px; border-top:0; } nav#mainNav ul li ul{display: none;} nav#mainNav ul li:hover ul{ display: block; position: absolute; top:45px; left:-1px; z-index:500; } nav#mainNav ul li li{ margin:0; float: none; height:40px; line-height:40px; width:160px; background:#f8f6f2; border-bottom:1px dotted #d0d0d0; } nav#mainNav ul li li:last-child{border:0;} nav#mainNav ul li li a{ width:100%; height:40px; padding:0 0 0 10px; line-height:40px; font-size:95%; text-align:left; } nav#mainNav ul li li.current-menu-item a,nav#mainNav ul li li a:hover{color:#b0b0b0;} nav div.panel{ display:block !important; float:left; } a#menu{display:none;} } /* メインメニュー iPadサイズ以下から ------------------------------------------------------------*/ @media only screen and (max-width:1024px){ nav#mainNav{ clear:both; width:880px; margin:20px auto 10px; background:#fbfaf9 url(images/mainnavBg.png) repeat-x 0 -5px; border:1px solid #e8e5e0; border-radius:6px; } nav#mainNav a.menu{ width:100%; display:block; height:37px; line-height:37px; font-weight:bold; text-align:left; background:url(images/menuOpen.png) no-repeat 5px 8px; } nav#mainNav a#menu span{padding-left:35px;} nav#mainNav a.menuOpen{ border-radius:6px 6px 0 0; background:url(images/menuOpen.png) no-repeat 5px -34px; } nav#mainNav a#menu:hover{cursor:pointer;} nav .panel{ display:none; width:100%; position:relative; right:0; top:0; z-index:1; } nav#mainNav ul{margin:0;padding:0;} nav#mainNav ul li{ float:none; clear:both; width:100%; height:auto; line-height:1.2; } nav#mainNav ul li a,nav#mainNav ul li.current-menu-item li a{ display:block; padding:15px 10px; text-align:left; border-bottom:1px dashed #e5e5e5; background:#fbfaf9; } nav#mainNav ul li:last-child a{border:0;border-radius:0 0 6px 6px;} nav#mainNav ul li li:last-child a{border:0;border-radius:0;} nav#mainNav ul li li:last-child a{border-bottom:1px dashed #e5e5e5;} nav#mainNav ul li a span{display:none;} nav#mainNav ul li.current-menu-item a,nav#mainNav ul li a:hover,nav#mainNav ul li.current-menu-item a,nav#mainNav ul li a:active, nav#mainNav ul li li.current-menu-item a, nav#mainNav ul li.current-menu-item li a:hover, nav#mainNav ul li.current-menu-item li a:active{ background:#fff; } nav#mainNav ul li.current-menu-item li a{color:#777} nav#mainNav ul li li{ float:left; border:0; } nav#mainNav ul li li a, nav#mainNav ul li.current-menu-item li a, nav#mainNav ul li li.current-menu-item a{ padding-left:40px; background:#fbfaf9 url(images/sub1.png) no-repeat 20px 18px;} nav#mainNav ul li li.current-menu-item a,nav#mainNav ul li li a:hover, nav#mainNav ul li.current-menu-item li a:hover{ background:#fff url(images/sub1.png) no-repeat 20px -62px;} nav#mainNav ul li li:last-child a{background:#fbfaf9 url(images/subLast.png) no-repeat 20px 20px;} nav#mainNav ul li li:last-child.current-menu-item a,nav#mainNav ul li li:last-child a:hover,nav#mainNav ul li.current-menu-item li:last-child a:hover{background:#fff url(images/subLast.png) no-repeat 20px -65px;} nav div.panel{float:none;} #mainImg{margin-bottom:20px;} } /* 959px以下から 1カラム表示 ------------------------------------------------------------*/ @media only screen and (max-width:959px){ #wrapper, .inner{width:100%;} #header{width:96%;padding:0 2%;} .contact{padding:10px 0 10px;} nav#mainNav{width:95%;} nav#mainNav ul{margin:0 auto;} nav#mainNav ul ul{padding:0;} nav div.panel{float:none;} #mainImg img{width:98%;height:auto;} #content, #sidebar{ clear:both; width:95%; float:none; margin:0 auto; padding:10px 0; } .banner{width:100%;margin:0 auto;text-align:center;} p.banner img{width:100%;height:auto;} section.widget_search{text-align:center;} #footer li{margin-bottom:10px;} } /* 幅644px以下から ヘッダー等微調節 ------------------------------------------------------------*/ @media only screen and (max-width:644px){ body{background-position:0 -25px;} #header h1{color:#333;} #header h2 img{max-width:90%;} nav#mainNav{width:98%;} #header{text-align:center;} #header h2,.contact{float:none;} .contact{padding:0 0 20px;} .contact p{text-align:center;} #headerInfo{width:250px;margin:0 auto;} img.alignright, img.alignleft{display:block;margin:5px auto;} .alignright,.alignleft{float:none;} }