@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, b, 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, p, 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, footarea, headarea, hgroup, menu, nav, section{display:block;} body{ font:12px/1.5 "Lucida Sans Unicode", "Lucida Grande","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","MS Pゴシック","MS PGothic",Sans-Serif; color:#333; -webkit-text-size-adjust:none; background:#f6f1ee; } /* リンク設定 ------------------------------------------------------------*/ a{ margin:0; padding:0; text-decoration:none; outline:0; vertical-align:baseline; background:transparent; font-size:100%; color:#222; } a:hover, a:active{ outline:none; color:#111; } a img:hover{opacity:.8;} /**** Clearfix ****/ nav#navArea ul:after, nav#navArea .inner:after, .osiraseTitle:after, .column:after,.inner:after,ul.osirase:after{content:""; display:table;clear:both;} nav#navArea ul,.osiraseTitle, .column, nav#navArea .inner,ul.osirase{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"], p.readon a{ vertical-align:top; padding:0 10px; background:#111; background:-moz-linear-gradient(top, #111 0%, #222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#222)); background:-webkit-linear-gradient(top, #111 0%,#222 100%); background:-o-linear-gradient(top, #111 0%,#222 100%); background:linear-gradient(to bottom, #111 0%,#222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#111', endColorstr='#222',GradientType=0 ); border:0; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; line-height:28px; height:28px; font-size:120%; color:#fff; } input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,p.readon a:hover{ background:#222; background:-moz-linear-gradient(top, #222 0%, #111 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#111)); background:-webkit-linear-gradient(top, #222 0%,#111 100%); background:-o-linear-gradient(top, #222 0%,#111 100%); background:linear-gradient(to bottom, #222 0%,#111 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#111',GradientType=0 ); cursor:pointer; } *:first-child+html input[type="submit"]{padding:3px;} /* レイアウト ------------------------------------------------------------*/ #wbox,.inner{ margin:0 auto; width:940px; } #content{ float:right; width:690px; padding:20px 0 50px; } #toppage #content{ width:100%; } #sidemenu{ float:left; width:220px; padding:20px 0 50px; } #footarea{ clear:both; } /* ヘッダー *****************************************************/ .bg{ background:#b19568; } /* サイト説明文 ----------------------------------*/ #headarea h1{ padding:5px 0; font-size:80%; color:#fff; font-weight:normal; } /* ロゴ (サイトタイトル) ----------------------------------*/ #headarea h2{ clear:both; float:left; padding:20px 0; color:#515151; font-size:160%; font-weight:bold; } /* SNS ----------------------------------*/ .sns{ float:right; padding:20px 0; } .sns img{margin-left:5px;} /* トップページ メイン画像 ----------------------------------*/ #mainimage{ clear:both; margin-top:20px; line-height:0; text-align:center; z-index:0; } .column{ margin:0 0 20px 0; } .toppage h4{ margin:0 0 10px; font-size:16px; font-weight:normal; color:#333; } /* 記事ループ *****************************************************/ .list{ padding:10px 0; border-bottom:1px dashed #e4e4e4; } .list:last-child{border:0;} .column .list p{padding:0;} .list b{padding-left:10px;} /* タイポグラフィ *****************************************************/ h2.title{ clear:both; margin:0 0 10px; padding:5px 0; font-size:130%; border-bottom:1px solid #000; } .dateLabel{ text-align:right; font-family:Georgia, "Times New Roman", Times, serif; } .column p{padding-bottom:15px;} .column ul{margin:0 0 10px 10px;} .column ul li{ margin-bottom:5px; padding-left:15px; background:url(images/bullet.png) no-repeat 0 8px; } .column ol{margin:0 0 10px 30px;} .column ol li{list-style:decimal;} .column h1{ margin:20px 0; padding:5px 0 5px 15px; font-size:150%; border-bottom:2px solid #222; background:url(images/headingBg.png) no-repeat 0 50%; } .column h2{ margin:10px 0; padding-bottom:2px; font-size:130%; font-weight:normal; border-bottom:2px solid #222; } .column h3{ margin:10px 0; font-size:110%; font-weight:normal; border-bottom:1px solid #222; } .column blockquote{ clear:both; padding:10px 0 10px 15px; margin:10px 0 25px 30px; border-left:5px solid #ccc; } .column blockquote p{padding:5px 0;} .column table{ border:1px #535353 solid; border-collapse:collapse; border-spacing:0; margin:10px 0 20px; } .column table th{ padding:10px; border:1px #535353 solid; border-width:0 0 1px 1px; background:#ececec; } .column table td{ padding:10px; border:1px #535353 solid; border-width:0 0 1px 1px; background:#fff; } .column dt{font-weight:bold;} .column dd{padding-bottom:10px;} .column img{max-width:100%;height:auto;} img.aligncenter{ display:block; margin:5px auto; } img.alignright, img.alignleft{ margin:0 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;} /* サイドバー ウィジェット *****************************************************/ .widgetWrap, section.widget ul{ margin:10px 0 20px 0; padding:10px 10px 0 10px; } section.widget ul ul{ border:0; margin:0; padding:0 0 0 10px; box-shadow:none; } #sidemenu ul#banners{ width:220px; margin:10px 0; } #sidemenu ul#banners li{ float:none; margin:0 0 10px; } section.widget h3{ clear:both; margin:0 0 -5px; padding:5px 0; font-size:110%; border-bottom:1px solid #eee; } section.widget li a{ display:block; padding:7px 0 7px 12px; background:url(images/arrow2.png) no-repeat 0 12px; border-bottom:1px dashed #e4e4e4; } section.widget li a:hover{background-position:2px 12px;} section.widget li:last-child a{border:0;} #searchform input[type="text"]{ width:100px; line-height:22px; height:22px; margin-right:3px; } #searchform{padding:20px 0;} /* カレンダー */ #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){color:#000;} #calendar_wrap table th:nth-child(7){color:#950000;} #calendar_wrap a{color:#111;font-weight:bold;font-weight:bold;border-bottom:1px solid #fff;} #calendar_wrap table td#prev{text-align:left;} #calendar_wrap table td#next{text-align:right;} #calendar_wrap table td#prev a{text-align:left;border:0;} #calendar_wrap table td#next a{text-align:right;border:0;} /* お知らせ  -------------*/ .osiraseTitle{ clear:both; margin:0; padding:7px 10px 7px 0; font-size:110%; border-bottom:1px solid #000; } .osiraseTitle h3{ float:left; font-weight:normal; } .osiraseTitle p{ float:right; padding:0 0 0 10px; font-size:80%; background:url(images/arrow2.png) no-repeat 0 5px; } .osirase p{ clear:both; padding-bottom:2px; border-bottom:1px dashed #333; } .osirase p:last-child{border:0;} .osirase p a{ display:block; padding:5px 0; color:#333; font-style:italic; font:italic 110% "Palatino Linotype", "Book Antiqua", Palatino, serif; } .osirase a b{ color:#515151; font:normal 90% Arial, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック',sans-serif; } .osirase b{padding-left:10px;} .osirase a:hover b{color:#111;} /* トップページ */ #content .osiraseTitle h3{font-size:120%;} /* フッター *****************************************************/ #footarea a{color:#333;} #footarea .boxWrap{ width:980px; margin-right:-40px; } #footarea .box{ margin-right:40px; padding:20px 0; } .box .widgetWrap, .box section.widget ul{ padding:0 0 0 7px; margin-top:0; background:transparent; border:0; box-shadow:none; } .box section.widget li a{ background:url(images/arrowWhite.png) no-repeat 0 12px; border:0; border-bottom:1px dashed #333; } .box section.widget li a:hover{background-position:2px 12px;} #footarea h3{ padding:5px; margin-bottom:10px; font-size:120%; border-bottom:1px solid #000; } .contact p{ padding:3px 0 3px 32px; margin-bottom:3px; font-size:110%; background:url(images/iconHome.png) no-repeat 4px 0; } .contact p.mail{background-image:url(images/iconMail.png);} .contact p.tel{background-image:url(images/iconTel.png);} .contact p.fax{background-image:url(images/iconFax.png);} .contact p.tw{background-image:url(images/iconTW.png);} .contact p.fb{background-image:url(images/iconFB.png);} #copyright{ color:#fff; clear:both; padding:10px 0; text-align:center; font-size:90%; background:#222; } /* 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#banners,ul.column{ width:960px; margin-right:-20px; padding-bottom:20px; } ul#banners li,ul.column li{ float:left; width:220px; margin-right:20px; } ul.column{ padding:0; background:transparent; border:0; box-shadow:none; } ul.column img{ max-width:220px; height:auto; } ul.column h3{ margin:10px 0; padding-bottom:5px; font-size:14px; font-weight:normal; color:#333; border:0; } p.readon a{ padding:3px 10px; font-size:95%; } ul#banners:after{content:""; display:table;clear:both;} ul#banners{zoom:1;} /* メインメニュー PC用 ------------------------------------------------------------*/ @media only screen and (min-width:1025px){ div.panel{ display:block !important; } a#menu{display:none;} nav#navArea ul{ clear:both; position:relative; z-index:200; width:940px; margin:0 auto; } nav#navArea li{ float:left; margin-right:20px; position:relative; } nav#navArea li.hassub a{ background:url(images/arrowDown2.png) no-repeat 100% 50%; } nav#navArea li a{ display:block; _float:left; font-size:110%; line-height:45px; padding:0 50px 0 0; color:#525252; border-bottom:1px solid #eee; } nav#navArea li.current-menu-item a, nav#navArea li a:hover, nav#navArea li.current-menu-parent a{ color:#222; border-color:#b19568; } nav#navArea li.hassub.current-menu-item a,nav#navArea li.hassub a:hover, nav#navArea li.hassub.current-menu-parent a{ background:url(images/arrowDown.png) no-repeat 100% 50%; } nav#navArea li.hassub li a,nav#navArea li.hassub.current-menu-item li a, nav#navArea li.hassub.current-menu-parent li a, nav#navArea li.hassub li a:hover{background:none;} nav#navArea ul ul{ width:160px; background:#fff; } nav#navArea li ul{ display:none; opacity:0; } nav#navArea li:hover ul{ display:block; position:absolute; top:46px; left:0; z-index:500; opacity:1; } nav#navArea li li{ margin:0; float:none; width:160px; } nav#navArea li li a, nav#navArea li.current-menu-parent li a,nav#navArea li.current-menu-item li a{ padding:0 0 0 5px; height:35px; font-size:95%; line-height:35px; } nav#navArea li.current-menu-item li a, nav#navArea li.current-menu-parent li a{ color:#adadad; border-bottom:1px solid #adadad; } nav#navArea li li.current-menu-item a,nav#navArea li li a:hover{ color:#222; border-color:#222; } } /* メインメニュー iPadサイズ以下から ------------------------------------------------------------*/ @media only screen and (max-width:1024px){ nav#navArea{ clear:both; width:100%; margin:0 auto 10px; } nav#navArea a.menu{ width:100%; display:block; height:37px; line-height:37px; font-weight:bold; text-align:left; border-top:1px solid #d5d5d5; border-bottom:1px solid #d5d5d5; background:url(images/menuOpen.png) no-repeat 5px 8px; } nav#navArea a#menu b{padding-left:35px;} nav#navArea a.menuOpen{ border-bottom:0; background:url(images/menuOpen.png) no-repeat 5px -34px; } nav#navArea a#menu:hover{cursor:pointer;} nav .panel{ display:none; width:100%; position:relative; right:0; top:0; z-index:1; } nav#navArea ul{margin:0;padding:0;} nav#navArea ul li{ float:none; clear:both; width:100%; height:auto; line-height:1.2; } nav#navArea ul li:first-child{border-top:1px solid #d5d5d5;} nav#navArea ul li li:first-child{border-top:0;} nav#navArea ul li a,nav#navArea ul li.current-menu-item li a{ display:block; padding:15px 10px; text-align:left; border-bottom:1px dashed #ccc; background:#fff; } nav#navArea ul li:last-child a{border:0;} nav#navArea ul li li:last-child a{border:0;} nav#navArea ul li li:last-child a{border-bottom:1px dashed #ccc;} nav#navArea ul li a b{display:none;} nav#navArea ul li.current-menu-item a,nav#navArea ul li a:hover,nav#navArea ul li.current-menu-item a,nav#navArea ul li a:active, nav#navArea ul li li.current-menu-item a, nav#navArea ul li.current-menu-item li a:hover, nav#navArea ul li.current-menu-item li a:active{ background:#f6f6f6; } nav#navArea ul li li{ float:left; border:0; } nav#navArea ul li li a, nav#navArea ul li.current-menu-item li a, nav#navArea ul li li.current-menu-item a{ padding-left:40px; background:#fff url(images/sub1.png) no-repeat 20px 18px; } nav#navArea ul li li.current-menu-item a,nav#navArea ul li li a:hover, nav#navArea ul li.current-menu-item li a:hover{ background:#f6f6f6 url(images/sub1.png) no-repeat 20px -62px; } nav#navArea ul li li:last-child a{background:#fff url(images/subLast.png) no-repeat 20px 20px;} nav#navArea ul li li:last-child.current-menu-item a,nav#navArea ul li li:last-child a:hover,nav#navArea ul li.current-menu-item li:last-child a:hover{background:#f6f6f6 url(images/subLast.png) no-repeat 20px -65px;} nav div.panel{float:none;} #mainimage{margin-bottom:20px;} } /* 959px以下から 1カラム表示 ------------------------------------------------------------*/ @media only screen and (max-width:959px){ #headarea{width:100%} .inner,#footarea .boxWrap,#wbox{width:96%;} #mainimage img{width:96%;height:auto;} #content, #sidemenu{clear:both;width:95%;float:none;margin:0 auto;padding:10px 0;} #sidemenu{background:url(images/border.png) repeat-x;padding-top:30px;} ul.column,ul#banners,#sidemenu ul#banners{width:100%;display:table-row;margin:0;} ul.column li,ul#banners li,#sidemenu ul#banners li{float:left;width:23%;margin:0 1%;padding:0 0 20px;} ul.column img,ul#banners li img,#sidemenu ul#banners img{max-width:98%;height:auto;} #calendar_wrap table{width:260px;margin:0;} #footarea .boxWrap{margin:0;padding:0;} #footarea .box{float:none;width:100%;margin:10px 0;} } /* 幅620px以下から ------------------------------------------------------------*/ @media only screen and (max-width:620px){ ul.column li,ul#banners li,#sidemenu ul#banners li{width:42%;margin:0 0 0 6%;} ul.column li:nth-child(2n+1){clear:left;} .column img{max-width:100%;height:auto;} img.alignright, img.alignleft{display:block;margin:5px 2%;max-width:96%;height:auto;} .alignright,.alignleft{float:none;} }