@charset "utf-8";

/* .sub #content {padding-bottom: 0 !important; width: 100% !important} */

/* #area {margin:100px 0 0;} */
#area h6{font-family:esamanru;line-height:50px;letter-spacing:-0.025em;text-align:center;margin-bottom:55px;font-size:48px;color:#241c1d}
#area .mapsWrap {position: relative; padding-left: 40%}
#area .mapsWrap .listWrap {position: absolute;top: 0;left: 0; width:40%; z-index: 79;background: #fff;border:solid #ddd;border-width:1px 0 1px 1px;box-sizing: border-box}
#area .mapsWrap .listWrap .search-bar {padding:30px 40px 25px 40px;background:#f7f7f7}
#area .mapsWrap .listWrap .search-bar fieldset {}
#area .mapsWrap .listWrap .search-bar fieldset dl {}
#area .mapsWrap .listWrap .search-bar fieldset dl > * {}
#area .mapsWrap .listWrap .search-bar fieldset dl dt {font-weight: 700; font-size: 35px; line-height: 45px; color: #333; letter-spacing: -0.5px}
#area .mapsWrap .listWrap .search-bar fieldset dl dd {margin-top: 15px; border: 4px solid #ff9116; border-radius: 33px; padding: 0 25px; box-sizing: border-box}
#area .mapsWrap .listWrap .search-bar fieldset dl dd:after {content: ''; display: block; clear: both}
#area .mapsWrap .listWrap .search-bar fieldset dl dd > * {float: left; line-height: 55px; border: 0}
#area .mapsWrap .listWrap .search-bar fieldset dl dd input[type=text] {width: calc(100% - 55px); font-size: 18px; letter-spacing: -1px; color: #666; padding: 0 10px; box-sizing: border-box}
#area .mapsWrap .listWrap .search-bar fieldset dl dd input[type=text]::placeholder {color: #999999}
#area .mapsWrap .listWrap .search-bar fieldset dl dd input[type=submit] {width: 55px; background: url('../basic/images/sContr04-icon01.png') no-repeat right center; text-indent: -999em}
#area .mapsWrap .listWrap .total{display:block;font-family:noto;font-weight:bold;line-height:50px;letter-spacing:-0.01em;border-bottom:3px solid #aaa;font-size:24px;color:#484242}
#area .mapsWrap .listWrap .total span{display:inherit;font-family:inherit;font-weight:500;line-height:20px;letter-spacing:-0.05em;margin-bottom:10px;font-size:14px;color:inherit}
#area .mapsWrap .listWrap .txt {position:relative;height:499px;max-height:499px;overflow-y:auto;border:solid #fff;border-width:0 36px 30px 40px;box-sizing:border-box}
#area .mapsWrap .listWrap .txt::-webkit-scrollbar{width:4px}
#area .mapsWrap .listWrap .txt::-webkit-scrollbar-thumb{background:#000}
#area .mapsWrap .listWrap .txt::-webkit-scrollbar-track{background:#eee}
#area .mapsWrap .listWrap .txt .box {display: block; padding: 30px 0;border-bottom: 1px solid #ddd; text-decoration: none;}
#area .mapsWrap .listWrap .txt .box:hover{background:#f5f5f5}
#area .mapsWrap .listWrap .txt .box:first-child{}
#area .mapsWrap .listWrap .txt .box strong,
#area .mapsWrap .listWrap .txt .box span{display:block;font-family:esamanru;letter-spacing:-0.025em}
#area .mapsWrap .listWrap .txt .box strong{font-weight:bold;line-height:30px;font-size:26px;color:#241c1d}
#area .mapsWrap .listWrap .txt .box span{}
#area .mapsWrap .listWrap .txt .box span.tel{font-weight: 600; font-size: 20px; line-height: 24px; color: #ab1800;}
#area .mapsWrap .listWrap .txt .box span.add{font-family:noto;font-weight:normal;line-height:28px;margin:10px 0;font-size:16px;color:#888}
#area .mapsWrap .area{width: 100%;height:680px;background:#f3f3f3;border:1px solid #ddd;box-sizing:border-box}
#area .mapsWrap .info{position:relative;z-index:100;}
#area .mapsWrap .info .close{position:absolute;top:0;right:0}
#area .mapsWrap .layer{background:#fff; padding:25px 30px; font-size:14px; width:450px; border:1px solid #ddd; word-break:break-all; border-radius:3px; position:absolute; left:50%; bottom:100%; margin-bottom:20px; margin-left:-225px; display:none; box-sizing: border-box; box-shadow:-1px 2px 10px 4px rgba(0, 0, 0, 0.05)}
#area .mapsWrap .layer dt{margin-bottom: 5px}
#area .mapsWrap .layer dt a{font-weight: 700; font-size: 25px; line-height: 30px; color: #333; letter-spacing: -1px; text-decoration: none}
#area .mapsWrap .layer dt em{font-style: normal;}
#area .mapsWrap .layer dd{padding-left: 30px; font-weight: 700; font-size: 17px; line-height: 24px; color: #ff9116; letter-spacing: -0.5px; background: url('../basic/images/str_tel_ico.png') no-repeat left center}
#area .mapsWrap .layer .info {padding-top: 20px; margin-top: 20px; border-top: 1px solid #ddd}
#area .mapsWrap .layer .info p {margin-bottom: 10px; font-size: 18px; line-height: 25px; color: #333; letter-spacing: -0.5px; white-space: initial}
#area .mapsWrap .layer .info span {display: block; font-size: 14px; line-height: 22px; color: #888; letter-spacing: -1px}
#area .mapsWrap .layer .close {position:absolute;right:0;top:0;display:block;cursor:pointer;}
#area .mapsWrap .marker {display:block; width:71px; height:98px; background:url('../basic/images/map-marker.png') no-repeat center; text-indent:-9999px; position:relative; margin:0 auto; cursor:pointer;}
#area .mapsWrap .info.active {z-index:200;}
#area .mapsWrap .info.active .layer {display:block;}
#area .mapsWrap .layer .close{position:absolute;top:0;right:0;}
#area .mapsWrap .layer h3{font-family:Noto Sans;line-height:22px;letter-spacing:-0.05em;margin-bottom:15px;font-size:25px;color:#484242}
#area .mapsWrap .layer .tel{font-family:Noto Sans;font-weight:bold;line-height:22px;letter-spacing:-0.01em;padding-left:30px;background:url('/images/sub/sContr04-icon03.png') no-repeat left center;font-size:17px;color:#ff9116}
#area .mapsWrap .layer .addr{padding-top:20px;margin-top:20px;border-top:1px solid #ddd}
#area .mapsWrap .layer .addr .makers{font-family:Noto Sans;font-weight:300;line-height:28px;letter-spacing:-0.05em;margin-bottom:10px;font-size:18px;color:#333;display:-webkit-box;min-height:56px;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;white-space:initial;padding-left:25px;background:url('/images/sub/map-marker.png') no-repeat left 2px top 5px}
#area .mapsWrap .layer .addr > span{display:block;font-family:Noto Sans;font-weight:300;letter-spacing:-0.05em;padding-left:25px;font-size:14px;color:#888}
#area .mapsWrap .layer .addr > span.time{background:url('/images/sub/map-time.png') no-repeat left top}
#area .mapsWrap .layer .viewBtn{display:block;background:#ff9116;text-align:center;text-decoration:none;margin-top:30px}
#area .mapsWrap .layer .viewBtn span{display:inline-block;line-height:44px;font-family:Noto Sans;letter-spacing:-0.05em;padding-right:20px;background:url('/images/sub/plus.png') no-repeat right center;font-size:15px;color:#fff}

