@charset "utf-8";

/*//////////////////////  PC  //////////////////////*/


/* =======================================

 Style for PC

======================================= */

@media print, screen and (min-width: 751px) {

div#hd {
 width: 100%;
 background: #fff;
}
header {
 width: 850px;
 height: 56px;
 margin: 0 auto;
}
header #arealogo {
 padding-top: 10px;
 float: left;
}
header #hdlogo {
 float: right;
 padding-top: 19px;
}
header #hdlogo img {
 width: 150px;
 height: auto;
}

h1 {
 background: url(../images/tit_harima_bg.png) repeat-y top right -3px #00499c;
 background-size: 50% auto;
 width: 297px;
 padding: 19px 0;
}
h1 img {
 width: 100%;
 height: auto;
}
#topmain h1 {
 position: absolute;
 right: -103px;
}
#list_hdmain  h1 {
 position: absolute;
 left: 22px;
 width: 250px;
 height: 280px;
 padding: 15px 0;
}

h2 {
 color: #fff;
 font-size: 2.8em;
 letter-spacing: 8px;
 text-align: center;
 border-bottom: solid 5px #fff;
 padding-bottom: 0;
 display: inline-block;
 margin-bottom: 10px;
 margin-left: -30px;
}


/*  */
#hdgroup {
 display: block;
 padding: 50px 0 70px ;
 text-align: center;
}
#list_hdwrap {
 width: 100%;
 min-width: 983px;
 background: #00499c;
 height: 300px;
}
#list_hdmain {
 width: 983px;
 margin: 0 auto;
 position: relative;
}
#lsit_harima_map {
 position: absolute;
 top: 0;
 right: -20px;
 width: 217px;
 height: 300px;
 background: url(../images/map_harima_s.png) no-repeat 0 -23px;
 background-size: 100% auto;
 z-index: 200;
}
#list_hdwrap .kounokun {
 position: absolute;
 top: 60px;
 right: 200px;
 z-index: 200;
 width: 130px;
 height: auto;
}
#list_hdwrap .kounokun-2 {
 position: absolute;
 top: 185px;
 left: 266px;
 z-index: 200;
 width: 102px;
 height: auto;
}
#list_hdwrap  .backto {
 position: absolute;
 top: 210px;
 background: url(../images/arw_s.png) no-repeat right center;
}
#list_hdwrap  .backto a {
 color: #000;
 font-size: 0.72em;
 padding-right: 17px;
}
#list_hdwrap  .backto a:hover {
 text-decoration: underline;
}
#list_hdwrap  .backto a:after {
 content: url(../images/arw.png) no-repeat;
}
#list_hdmain p.txt {
 color: #fff;
 font-size: 1.05em;
 letter-spacing: 4px;
 margin-left: -30px;
}

.hm_wrapper {
 width: 983px;
 position: relative;
 z-index: 300;
 margin-right: auto;
 margin-left: auto;
}
.comlist {
 overflow: hidden;
 margin-top: 25px;
 margin-bottom: 35px;
}
.comlist li {
 width: 472px;
 float:left;
 margin-bottom: 22px;
}
.comlist > li:nth-child(2n) {
 float: right;
}
.comlist li a .tit {
 margin-bottom: 12px;
 letter-spacing: -0.03em;
}
.comlist li a .txt {
 margin-bottom: 0;
}
ul.dt li {
 margin-bottom: 0;
 font-size: 0.9em;
}
.comlist li .dt li.add {
 padding-right: 80px;
 padding-left: 80px;
 text-indent: -80px;
}
.comlist li .dt li.add:before {
 position: relative;
 left: -80px;
 text-indent: 0;
}

/*  */
#topmain {
 background: url(../images/top_main01.jpg) no-repeat center -130px;
 min-height: 644px;
 width: 50%;
 position: relative;
}

