@charset "utf-8";
html, body { -webkit-text-size-adjust: 100%; }
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, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
:focus { outline: 0; }
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: "" ""; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; margin: 0; padding: 0; }
img, img a, img a:hover { border: 0; margin: 0; padding: 0; }
body { text-align: center; font: 80% 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; margin: 0; padding: 0; }
@media (min-width: 768px) {
body { font-size: 100%; }
}
/* ************************************************** */
a { text-decoration: none; outline: none; }
a:hover { text-decoration: none; color: #f00; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; background-color: transparent; }
#menu a { color: #fff; }
#menu a:hover { color: #c00; }
.logo a { color: #36f; }
.logo a:hover { color: #f00; }
/* ************************************************** */

/* ************************************************** heading */
h1 { font-size: 100%; }
h2, h3, h4, h5, h6 { font-size: 120%; }
h2 { color: #36f; line-height: 1.3; padding: 1em 0; border-top: 1px dotted #000; }
h3 { color: #ad004f; margin: 1em 0 0.5em; padding-top: 0.5em; border-top: 1px dotted #ddd; }
h4, h5, h6 { color: #09f; padding: 0.5em 0; }
@media (min-width: 768px) {
h2 { font-size: 160%; font-weight: bold; }
h3, h4, h5, h6 { font-weight: bold; }
h3 { font-size: 140%; }
h4, h5, h6 { font-size: 120%; }
}
/* ************************************************** MENU*/
#menu img { display: none; }
#menu ul, #menu li, #menu dl, #menu dt, #menu dd { margin: 0; padding: 0; list-style: none; }
#menu li, #menu dd { margin-bottom: 1px; }
#menu li span { display: block; line-height: 30px; padding: 0 3%; background: #f9f9f9; color: #000; }
.globalnavi li a, .localnavi li a, #menu dd a { display: block; width: 94%; padding: 4% 3%; background: #000; }
/* ************************************************** FLOAT*/
@media (min-width: 768px) {
.column3, .column4 { float: left; display: block !important; }
.column3 { width: 32%; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 2% !important; }
.column4 { width: 23.5%; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 2% !important; }
}
/* ************************************************** レイアウト */
#sb-site, .sb-slidebar { text-align: left; }
.header-inner, #wrapper, .footer-inner { width: 93.75%; margin: 0 auto; }
.header-inner { position: relative; height: 80px; }
#content { margin: 0 0 2em; }
.entry { padding: 2em 0; }
#menu { color: #fff; }
.footer-inner { overflow: hidden; }
@media (min-width: 768px) {
.header-inner, #wrapper, .footer-inner { width: 95%; }
.header-inner { height: 120px; }
#home .header-inner { background: url(/prx/000/http/www.css-designsample.com/image/homeBg.jpg) no-repeat 0 0; background-size: 100% auto; }
#home .header-inner { height: 220px; }
}
@media (min-width: 960px) {
#home .header-inner { height: 270px; }
}
@media (min-width: 1024px) {
.header-inner, #wrapper, .footer-inner { width: 80%; }
#home .header-inner { height: 300px; }
.header-inner { background: url(/prx/000/http/www.css-designsample.com/image/homeBg.jpg) no-repeat 0 0; background-size: 40% auto; }
}
@media (min-width: 1440px) {
.header-inner, #wrapper, .footer-inner { width: 88%; }
#home .header-inner { height: 350px; }
}
@media (min-width: 1680px) {
.header-inner, #wrapper, .footer-inner { width: 75%; }
#home .header-inner { height: 350px; }
}
/* ************************************************** ヘッダ */
.logo { font-size: 150%; font-weight: bold; width: 100%; text-align: center; line-height: 1em; position: absolute; left: 0; }
.desc { width: 100%; text-align: center; line-height: 1.3em; position: absolute; left: 0; }
.logo { bottom: 3em; }
.desc { bottom: 1em; }
.desc span { display: block; }
.header-inner h1, .catname { display: none; }
@media (min-width: 768px) {
.logo { font-size: 100%; font-weight: normal; text-align: left; }
.desc { text-align: left; line-height: 1; position: absolute; left: 0; color: #999; }
.logo { bottom: 5.35em; }
.desc { bottom: 4em; }
.header-inner h1, .catname { display: block; width: 100%; line-height: 1; position: absolute; left: 0; }
.header-inner h1 { bottom: 2.35em; }
.catname { bottom: 1em; color: #999; }
.desc span { display: inline; }
}
@media (min-width: 1024px) {
.logo, .desc, .header-inner h1, .catname { left: 42%; }
#home .logo, #home .desc, #home .header-inner h1, #home .catname { left: 0; }
}
@media (min-width: 1680px) {
.logo, .desc, .header-inner h1, .catname { left: 50%; }
}
/* ************************************************** コンテンツ */
.topicpath { display: none; }
.entry p { line-height: 1.75em; margin: 0; padding: 0.25em 0; }
@media (min-width: 768px) {
.topicpath { display: block; width: 100%; line-height: 1; overflow: hidden; margin: 0; padding: 0.5em 0; border-top: 1px dotted #000; }
.topicpath li { list-style: none; line-height: 1em; margin: 0; padding: 0 1.5em 0 0; display: table-cell; }
}
.pagenavi { width: 100%; margin: 0 0 1em; padding: 1.5em 0; border-bottom: 1px dotted #ddd; border-top: 1px dotted #ddd; }
.pagenavi ul { width: 100%; overflow: hidden; margin: 0; padding: 0; }
.pagenavi li { list-style: none; margin: 0; padding: 1px 0; }
.pagenavi li a { display: block; width: 96%; padding: 3% 2%; background: #eee; }
@media (min-width: 768px) {
.pagenavi li { width: 50%; float: left; text-align: center; }
.pagenavi li a { width: 100%; padding: 0; background: #fff; }
}
/* ************************************************** アド */
.contentTop-ads { display: none; }
.contentFoot-ads { width: 100%; overflow: hidden; }
.ads_title { line-height: 1em; padding: 0.5em 0; text-align: center; }
.contentFoot-ads div { text-align: center; }
@media (min-width: 728px) {
.contentTop-ads { display: block; }
.contentTop-ads .ads_title { text-align: left; }
}
/* ************************************************** フッタ */
.copyright { text-align: center; clear: both; padding: 1em 0; }
.copyright span { display: block; }
.footer-inner ul { overflow: hidden; margin: 0 0 1em; padding: 0; }
.footer-inner ul li { list-style: none; margin: 0 0 2px; padding: 0; }
.footer-inner ul li img { display: none; }
.footer-inner ul li a { display: block; width: 90%; line-height: 1.4; padding: 5% 8% 5% 2%; background: #f9f9f9 url(/prx/000/http/www.css-designsample.com/image/btnArrow.png) no-repeat 100% 50%; background-size: auto 50%; }
.footer-inner ul span { display: block; text-align: center; line-height: 1em; margin-bottom: 0.5em; padding: 0.35em 0; background-color: #eee; }
.footernav { clear: both; }
@media (min-width: 768px) {
.footer-inner { font-size: 80%; }
.copyright { padding-top: 3em; }
.copyright span { display: inline; padding-left: 1em; }
.aff_title { clear: both; text-align: center; margin-bottom: 0.5em; border-bottom: 1px dotted #ccc; }
.footer-inner ul { margin-bottom: 2em; }
.footer-inner ul li { display: inline; }
.footer-inner ul li a { display: inline; width: 100%; line-height: 1; padding: 0 2em 0 0; background-image: none; background-color: transparent; }
.footer-inner ul.aff li { display: block; }
}
/* ************************************************** */
/*Google site search*/

#cse-search-form { width: 95%; margin: 0 auto 15px; }
@media (min-width: 768px) {
#cse-search-form { width: 100%; overflow: hidden; }
.gsc-search-box { width: 400px !important; float: right !important; }
#gsc-i-id1 { padding: 3px 0 !important; }
}
input.gsc-input { border-color: #BCCDF0; }
input.gsc-search-button { border-color: #CECECE; background-color: #E9E9E9; }
/*検索結果*/
div#cse { width: 90%; margin: 0 0 1em; padding: 1% 0 0; background: #000; }
.gsc-control-cse { font-family: Arial, Helvetica, sans-serif; border-color: #FFFFFF; background-color: #FFFFFF; }
input.gsc-input { border-color: #ccc; }
input.gsc-search-button { border-color: #CECECE; background-color: #E9E9E9; }
.gsc-tabHeader.gsc-tabhInactive { border-color: #E9E9E9; background-color: #E9E9E9; }
.gsc-tabHeader.gsc-tabhActive { border-top-color: #FF9900; border-left-color: #E9E9E9; border-right-color: #E9E9E9; background-color: #FFFFFF; }
.gsc-tabsArea { border-color: #E9E9E9; }
.gsc-webResult.gsc-result, .gsc-results.gsc-imageResult { border-color: #FFFFFF; background-color: #FFFFFF; }
.gsc-webResult.gsc-result:hover, .gsc-webResult.gsc-result.gsc-promotion:hover, .gsc-imageResult:hover { border-color: #FFFFFF; background-color: #FFFFFF; }
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b { color: #0000CC; }
.gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b { color: #0000CC; }
.gs-webResult.gs-result a.gs-title:hover, .gs-webResult.gs-result a.gs-title:hover b, .gs-imageResult a.gs-title:hover, .gs-imageResult a.gs-title:hover b { color: #0000CC; }
.gs-webResult.gs-result a.gs-title:active, .gs-webResult.gs-result a.gs-title:active b, .gs-imageResult a.gs-title:active, .gs-imageResult a.gs-title:active b { color: #0000CC; }
.gsc-cursor-page { color: #0000CC; }
a.gsc-trailing-more-results:link { color: #0000CC; }
.gs-webResult.gs-snippet, .gs-imageResult.gs-snippet, .gs-fileFormatType { color: #000000; }
.gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl { color: #C0C0C0; }
.gs-webResult div.gs-visibleUrl-short { color: #C0C0C0; }
.gs-webResult div.gs-visibleUrl-short { display: none; }
.gs-webResult div.gs-visibleUrl-long { display: block; }
.gs-promotion div.gs-visibleUrl-short { display: none; }
.gs-promotion div.gs-visibleUrl-long { display: block; }
.gsc-cursor-box { border-color: #FFFFFF; }
.gsc-results.gsc-cursor-box.gsc-cursor-page { border-color: #E9E9E9; background-color: #FFFFFF; color: #0000CC; }
.gsc-results.gsc-cursor-box.gsc-cursor-current-page { border-color: #FF9900; background-color: #FFFFFF; color: #0000CC; }
.gsc-webResult.gsc-result.gsc-promotion { border-color: #336699; background-color: #FFFFFF; }
.gsc-completion-title { color: #0000CC; }
.gsc-completion-snippet { color: #000000; }
.gs-promotion a.gs-title:link, .gs-promotion a.gs-title:link *, .gs-promotion.gs-snippet a:link { color: #0000CC; }
.gs-promotion a.gs-title:visited, .gs-promotion a.gs-title:visited *, .gs-promotion.gs-snippet a:visited { color: #0000CC; }
.gs-promotion a.gs-title:hover, .gs-promotion a.gs-title:hover *, .gs-promotion.gs-snippet a:hover { color: #0000CC; }
.gs-promotion a.gs-title:active, .gs-promotion a.gs-title:active *, .gs-promotion.gs-snippet a:active { color: #0000CC; }
.gs-promotion.gs-snippet, .gs-promotion.gs-title.gs-promotion-title-right, .gs-promotion.gs-title.gs-promotion-title-right * { color: #000000; }
.gs-promotion.gs-visibleUrl, .gs-promotion.gs-visibleUrl-short { color: #cccccc; }
#toTop { display: none; text-decoration: none; position: fixed; bottom: 10px; right: 10px; z-index: 999; overflow: hidden; width: 40px; height: 40px; border: none; text-indent: -999px; background: url(/prx/000/http/www.css-designsample.com/image/ui.totop.png) no-repeat left top; /*矢印画像の保存先を指定*/ }
#toTopHover { background: url(/prx/000/http/www.css-designsample.com/image/ui.totop.png) no-repeat left -40px; /*矢印画像の保存先を指定*/ width: 40px; height: 40px; display: block; overflow: hidden; float: left; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); }
#toTop:active, #toTop:focus { outline: none; }
/**/
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.ml0 { margin-left: 0 !important; }
.mr0 { margin-right: 0 !important; }
.pt0 { padding-top: 0 !important; }
.pb0 { padding-bottom: 0 !important; }
.pl0 { padding-left: 0 !important; }
.pr0 { padding-right: 0 !important; }