#area .mapsWrap .search-bar ul{display:flex;flex-flow:row wrap;align-items:center;margin:0 -10px}
#area .mapsWrap .search-bar ul li{position:relative;width:100%;margin:5px;background:#fff;border:1px solid #aeaeae;border-radius:10px;box-sizing:border-box}
#area .mapsWrap .search-bar ul li.w50{width:calc(100% / 2 - 10px)}
#area .mapsWrap .search-bar ul li .sel,
#area .mapsWrap .search-bar ul li .inp{width:100%;border:none;background:transparent;line-height:50px;box-sizing:border-box}
#area .mapsWrap .search-bar ul li .sel{height:50px;-o-appearance:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 20px;background:url('/images/sub/sContr02-arrow.png') no-repeat right 15px center}
#area .mapsWrap .search-bar ul li .inp{padding:0 40px 0 20px}
#area .mapsWrap .search-bar ul li .subBtn{position:absolute;width:16px;height:16px;top:50%;right:20px;transform:translateY(-50%);background:url('/images/sub/map-icon.png') no-repeat center;border:none}

@media screen and (max-width: 1300px){

    #area{margin:0}
    #area .mapsWrap {padding-right: 0}
    #area .mapsWrap .area {height: 600px}
    #area .mapsWrap .marker {width: 30px; height: 40px; background-size: contain}
    #area .mapsWrap .layer {padding: 15px 20px; width: 360px; margin-bottom: 10px; margin-left: -180px}
    #area .mapsWrap .layer h3{margin-bottom:10px;font-size:20px}
    #area .mapsWrap .layer dt a {font-size: 18px; line-height: 26px}
    #area .mapsWrap .layer dd {padding-left: 20px; background-size: 14px !important; font-size: 15px; line-height: 22px}
    #area .mapsWrap .layer h4 a{line-height:24px;font-size:20px}
    #area .mapsWrap .layer .info {padding-top: 10px; margin-top: 10px}
    #area .mapsWrap .layer .info p {margin-bottom: 5px; font-size: 15px; line-height: 22px}
    #area .mapsWrap .layer .addr{padding-top:10px;margin-top:10px}
    #area .mapsWrap .layer .addr p {min-height:44px;margin-bottom: 5px; font-size: 15px; line-height: 22px}
    #area .mapsWrap .layer .addr .makers{line-height:24px;font-size:16px}
    #area .mapsWrap .layer .info span {font-size: 13px; line-height: 18px}
    #area .mapsWrap .layer .close img {width: 35px}
    #area .mapsWrap .layer .viewBtn{margin-top:15px}
    #area .mapsWrap .layer .viewBtn span{line-height:30px;font-size:14px}

    #area .mapsWrap .listWrap {position: static; width: 100%; padding: 40px; padding-bottom: 50px}
    #area .mapsWrap .listWrap .search-bar {padding-top: 0; margin-bottom: 25px}
    #area .mapsWrap .listWrap .search-bar fieldset dl dt {font-size: 26px; line-height: 34px}
    #area .mapsWrap .listWrap .search-bar fieldset dl dd {margin-top: 10px; border-width: 3px; padding: 0 20px}
    #area .mapsWrap .listWrap .search-bar fieldset dl dd > * {line-height: 45px}
    #area .mapsWrap .listWrap .search-bar fieldset dl dd input[type=text] {font-size: 16px; padding: 0 5px; border-radius: 20px}
    #area .mapsWrap .listWrap .search-bar fieldset dl dd input[type=submit] {background-size: 28px}
    #area .mapsWrap .listWrap .total {font-size: 14px; line-height: 20px;padding-bottom:10px}
    #area .mapsWrap .listWrap .total span{margin:10px 0 0}
    #area .mapsWrap .listWrap .txt {border-width: 0 20px 20px;}
    #area .mapsWrap .listWrap .txt::-webkit-scrollbar{display:block !important;width:5px !important}
    #area .mapsWrap .listWrap .txt::-webkit-scrollbar-thumb{background:#a9a9a9 !important}
    #area .mapsWrap .listWrap .txt .box {padding: 15px 0; padding-left: 60px; background-size: 40px; background-position: left 20px}

    #area .mapsWrap .listWrap .search-bar fieldset dl dt{line-height:30px;font-size:20px}
    #area .mapsWrap .listWrap .txt{max-height:340px}
    #area .mapsWrap .listWrap .txt .box{padding-left:30px}
    #area .mapsWrap .listWrap .txt .box strong {font-size: 17px; line-height: 26px}
    #area .mapsWrap .listWrap .txt .box span.tel {padding-left: 20px; font-size: 14px; line-height: 22px; background-size: 15px}
    #area .mapsWrap .listWrap .txt .box span.add {font-size: 14px; line-height: 24px}




    #area h6{margin:30px 0 40px;font-size:30px}
    #area .mapsWrap{padding-left:0}
    #area .mapsWrap .area{height:300px !important}
    #area .mapsWrap .listWrap{padding:0 0 40px 0;border-width:0 1px 1px 1px}
    #area .mapsWrap .listWrap .search-bar{padding:30px}

}

