@charset "Shift-JIS";
/**********************************************************************
**********************************************************************/

#area{ border-top:3px solid #377295; background:#FFFFFF; }
#area .area{ position:relative; width:100%; height:500px; }
#area .area>*{ position:absolute; }
#area .area svg.a{ left:0; top:0; }
#area .area #map{ left:65px; top:35px; }
#area .area #map>a>polygon, #area #map>a>rect{ fill-rule:evenodd; clip-rule:evenodd; }
#area .area #map>a>polygon, #area #map>a>rect, #area #map>a>g>*{ fill:#63AD88; }
#area .area #map>a:hover>polygon, #area #map>a:hover>rect, #area #map>a:hover>g>*,
#area .area #map>a.on>polygon, #area #map>a.on>rect, #area #map>a.on>g>*{ fill:#A1CEB8; }
#area .area>div{
	background:#EDF5F2; box-shadow:1px 1px #BCD1CB,2px 2px #BCD1CB,3px 3px #BCD1CB/*,4px 4px #BCD1CB,5px 5px #BCD1CB,6px 6px #BCD1CB*/;
	padding:10px 15px;
}
#area #area_0 .a1{ left:401px; top:37px; }
#area #area_0 .a2{ left:646px; top:89px; }
#area #area_0 .a3{ left:634px; top:229px; }
#area #area_0 .a4{ left:438px; top:394px; }
#area #area_0 .a5{ left:323px; top:115px; }
#area #area_0 .a6{ left:208px; top:115px; }
#area #area_0 .a7{ left:259px; top:394px; }
#area #area_0 .a8{ left:33px; top:205px; }
#area #area_0>div h4{ font-size:1.8rem; line-height:1.6; color:#63AC85; font-weight:400; text-align:center; }
#area #area_0>div a{ text-decoration:none; }
#area #area_0>div a:hover{ text-decoration:underline; }
#area #area_0>div table{ font-size:1.3rem; line-height:1.6; border-collapse:separate; border-spacing:5px; border:none; margin-top:5px; }
#area #area_0 .a4 h4,
#area #area_0 .a7 h4{ margin-top:12px; margin-right:5px; float:left; }
#area #area_0 .a4 table,
#area #area_0 .a7 table{ margin-top:0; }

#area .area .back{ left:21px; top:432px; }
#area .area .back a{
	display:block; width:58px; height:44px;
	background:url(../img/top/back.svg) no-repeat center/58px 44px;
	font-size:1.4rem; line-height:1.6; font-weight:600; color:#63AD88; text-decoration:none;
}

#area .area form{ right:0; top:0; bottom:0; width:270px; background:#EDF5F2; padding:25px 15px 15px 25px; }
#area .area form h4{ font-size:2.2rem; line-height:1.8; color:#63AC85; font-weight:400; }
#area .area form ul{ list-style:none; font-size:1.4rem; line-height:1.8; height:350px; margin-bottom:10px; overflow-y:auto; }
#area .area form ul li{ margin-bottom:15px; }
#area .area form ul li label{ cursor:pointer; display:block; }
#area .area form ul li label:hover{ text-decoration:underline; }
#area .area form ul li input[type="checkbox"]{ border:1px solid #666666; width:12px; height:12px; display:inline-block; vertical-align:middle; margin-right:0.5em; }
#area .area form ul li input[type="checkbox"]:checked{ background:url(../img/icon/checked.svg) no-repeat center/12px 12px; }

#area .area form input[type="submit"]{
	display:block; cursor:pointer;
	font-size:1.9rem; line-height:50px; font-weight:500; color:#FFFFFF; width:150px; margin:0 auto;
	background:#D76678; border-radius:5px; border:none;
}

#area .area .a a{ text-decoration:none; font-size:18px; }
#area .area .a a polygon,.a a rect{ fill:#63AD88; }
#area .area .a a:hover polygon,.a a:hover rect,
#area .area .a a.on polygon,.a a.on rect{ fill:#A1CEB8; }
#area .area .a a text{ fill:#FFFFFF; }

#genre{ border-top:3px solid #377295; background:#FFFFFF; margin-top:45px; }