#harima_map {
 position: absolute;
 top: 30px;
 right: -540px;
 z-index: 100;
}
#img_tanada {
 position: absolute;
 background: url(../images/img_tanada.png) no-repeat 17px 19px;
 width: 152px;
 height: 157px;
 top: 35px;
 right: -574px;
 z-index: 100;
}
#img_tanada img {
 width: 100%;
 height: auto;
}
#img_bridge {
 position: absolute;
 top: 472px;
 right: -238px;
 z-index: 100;
}

#listbtn {
 background: url(../images/icn_list.png) no-repeat 24px center #000;
 background-size: 33px auto;
 width: 297px;
 height: 63px;
 position: absolute;
 top: 395px;
 right: -103px;
 z-index: 100;
}
#listbtn a {
 display: block;
 text-decoration: none;
 color: #fff;
 font-weight: 600;
 line-height: 63px;
 font-size: 1.1em;
 letter-spacing: 2px;
 padding-left: 74px;
}

.kounokun {
 position: absolute;
 top: 267px;
 right: 160px;
 z-index: 200;
}

#harimatop #c {
 font-size: 0.72em;
 position: absolute;
 top: 610px;
 right: -560px;
 z-index: 100;
}
#harimalist #c {
 clear: both;
 font-size: 0.72em;
 width: 200px;
 display: block;
 margin: 0 auto;
 padding: 10px 0 30px 0;
}

#pgtop {
 width: 50px;
 text-align: right;
 position: fixed;
 z-index: 100;
 bottom: 80px;
 left: 50%;
 margin-left: 515px;

}
#pgtop img {
 z-index: 100;
 width: 50px;
 height: auto;
}

#ft {
 position: absolute;
 top: 350px;
 width: 100%;
 min-height: 500px;
 background: url(../images/bg_wt.png) no-repeat center top;
 background-size: 100% auto;
}

#list_ft {
 position: absolute;
 top: 40px;
 width: 100%;
 min-height: 400px;
 background: url(../images/bg_wt_r.png) no-repeat center top;
 background-size: 100% auto;
 z-index: 100;
}

.mapbox {
 position: relative;
 z-index: 100;
 border: solid 10px #00499c;
 width: 983px;
 height: 600px;
 margin: 10px auto 50px auto;
 background: url(../images/am/bg_am.png) no-repeat left 5px bottom 5px;
}
.mapbox h3 {
 position: absolute;
 left: 65px;
 top: 55px;
}
.mapbox h3 span {
 display: none;
}
.amap {
 width: 564px;
 height: 537px;
 margin: 15px auto 0 auto;
}
.mapbox .img {
 position: absolute;
 right: 35px;
 bottom: 165px;
}
#hmlist h3 {
 background: #000;
 color: #fff;
 letter-spacing: 2px;
 font-size: 1.3em;
 padding: 5px 10px 5px 20px;
}
#hmlist h3 a {
 color: inherit;
 font-size: 0.6em;
 font-weight: normal;
 letter-spacing: 1px;
 float: right;
 padding-top: 3px;
}
#hmlist h3 a:after {
 content: url(../images/arw_up.png);
 position: relative;
 top: 4px;
 margin-left: 3px;
}
.spamnavi {
 display: none;
}
}


@media print, screen and (min-width: 751px) and (max-width: 1250px) {
#ft {
 position: absolute;
 top: 430px;
}
#list_ft {
 position: absolute;
 top: 130px;
}
}
@media print, screen and (min-width: 951px) and (max-width: 1100px) {
#list_ft {
 position: absolute;
 top: 100px;
}
}
@media print, screen and (min-width: 1101px) and (max-width: 1250px) {
#list_ft {
 position: absolute;
 top: 70px;
}
}
@media print, screen and (min-width: 1251px) and (max-width: 1400px) {
#ft {
 position: absolute;
 top: 380px;
}
#list_ft {
 position: absolute;
 top: 35px;
}
}
@media print, screen and (min-width: 1401px) and (max-width: 1500px) {
#list_ft {
 position: absolute;
 top: 10px;
}
}
@media print, screen and (min-width: 1401px) {
#ft {
 position: absolute;
 top: 300px;
}
}
@media print, screen and (min-width: 1501px) {
#list_ft {
 position: absolute;
 top: -25px;
}
}