@media screen and (max-width: 750px){
    .sub #content {box-sizing: border-box}
    #area h6{margin:20px 0}
    #area .mapsWrap .area {height: 450px}
    #area .mapsWrap .layer {width: 300px; margin-left: -150px; padding: 15px}
    #area .mapsWrap .layer dt a {font-size: 16px; line-height: 24px}
    #area .mapsWrap .layer dd {font-size: 14px; line-height: 20px}
    #area .mapsWrap .layer .info p {font-size: 14px; line-height: 20px}
    #area .mapsWrap .layer .info span {font-size: 12px}

    #area .mapsWrap .listWrap {padding:0 0 30px 0}
    #area .mapsWrap .listWrap .search-bar fieldset dl dt {font-size: 22px; line-height: 30px}
    #area .mapsWrap .listWrap .search-bar fieldset dl dd {padding: 0 10px}
    #area .mapsWrap .listWrap .search-bar fieldset dl dd > * {line-height: 40px}
    #area .mapsWrap .listWrap .search-bar fieldset dl dd input[type=text] {width: calc(100% - 40px); font-size: 14px}
    #area .mapsWrap .listWrap .search-bar fieldset dl dd input[type=submit] {width: 40px; background-size: 20px}
    #area .mapsWrap .listWrap .txt .box {padding-left: 20px; background-size: 28px; background-position: left 18px}
    #area .mapsWrap .listWrap .txt .box strong {font-size: 16px; line-height: 24px}
    #area .mapsWrap .listWrap .txt .box span.tel {margin: 2px 0}
    #area .mapsWrap .listWrap .txt .box span.add {font-size: 13px; line-height: 22px}

    #area .mapsWrap .layer{padding:10px}
    #area .mapsWrap .layer h3{margin-bottom:5px}
    #area .mapsWrap .layer .addr{padding-top:5px;margin-top:5px}
    #area .mapsWrap .layer .addr p{margin-bottom:0}
}