#genre #serch{ background:url(../img/top/serch_boder.svg) repeat-x bottom left/5px 1px, url(../img/top/cat_bg.jpg) no-repeat right top; min-height:210px; padding:85px 40px 35px 55px; }
#genre #serch h4{ font-size:1.8rem; line-height:1.0; margin-bottom:10px; }
#genre #serch select:disabled{ display:none; }
#genre #serch:before{
	display:block; float:left; content:" "; width:88px; height:88px; border-radius:44px; margin:0 auto; margin-right:30px;
	background:#377295 url(../img/top/icon_01.png) center/100% 100%;
}
#genre #serch select{
	display:inline-block; vertical-align:top; height:50px;
	font-size:1.6rem; padding:0 35px 0 15px; border:1px solid #CCCCCC;
	background:url(../img/icon/w2.svg) no-repeat right 6px center/8px 5px, url(../img/select_bg_arr.gif) #FFFFFF repeat-y right;
}
#genre #serch select[name="zip1"]{ min-width:140px; }
#genre #serch select[name="zip2"]{ min-width:215px; }
#genre #serch input[type="submit"]{
	display:inline-block; vertical-align:top; cursor:pointer;
	font-size:1.9rem; line-height:50px; font-weight:500; color:#FFFFFF; width:150px; margin:0 auto;
	background:#D76678; border-radius:5px; border:none;
}

#genre #cat{ font-size:0; line-height:0; margin-bottom:95px; }
#genre #cat li{ display:inline-block; width:25%; vertical-align:top; padding:35px 0 5px; }
#genre #cat li a{ display:block; font-size:1.6rem; line-height:1.5; text-align:center; text-decoration:none; }
#genre #cat li a.i:before{
	display:block; content:" "; width:88px; height:88px;
	border-radius:44px; background-size:100% 100% !important;
	margin:0 auto 5px;
}
.i._01:before{ background:#377295 url(../img/icon/cat/1.svg); }
.i._02:before{ background:#D76678 url(../img/icon/cat/2.svg); }
.i._03:before{ background:#75B796 url(../img/icon/cat/3.svg); }
.i._04:before{ background:#ACA43E url(../img/icon/cat/4.svg); }
.i._05:before{ background:#4FACB7 url(../img/icon/cat/5.svg); }
.i._06:before{ background:#9B7AAF url(../img/icon/cat/6.svg); }
.i._07:before{ background:#E59EBC url(../img/icon/cat/7.svg); }
.i._08:before{ background:#A97965 url(../img/icon/cat/8.svg); }
.i._09:before{ background:#719B3C url(../img/icon/cat/9.svg); }

#genre #rec{}
#genre #rec h4{ font-size:2.0rem; line-height:1.0; color:#377295; padding:0 30px 10px; border-bottom:1px solid #377295; }
#genre #rec ul{ list-style:none; padding-right:30px; font-size:0; line-height:0; padding-bottom:85px;  }
#genre #rec ul li{ display:inline-block; vertical-align:top; width:33.33%; padding:30px 0 0 30px; }
#genre #rec ul li img{ width:100%; height:auto; }

#bottom{ background:#F1F1EF; }
#bottom .inner{ display:table; }
#bottom .inner>*{ display:table-cell; vertical-align:top; }
#bottom #news{ padding:40px 0 20px;  }
#bottom #news h3{ font-size:2.4rem; line-height:1.6; font-weight:500; margin-bottom:25px; }
#bottom #news ul{ list-style:none; font-size:1.4rem; line-height:1.5; padding-bottom:1em; }
#bottom #news ul li{ display:table; margin-bottom:1em;  }
#bottom #news ul li>*{ display:table-cell; padding-right:1em; }
#bottom #news .banner{ font-size:0; line-height:0; }
#bottom #news .banner a{ display:inline-block; vertical-align:top; margin:0 20px 20px 0;  }
#bottom #news .banner a img{ max-width:197px; }
#bottom .sns{ width:410px; background:rgba(255,255,255,0.50); padding:30px; }
#bottom .sns ul{ font-size:0; line-height:0; text-align:center; margin-top:30px; }
#bottom .sns ul li{ display:inline-block; padding:0 10px; }
#bottom .sns ul li img{ width:27px; }


















/* end */