@charset "utf-8";

@media screen and (max-width:1000px) {
main .contIn{ padding: 0 1%;}
}
#nowSearch{ margin-bottom: 50px;}
#itemListArea{ width: 100% !important;}

/* CSS Document */
.pageTtlWrap { margin-bottom: 20px;}
.pageTtlWrap .ttl{ max-width: 100%; font-size: 20px; padding: 10px 5px 5px;}
.txt-info{ display: block; font-size: 12px; letter-spacing: 0; line-height: 1.2em; padding:0 20px 20px;}
.txt-info .row{ display: flex; margin-top: 10px; padding: 8px 14px; border-radius: 4px; border: solid 1px #aaa; color: #ccc;}
.txt-info .row b{ color: #222;}
.txt-info .row a{ display: block; text-decoration: underline; margin:0 8px;}
.txt-info .row a:hover{ text-decoration: none;}

/*----------------------
kakaku-top
-----------------------*/
.kakaku-top{ width: 100%; display: flex; flex-direction: column;}
.kakaku-top .p-links { display: flex; flex-direction: row; flex-wrap: wrap; border-bottom: dotted 2px #aaa; padding-bottom: 20px; margin-bottom: 20px;}
.kakaku-top .p-links b{ width: 100%; margin-bottom: 5px;}
.kakaku-top .p-links a{ display: block; font-size: 12px; padding: 2px 4px; border: solid 1px #555; color: #111; border-radius: 4px; margin: 0 12px 0 0;}
.kakaku-top .p-links a:hover{ border: solid 1px #008342; color: #fff; background: #008342;}

.kakaku-top table, 
.kakaku-top table tbody{ width: 100%;} 
.kakaku-top table tbody tr{ width: 100%; border-bottom: solid 1px #aaa;} 
.kakaku-top table tbody tr th{ position: relative; padding-bottom: 50px;} 
.kakaku-top table tbody tr th b{ position: sticky; left: 0; top: 80px; padding: 4px 8px; border-radius: 4px; font-size: 16px; font-weight: bold; margin: 10px 0; background:#008342; color: #fff; white-space: nowrap;}
.kakaku-top table tbody tr td{ padding:20px 10px;}
.kakaku-top table tbody tr td p{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;}
.kakaku-top table tbody tr td p a{ display: flex; flex-direction: column; align-items: center; padding:12px 8px; border: solid 1px #aaa; background: linear-gradient(to bottom, rgb(255,255,255) 43%,rgb(230,230,230) 100%);
 border-radius: 4px; margin: 8px 6px; box-shadow: 0 4px 8px rgba(0,0,0,.1); transition: 0.2s;}
.kakaku-top table tbody tr td p a:hover{ box-shadow: 0 0 0 3px #008342; border: solid 1px #008342; background: #fff;}
.kakaku-top table tbody tr td p a b{ font-size: 18px; color: #000;}
.kakaku-top table tbody tr td p a:hover *{color: #008342;}
.kakaku-top table tbody tr td p a span{ font-size: 9px; text-align: center; line-height: 1.2em; color: #777; font-weight: bold; white-space: nowrap;}



/*------------------------
#otherPrices
-------------------------*/
#otherPrices{ display: flex; flex-direction: column; padding:15px 8px; border-radius: 4px; background: #eee; border: solid 1px #999; margin-top: 40px;}
#otherPrices h3{ font-size: 14px; margin-top: 5px;}
#otherPrices ul{ width: 100%; display: flex; margin-top: 15px; justify-content: space-between;}
#otherPrices ul li{ width: 8.4%; display: flex;}
#otherPrices ul li a, 
#otherPrices ul li span{ width: 100%; display:flex; justify-content: center; align-items: center; height: 50px; white-space: nowrap; border: solid 1px #ccc; background: #fff; border-radius: 4px; transition: 0.4s; font-size: 11px; font-weight: bold;}
#otherPrices ul li span{ background: #999; color: #fff; border: solid 1px #999; pointer-events: none;}
#otherPrices ul li a:hover{ background:#008342; color: #fff; }

/*----------------------
area_selects
-----------------------*/
.area_selects{ display: flex;}
.area_selects ul{ width: 100%; display: flex; padding: 0 5px;}
.area_selects ul li{ display: block; margin: 0 3px;}
.area_selects ul li span{ display: flex; align-items: center; padding: 0 30px; height: 40px; color: #666; border-radius:5px 5px 0 0; border: solid 1px #008342; font-weight: bold; border-bottom: none; cursor: pointer;}
.area_selects ul li.view span, 
.area_selects ul li span:hover{ border: solid 1px #008342; border-bottom: none; background:#008342; color: #fff; }
/**/
.pSelect .area_selects ul li span{ height: 30px; border-radius:2px 2px 0 0;}


/*----------------------
selects_wrap
-----------------------*/
.selects_wrap{ width: 100%; display: none;}
.selects_wrap.view{ display:block;}
.selects_wrap .other{ width: 100%; padding: 10px; line-height:18px; font-weight: bold; color: #fff; background: #008342;}
.selects_wrap .wrap.type{ width: 100%; padding: 10px; display: flex; align-items: flex-start; flex-direction: column; background: #DFEBE6; border: solid 1px #008342; }
.selects_wrap .wrap.type .ttl{ font-size: 13px; font-weight: bold; padding-right: 10px;}
.selects_wrap .wrap.type h3{ width: auto; font-size: 13px; letter-spacing: 2px; font-weight: bold; padding: 10px 15px; line-height: 1em; background: #444; border-radius: 4px; color: #fff; margin: 0 0 10px;}
/**/
.selects_wrap .wrap .dlwrap{ width: 100%; display: flex; flex-direction:column}
.selects_wrap .wrap.type dl{ width: 100%; display: flex; border: solid 1px #7f7f7f; overflow: hidden; border-radius: 4px; margin-bottom: 10px;}
.selects_wrap .wrap.type dl dt{ width:130px; white-space: nowrap; height: 40px; font-weight: bold; font-size: 11px; letter-spacing: 0; display: flex; align-items: center; justify-content: center; background: #efefef;}
.selects_wrap .wrap.type dl:hover { border: solid 1px #000; box-shadow: 0 0 0 1px #000;}
.selects_wrap .wrap.type dl:hover dt{ background: #008342; color: #fff; transition: 0.3s;}
.selects_wrap .wrap.type dl dd{ flex: 1; display: flex;}
.selects_wrap .wrap.type dl dd a{ width: 100%; height: 40px; white-space: nowrap;  display: flex; justify-content: center; align-items: center; font-size: 11px; border-left: solid 1px #ccc; background: #fff;}
.selects_wrap .wrap.type dl dd a:hover{ color:#008342; background:#EFF8DF; text-decoration: underline;}
.selects_wrap .wrap.type dl dd.now a{ background: #999; color: #fff; pointer-events: none;}
/**/
.pSelect .area_selects ul li span{ height: 30px; border-radius:2px 2px 0 0;}
.pSelect .selects_wrap .other{ width: 100%; padding:6px 10px 2px; line-height: 1em; line-height:16px;}
.pSelect .selects_wrap .wrap.type h3{ font-size: 12px; padding:5px 15px; border-radius: 4px 4px 0 0; margin: 0px;}
.pSelect .selects_wrap .wrap.type .dlwrap dl{ border-radius: 0px; margin-bottom: 0px; border-bottom: none; position: relative; z-index: 1;}
.pSelect .selects_wrap .wrap.type .dlwrap dl:last-child{ border-bottom: solid 1px #7f7f7f;}
.pSelect .selects_wrap .wrap.type .dlwrap:hover dl { z-index: 1; opacity: 0.3;}
.pSelect .selects_wrap .wrap.type .dlwrap dl:hover { z-index: 10; box-shadow: 0 0 0 2px #000; opacity: 1;}
.pSelect .selects_wrap .wrap.type dl dt, 
.pSelect .selects_wrap .wrap.type dl dd a{ height: 30px;}


/*-----------------------------------------------------*/
/**/
.selects_wrap .wrap table{ width: 100%; table-layout: fixed; background: #fff; flex: 1;}
.selects_wrap .wrap table tr, 
.selects_wrap .wrap table tr tbody{ width: 100%;}
.selects_wrap .wrap table td{ border: solid 1px #aaa;}
.selects_wrap .wrap table td a{ width: 100%; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 12px; color: #000; font-weight: bold; padding-top: 2px;}
.selects_wrap .wrap table td a:hover{ background: #008342; color: #fff;}
.selects_wrap .wrap table td.now a, 
.selects_wrap .wrap table td.now a:hover{ background: #ddd; color: #777; pointer-events: none;}
/**/
.town_name{ width: 100%; display: flex; flex-direction: column; margin-bottom: 40px;}
.town_name h2{ display: block; padding:0 0 20px;}
.town_name h2 b{ display: block; font-size: 18px;}
.town_name dl{ display: flex; width: 100%; margin-bottom: 10px; padding-bottom: 10px; border-bottom: solid 1px #ddd;}
.town_name dl dt{ width: 120px; display: block; font-size: 13px; letter-spacing: 0; font-weight: bold; margin-top: 4px;}
.town_name dl dt a{ display: inline-block; font-size: 13px; letter-spacing: 0; font-weight: bold;}
.town_name dl dd{ flex: 1; display: flex; flex-wrap: wrap;}
.town_name dl dd a{ display: block; font-size: 13px; margin: 6px 10px; font-weight: 500;}
.town_name dl dd a:hover{ background: #e5e5e5; text-decoration: underline;}
/**/
.area-links{ width: 100%; display: flex; flex-direction: column; border: solid 6px #ddd; border-radius: 4px; margin: 50px 0; background: #DFEBE6; padding: 15px; }
.area-links h2{ width: 100%; display: block; margin-bottom: 5px;}
.area-links h2 b{}
.area-links .linkBox { width: 100%; display: flex; justify-content: space-between;}
/**/
.area-links .linkBox .box_row{ width: 70%; display: flex; justify-content: space-between;}
.area-links .linkBox .box_row p{ width: 48%; display: flex; flex-direction: column;}
.area-links .linkBox .box_row p a{ width: 100%; height: 100%; padding: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: solid 4px #008342; border-radius: 4px; background: #fff;}
.area-links .linkBox .box_row p a b{ font-size: 12px; color:#008342; }
.area-links .linkBox .box_row p a span{ font-size: 20px; color:#008342; font-weight: bold;}
.area-links .linkBox .box_row p a:hover{ background: #008342;}
.area-links .linkBox .box_row p a:hover b, 
.area-links .linkBox .box_row p a:hover span{ color:#fff;}
/**/
.area-links .linkBox .box_column{ width: calc(30% - 25px); display: flex; flex-direction: column; padding-left: 15px;}
.area-links .linkBox .box_column h3{ width: 100%; font-size: 12px;}
.area-links .linkBox .box_column p{ width: 100%; display: block; margin-bottom: 6px;}
.area-links .linkBox .box_column p a{ width: 100%; display: flex; flex-direction: column; padding: 6px 8px 2px; border: solid 1px #008342; color:#008342; background: #fff;}
.area-links .linkBox .box_column p a span{ font-size: 11px; line-height: 1.1em;}
.area-links .linkBox .box_column p a b{ font-size: 13px;}
.area-links #lastSearchCond{ border-radius: 0; border: dashed 1px #999;}
.area-links .linkBox .box_column p a:hover{ background: #008342; border: solid 1px #008342;}
.area-links .linkBox .box_column p a:hover b, 
.area-links .linkBox .box_column p a:hover span{ color:#fff;}





/*-----------------
#nowSearch
------------------*/
.areaList{ width: 100%; display: flex; flex-direction: column; padding:10px 15px; background:#fff; border: solid 1px #777; margin-top: 10px;}
.areaList.noborder{ border: none; border-top: dashed 1px #999;}
.areaList.noborder.border-radius{border-radius:0 0 8px 8px;}
.areaList dl{ width: 100%; display: flex; align-items: center;}
.areaList dl dt{ width: 150px; font-size: 12px; font-weight: bold;}
.areaList dl dt span{ width: auto; display: inline-block; font-size: 10px; letter-spacing: 0; font-weight: 400; padding-top: 3px; margin-top: 3px; border-top: solid 1px #555;}
.areaList dl dd{ width: 100%; flex: 1; display: flex; flex-wrap: wrap; font-size: 13px; position: relative;}
.areaList dl dd > a, 
.areaList dl dd > strong { width: 16.667%; font-size: 12px; display: flex; line-height: 1em; margin: 3px 0;}
.areaList dl dd > a{ text-decoration: underline;}
.areaList dl dd > a:hover{ text-decoration: none; color: #4885D8;}
.areaList dl dd strong{ color: #666;}