@charset "utf-8";
/* CSS Document */

/* -------------------------------------------------- */
/* BASE --------------------------------------------- */
/* -------------------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, blockquote, th, td { margin:0; padding:0; }
body { color:#333; letter-spacing: .1em; font-stretch: ultra-expanded; font: 62.5%/1.4 Avenir , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , "Meiryo UI" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; margin: 0 auto; -webkit-text-size-adjust: 100%; }


/* linkTextColor */
a:link {color:#1841ce; text-decoration: none;}
a:visited {color: #572769; text-decoration: none;}
a:active {color: #438f8d; text-decoration: underline;}
a:hover {color: #0e4497; text-decoration: underline;}
a:not[class~=button]:link {color:#1841ce;text-decoration: none;}
a:not[class~=button]:visited {color: #572769;}
a:not[class~=button]:active {color: #438f8d;}
a:not[class~=button]:hover {color: #0e4497;text-decoration: underline;}


img { max-width: 100%; width: auto\9; /* ie8 */ height: auto; border:0; vertical-align: top; }
.a-img a:hover img{ opacity:0.6; filter: alpha(opacity=60); }

ul, ol { list-style: none; }

/*clearfix*/
.clearfix:before, .clearfix:after { content:""; display:table; }
.clearfix:after { clear:both; }
.clearfix { zoom: 1; }

/* pc-nonpc_switch  */
.pc { display:block; }/*pcのみ表示*/
.tablet { display:none; }/* tabletのみ表示*/
.nonpc { display: none; }/*pc非表示、tablet,smartphoneで表示*/
.nonpc-inline { display: none; }/*pc非表示、tablet,smartphoneで表示*/
.pc-tablet { display: block; }/* PC,tabletで表示 */
.pc-tablet-inline { display: inline; }/* PC,tabletで表示 */
.nonpc-small { display: none; }/* smartphoneのみ表示*/
.nonpc-small-inline { display: none; }/* smartphoneのみ表示*/
@media screen and (max-width: 768px) {
.pc { display:none; }/*pcのみ表示*/
.tablet { display:block; }/* tabletのみ表示*/
.nonpc { display:block; }/*pc非表示、tablet,smartphoneで表示*/
.nonpc-inline { display: inline; }/*pc非表示、tablet,smartphoneで表示*/
}
@media screen and (max-width: 480px) {
.tablet { display:none; }/* tabletのみ表示*/
.pc-tablet { display: none; }/* PC,tabletで表示 */
.pc-tablet-inline { display: none; }/* PC,tabletで表示 */
.nonpc-small { display: block; }/* smartphoneのみ表示*/
.nonpc-small-inline { display: inline; }/* smartphoneのみ表示*/
}

/* 全体を含むボックス：100%とする */
#page { width: 100%; }


#top { width: 100%; background: #F5F5F5; height: 17px; margin-bottom: 13px;}
#h1_txt { width: 980px; margin: 0 auto; font-size: 12px; font-weight: normal; line-height: 1.2; padding: 4px 0 8px 0; }
@media screen and (max-width: 768px) { #h1_txt { width: 96%; } }
@media screen and (max-width: 480px) { #h1_txt { width: 300px; } }


/* -------------------------------------------------- */
/* HEADER_AREA -------------------------------------- */
/* -------------------------------------------------- */
#header-box { width: 980px; margin: 0 auto;}
#header-top{ overflow: hidden; padding: 0 0 10px 0; } /* ヘッダ画像上ボックス */
#head-l{ float: left; width: 30%; }
#head-r{ float: right; width: 50%; }

#head { width: 980px; height: 320px; margin: 0 auto; background: url(../image/cmn/head.jpg) no-repeat center bottom; }
#head-consul{ padding: 208px 0 0 0; }/* 初回無料相談ボタン（PC） */

@media screen and (max-width: 768px) {
#header-box{ width: 96%; }
#head { background-size: 82%; width: 96%; height: 96%; }
#head-consul { width: 54%; padding: 120px 0 4px 20px; }
}

@media screen and (max-width: 650px) {
#head-consul { padding-top: 100px; }
}
@media screen and (max-width: 580px) {
#head-consul { padding-top: 90px; }
}
@media screen and (max-width: 480px) {
#header-box { width: 300px; }
#head-l{ float: left; width: 43%;}
#head { background:none; }
}

/* HEADER_AREA - GlobalNavi ---------------- */
#gnavi-box {width: 980px; clear: both; margin: 0 auto; }
#gnavi { }

#gnavi ul { width: 980px; overflow: hidden; }
#gnavi li { float: left; text-align: center; }

/* 画像２パターン（ロールオーバー画像有）タイプ */
#gnavi-ul-1 { }
#gnavi-ul-1 li {  }
#gnavi-ul-1 li a { display: block; padding: 10px 26.8px; height: 21px; }
#gnavi-ul-1 li a:hover { background: url(../image/cmn/gnavi_bg_over.jpg) repeat-x; }


@media screen and (max-width: 768px) {
#gnavi-box { width: 100%; }
#gnavi ul { width: 100%; }
#gnavi li { width: 33%; }
#gnavi li a img{ width: auto; max-width: 80%; }
}
@media screen and (max-width: 650px) {
#gnavi li { width: 33%; }
}
@media screen and (max-width: 480px) {
#gnavi { width: 300px; margin: 0 auto; border: none; }
#gnavi ul {  }
#gnavi li { width: 50%; text-align:left; }
#gnavi li a { padding-left:2em;}
}




/* -------------------------------------------------- */
/* CONTENTS_AREA ------------------------------------ */
/* -------------------------------------------------- */
/* contents = main + side */

#contents-area { clear: both; margin: 0 auto; width: 980px; }
#contents-area-box { overflow: hidden; padding: 20px 0 0 0; }
#main { float: right; overflow: hidden; width: 680px; font-size: 1.4em; }
#main p { margin-bottom: 1em; line-height: 1.6; }
@media screen and (max-width: 768px) {
#contents-area { width: 100%; }
#contents-area-box { padding:0; }
#main { float: none; padding: 20px 0 0 0; margin: 0 auto; }
}
@media screen and (max-width: 650px) {
#contents-area-box { margin: 0 auto; width: 96%; }
#main { margin: 15px auto 30px 0; padding: 0; width: 100%; }
}
@media screen and (max-width: 480px) {
#contents-area { width: 100%; }
#contents-area-box { width: 300px; }
}

/* CONTENTS_AREA - MAIN ---------------- */
#breadcrumb{ margin: 0 0 10px; padding: 0; border: 1px solid #CCC; height: 26px; line-height: 24px; border-radius: 4px; background: #F2F2F2;}
#breadcrumb li{	padding: 0 6px 0 4px;	float: left; font-size: .91em; color:#757264; }
#breadcrumb li img{ vertical-align: bottom; }
#breadcrumb li a{ display: block; padding: 0 12px 0 0; background: #FFFAF7 url(../image/cmn/crumbs.gif) no-repeat right; color:#757264; }
#breadcrumb li a:hover, #breadcrumb li a:focus{ color: #777; }
@media screen and (max-width: 480px) {
#breadcrumb li{ padding-left: .2em; font-size: .9em; letter-spacing: -1px; }
#breadcrumb li a{ padding-right: 8px; }
}

#page-ttl{ background:url(../image/ttl/ttl_bg.gif) repeat-x bottom; padding: 10px 0 10px 0px; margin-bottom: 1em; }

#main h2 { }
.h2-txt { color:#FFF; background:url(../image/cmn/h2_bg.gif) repeat; margin-bottom: 10px; padding: 6px 0 5px 10px; min-height:28px; clear:both;}
#main h3 { }
.h3-txt {color:#333; display:inline-block;  font-size: 1.2em; font-weight:bold; padding: 4px 12px 0; margin-bottom:1em; background:url(../image/cmn/tag_bg_l.png) no-repeat left center,url(../image/cmn/tag_bg_r.png) no-repeat right center; height:34px; background-color:##85B840; box-sizing:border-box; clear:both; }
.h3-txt2 {background: #E8F3BE;border: 1px solid #AACF52;border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px;color: #333; margin-bottom:1em;padding: 4px 22px 0; clear:both; display:inline-block;}
#main h4 {  }
.h4-txt { color:#1388A1; padding: 0 0 4px 0px;margin: 30px 0 4px 0; font-size:16px; clear:both;}

.h2-txt a {color:#FFF;}

@media screen and (max-width: 480px) {
.h3-txt {font-size: 1em;}

}

/* ボタンアクション */
.btn-action{ text-align: center; margin: 60px 0;}
#btn-action{ background:url(../image/cmn/btn_action_bg.gif) no-repeat; padding:78px 0 0 180px; width:680px; height:240px; }
.btn-action a:hover img{ opacity:0.6; filter: alpha(opacity=60); }
@media screen and (max-width: 650px) {
#btn-action { display:none;}
}


/* ページトップ */
#page-top { float: none; position: fixed; bottom: 50px; right: 20px;text-align:right; padding: 0 0 10px 0; font-size: 110%; font-family: Helvetica, Arial; }
#page-top a { text-decoration: none; color: #fff; width: 100px; padding: 12px 6px; text-align: center; display: block; border-radius: 5px; }
#page-top a:hover { text-decoration: none;}
@media screen and (max-width: 768px) {
#page-top { bottom: 0px; right: 10px; }
}



/* -------------------------------------------------- */
/* SIDE_AREA ---------------------------------------- */
/* -------------------------------------------------- */

#sidebar { float: left; width: 300px; font-size: 1.4em; margin-bottom:60px;}
#sidebox { width: 260px; }
@media screen and (max-width: 768px) { #sidebar { float: none; width: 100%; } #sidebox { width: 630px; margin: 20px auto; } }
@media screen and (max-width: 650px) { #sidebox{ width: 96%; } }
@media screen and (max-width: 480px) { #sidebar{ width: 100%; } #sidebox { width: 260px; } }

@media screen and (max-width: 768px) { 
.side-left{ float: left; margin: 0 20px 0 0; }
.side-right{ float: right; margin: 0 0 0 20px; }
}
@media screen and (max-width: 650px) { 
.side-left, .side-right,#sidebarxx { width: 48%; }
.side-left{ margin-right: 2%; }
.side-right,#sidebarxx { margin-left: 2%; }
}
@media screen and (max-width: 480px) { .side-left, .side-right{ margin: 0 auto; float: none; width:100%; } }


/* btn-action-box */
#sidebox .btn-action-box{ background:url(../image/cmn/side_cntct_bg.gif) no-repeat; padding: 108px 0 0 13px; width: 260px; height: 136px; }
@media screen and (max-width: 560px) {
#sidebox .btn-action-box{ width: 100%; background-size: contain; padding: 98px 2% 1px 4%; }
}


/* side-menu */
.side-menu-ul {border: 1px solid #ccc; border-radius: 3px; padding:0 6px;}
.side-menu-ul li { background: url(../image/cmn/side_menu_bar.gif) bottom left no-repeat; padding-bottom: 6px; padding-left:10px; }
.side-menu-ul li a  { display: block; padding: 18px 0 6px 15px; }
.side-menu-ul li a:link { background:url(../image/cmn/side_menu_bg.gif) no-repeat left 23px;color: #333;text-decoration: none;}
.side-menu-ul li a:hover { background: url(../image/cmn/side_menu_bg_over.gif) no-repeat left 23px;color: #0e4497;text-decoration: underline;	}
.side-topics {border: 1px solid #AACF52 !important;}
.side-menu-ul li:last-child { background:none;}
@media screen and (max-width: 480px) { .side-menu-ul li a  { width: 230px; } }



/* ---------------------------------------------------- */
/* FOOTER_AREA ---------------------------------------- */
/* ---------------------------------------------------- */

#footer { width: 100%; clear: both; font-size: 1.4em; background:url(../image/cmn/footer_line.gif) repeat-x top; }
#footer-area { width: 980px;  margin: 0 auto; padding-top: 20px; }
@media screen and (max-width: 768px) { #footer-area { width: 630px; } }
@media screen and (max-width: 650px) { #footer-area { width: 96%; } }


/* footer-access-box */
#footer-access-box{ width: 370px; float:left;}
#footer-access-box p { margin: 20px 0 10px;}
#footer-access-box iframe { margin-bottom: 5px;}
#footer-access-box .map-box { width: 320px; height: 160px;}
@media screen and (max-width: 768px) {
#footer-access-box { width: 260px; }
#footer-access-box .map-box{ width: 260px; }
}
@media screen and (max-width: 650px) { 
#footer-access-box{ width: 260px; margin-left: 2%; }
#footer-access-box img{ margin: 0 auto; width: 96%; }
#footer-access-box .map-box{ width: 260px; }
}
@media screen and (max-width: 560px) { 
#footer-access-box{ width: 48%; }
#footer-access-box .map-box{ width: 100%; }
}


/* footer-menu */
#footer-menu { float: right; width: 455px; padding-bottom: 15px; }
@media screen and (max-width: 768px) { #footer-menu { width: 260px; } }
@media screen and (max-width: 650px) { #footer-menu { width: 48%; margin-left: 5px; } }

.footer-link { padding: 30px 0 20px 0; width: 225px; float:left; }
.footer-link ul { text-align: left; overflow: hidden; }
.footer-link li { display: block; margin: 2px 0; padding: 0 4px 0 2px;}
.footer-link a{ color: #333; text-decoration: none; }
.footer-link a:hover{ text-decoration: underline; }
@media screen and (max-width: 768px) { .footer-link { width: 260px; padding-top: 0; } }
@media screen and (max-width: 650px) { .footer-link { width: 260px; } }
@media screen and (max-width: 560px) { .footer-link { width: 100%; } }


/* footer-copyright */
#footer-copyright { font-size: 12px; color:#FFF;width: 100%; padding: 8px 0; background: #85B840; text-align: center; clear:both; }
#footer-copyright a { color:#FFF;text-decoration: none; }
@media screen and (max-width: 768px) { #footer-copyright { width: 100%; clear:both; } }
@media screen and (max-width: 480px) { #footer-copyright { height: auto; } }



/* ---------------------------------------------------- */
/* PRINT ---------------------------------------------- */
/* ---------------------------------------------------- */
@media print {
body { background: #FFF; }
#contents-area-box { overflow: visible; }
#page-top { display: none; }
}
