@charset "utf-8";
@import url("jquery-ui.css");
.main {    padding-bottom: 0px;}
.btn{}
.btn a{border-radius:6px; width:120px; height: 50px; display: block; line-height: 50px; font-size: 16px; text-align: center; background: #fff;}
h3{ line-height: 100%;}

/*box02*/
.colorsty1 { color: #007d7d;}
.colorsty2 {  color: #5024b3;}
.colorsty3 {  color: #e1a20c;}
.colorsty4 {  color: #2e8de5;}
.colorsty5 {  color: #b94bd1;}
.colorsty6 {  color: #6156f0;}
.colorsty7 {  color: #89afe3;}
.colorsty8 {  color: #86e0bf;}
.colorsty9 {  color: #40d1de;}
.colorsty10 {  color: #848484;}
.colorsty11 {  color: #e17400;}
.colorsty12 {  color: #be3100;}
.colorsty13 {  color: #8cadc6;}
.colorsty14 {  color: #cb4a5f;}
.colorsty15 {  color: #f891ac;}/*新聞*/
.news_list li:nth-of-type(odd){ background: none;}
.box02 .news_list {  margin-bottom: 10px;}
.box02 .news_list li {  display: flex;  align-content: center;  justify-content: space-between;  cursor: pointer;  padding: 10px 0; transition: all .3s;}
.box02 .news_list li:hover{ background: #f3f5f6;}
.box02 .news_list li p {  position: relative;  color: #333333;  padding-left: 0;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
.box02 .news_list p span {position: static; margin: 0 15px 0 0; transform: translateY(0%);}

.box02{position: relative;  width:1220px; margin: 0 auto; padding: 60px 0 0 60px; height: 850px;background: url("../images/bg_ind_dot02.png")  bottom 100px right 50px no-repeat;}
.box02.room{padding: 60px 0 0 60px;}
.box02 .bulletin{ position: relative; width:630px; height:375px; display: block; margin:0 0 40px ; padding: 80px 30px 0;background: #fff; box-shadow: 0 0 35px rgba(0,0,0,.2);}
.box02 .bulletin h3{ position: absolute; top:-30px;left: -60px; width:170px; height:100px; display: flex;  justify-content: center; align-items: center; font-size: 20px; background: #007d7d; color:#fff;}
.box02 .bulletin .btnSet{display: flex; justify-content: flex-end;}
.box02 .bulletin .btnSet a{width:120px; height:50px; line-height: 50px; text-align: center; display: block; margin:0 0 0 ; padding: 0 0; color:#007d7d; background: #fff; border:1px solid #007d7d; transition: all .3s;}
.box02 .bulletin .btnSet a:hover{color:#fff; background: #007d7d; border:1px solid #007d7d; transition: all .3s;}

.box02 .newsBox{ position: relative; width:600px; height:340px; display: block;  padding: 30px 30px 0; margin: 0 0 0 310px; background: #fff; border:10px solid #83aac4;}
.box02 .newsBox h3{ font-size: 20px; margin: 0 0 10px;}
.box02 .newsBox .btnSet{display: flex; justify-content: flex-end;}
.box02 .newsBox .btnSet a{ position: absolute; bottom: -30px; width:120px; height:50px; line-height: 50px; text-align: center; display: block; margin:0 0 0 ; padding: 0 0; color:#fff; border:4px solid #83aac4;background: #83aac4; transition: all .3s;}
.box02 .newsBox .btnSet a:hover{color:#83aac4; background: #fff;  transition: all .3s;}

.box02 .cldBox { position: absolute; right:0; top:0; width:420px; height: 520px; display: block;}
.box02 .cldBox::before{ position: absolute; top:115px; left: 0;  content: ''; width:420px ; height: 405px; background: #fff;box-shadow: 0px 0px 30px rgba(0,0,0,.1);}
.box02 .cldBox .slcBox{ position: absolute; top: 130px; right: 20px; width:100px; height: 30px; display: block;}
.slcBox select{width:100%; height: 30px; padding-left: 10px; padding-right: 15px; color:#fff; background: #989898 url("../images/ico-slc.png") no-repeat scroll right 10px center; background-size:10px auto;  border: none; border-radius:0; }
.slcBox option{ background: #000; color: #fff;}
.box02 .cldBox .dotInfo{ position: absolute; bottom: 20px; left: 20px; font-size: 14px; display: flex; }
.box02 .cldBox .dotInfo li:first-child{margin: 0 20px 0 0;}
.box02 .cldBox .dotInfo li:first-child::before{ content:''; width:8px; height: 8px; display: inline-block; background: #ca335d; border-radius: 99em; margin: 0 4px 0 0;  }
.box02 .cldBox .dotInfo li:last-child::before{ content:''; width:8px; height: 8px; display: inline-block; background: #3075bb; border-radius: 99em; margin: 0 4px 0 0;}
/*活動_日曆_JS*/
.ui-datepicker{ width:100%; padding: 0; font-size: 16px;background: none; }
#datepicker{}
.ui-widget.ui-widget-content { border: none; }
.ui-datepicker .ui-widget-header { padding:  0;  margin: 0 0 70px; background: none; border: none;  height: 115px;}
.ui-datepicker table{position: relative;  background: #fff;  }
.ui-datepicker table tbody{ vertical-align: top;}
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next { top: 45px; width: 30px; height: 30px; border-radius: 15px; }
.ui-datepicker .ui-datepicker-prev { left: 0; background: url(../images/btn_ar.png) center no-repeat; background-size: 15px auto; transform: rotate(-180deg);}
.ui-datepicker .ui-datepicker-next { right: 0; background: url(../images/btn_ar.png) center no-repeat; background-size: 15px auto; }
.ui-datepicker .ui-state-default { width: 1.5em; margin: 0 auto; line-height: 1.5em; text-align: center; border-radius: 20px; }
.ui-datepicker .ui-datepicker-title {position: relative; height: 115px;   color: #333333;text-align: left; padding: 24px 0 0 150px; line-height: 1; }
.ui-datepicker .ui-datepicker-title::before{  content: attr(data-month);position: absolute; top:50%; left: 30px; margin: -36px 0; width: 80px; height: 72px;display: block; font-size: 64px; line-height: 70px; padding: 0 20px 0 0; border-right:6px solid #cfcfcf; text-align: right;}
.ui-datepicker-month, .ui-datepicker-year{  font-size: 36px; }
.ui-datepicker-month{ display: block;}
.ui-datepicker-calendar { color: #728193;}
.ui-datepicker-calendar thead{display: none;}
.ui-datepicker-calendar td {position: relative; height: 50px;  }
.ui-datepicker-calendar span.rd{ position: absolute; top:0; right: 8px; /*width: 10px; height: 10px;*/width: 8px; height: 8px; display: block; background: #ca335d; border-radius: 99em;}
.ui-datepicker-calendar span.bl{ position: absolute; top:0; right: 8px; /*width: 10px; height: 10px;*/width: 8px; height: 8px;display: block; background: #2d68b0; border-radius: 99em;}
.ui-widget-content .ui-state-highlight { font-weight: 700; color: #007d7d;  border: none; }
.ui-state-default.ui-state-active {color: #fff; background: #007d7d;  border: none; }

/*claRom*/
.box02 .clasRom { position: absolute; right:0; top:110px; width:420px; height: 400px; display: block;background: url("../images/img/img_420x400.jpg") center no-repeat; background-size: cover; box-shadow: 0 0 25px rgba(0,0,0,.2);}
.box02 .auction { position: absolute; right:0; top:110px; width:420px; height: 400px; display: block;background: url("../images/img/img_420x400-02.jpg") center no-repeat; background-size: cover; box-shadow: 0 0 25px rgba(0,0,0,.2);}
.box02 .prospect { position: absolute; right:0; top:170px; width:420px; height: 350px; padding: 30px; box-shadow: 0 0 25px rgba(0,0,0,.2); background: #fff; border:10px solid #a0d5d5;display: flex; flex-direction: column; justify-content: space-between;}
.box02 .prospect h3{ font-size: 20px; margin: 0 0 10px;}
.box02 .prospect .tSmall{color:#666666;}
.box02 .prospect table{ border-collapse: collapse;}
.box02 .prospect table th{ font-size:36px ; color:#75caca; border-bottom:6px solid #e2ebf0; padding: 0 0 10px; white-space: nowrap;}
.box02 .prospect table td{ font-size:24px ; color:#b1bdc3; font-weight: bold;padding:5px 0  0;word-break:break-all;}
.box02 .prospect table th:nth-child(1), .box02 .prospect table td:nth-child(1){text-align: left;}
.box02 .prospect table th:nth-child(2), .box02 .prospect table td:nth-child(2){text-align: center;}
.box02 .prospect table th:nth-child(3), .box02 .prospect table td:nth-child(3){text-align: right;}
.box02 .prospect .btnSet{position: absolute;display: flex; justify-content: flex-end; top:5px; right: 30px;}
.box02 .prospect .btnSet a{ position: absolute;top: -35px; width:120px; height:50px; line-height: 50px; text-align: center; display: block; margin:0 0 0 ; padding: 0 0; color:#fff; border:4px solid #a0d5d5;background: #a0d5d5; transition: all .3s;}
.box02 .prospect .btnSet a:hover{color:#a0d5d5; background: #fff;  transition: all .3s;}

@media screen and (max-width: 1220px){
    /*box02*/
    .box02{width:900px; margin: 0 auto; padding: 60px 0 0 30px; height: 800px;background:  url("../images/bg_ind_dot02.png")  bottom 120px right 50px no-repeat;}
    .box02.room{padding: 60px 0 0 30px;}
    .box02 .bulletin{  width:430px; height:345px; display: block; margin:0 0 30px ; padding: 50px 20px 0;}
    .box02 .bulletin h3{ top:-30px;left: -30px; width:120px; height:80px; }
    .box02 .newsBox{  width:400px; height:340px; padding: 30px 20px 0; margin: 0 0 0 130px;}
    .box02 .cldBox { right:0; top:10px; width:420px; height: 470px;}
    .box02 .cldBox::before{  width:420px ; height: 355px; }
    /*活動_日曆_JS*/
    .ui-datepicker-calendar td { height: 40px;  }
    /*claRom*/
    .box02 .clasRom, .box02 .auction {right:20px;  top:130px; width:380px; height: 362px;}
    .box02 .prospect{  width:380px; height:320px;  }
}

@media screen and (max-width: 900px){
  
    /*box02*/
    .box02{width:calc(100% - 20px); margin: 0 auto; padding: 60px 0  460px; height: auto;background:none  ;}
    .box02.room{padding: 60px 0  350px; }
    .box02 .bulletin{ position: static;width:100%; height:345px; display: block; margin:0 0 30px ; padding: 50px 20px 0;}
    .box02 .bulletin h3{ top:25px;left: 50%; margin: 0 -75px; width:150px; height:70px; font-size: 22px; }
    .box02 .bulletin .btnSet{ justify-content: center;}
    .box02 .bulletin .time{ display:none;}
    .box02 .newsBox{  position: static;width:100%;height:380px; padding: 30px 20px 0; margin: 0 ;}
    .box02 .newsBox h3{ font-size: 22px; text-align: center;}
    .box02 .newsBox .time{ display:none;}
    .box02 .newsBox .btnSet { justify-content: center;}
    .box02 .newsBox .btnSet a{ position: static; }
    .box02 .cldBox { top:825px;bottom: 0; right:50%; width:300px; height: 390px; margin: 0 -150px; }
    .box02 .cldBox::before{ top:60px; border: 0; width:100% ; height: 330px; }
    /*活動_日曆_JS*/
    .box02 .cldBox .slcBox{  top: 80px; right: 10px; }
    .box02 .cldBox .dotInfo{ position: absolute; bottom: 20px; left: 20px; font-size: 14px; display: flex; }
    .box02 .cldBox .dotInfo li:first-child{margin: 0 20px 0 0;}
    .box02 .cldBox .dotInfo li:first-child::before{ content:''; width:8px; height: 8px; display: inline-block; background: #ca335d; border-radius: 99em; margin: 0 4px 0 0;  }
    .box02 .cldBox .dotInfo li:last-child::before{ content:''; width:8px; height: 8px; display: inline-block; background: #3075bb; border-radius: 99em; margin: 0 4px 0 0;}
    /*活動_日曆_JS*/
    .ui-datepicker .ui-widget-header {  margin: 0 0 70px;  height: 60px;}
    .ui-datepicker .ui-datepicker-title {height: 60px; padding: 0 0 0 100px; }
    .ui-datepicker .ui-datepicker-title::before{  top:50%; left: 0; margin: -20px 0; width: 70px; height: 40px;display: block; font-size: 40px; line-height: 40px; padding: 0 10px 0 0; border-right:6px solid #cfcfcf; text-align: right;}
    
    .ui-datepicker .ui-datepicker-prev, 
    .ui-datepicker .ui-datepicker-next { top: 15px;}
    .ui-datepicker-month, .ui-datepicker-year{  font-size: 24px; }
    .ui-datepicker-calendar td {position: relative; height: 36px;  }
    
    /*claRom*/
    .box02 .clasRom, .box02 .auction{top:850px;bottom: 0; right:50%; width:300px; height: 280px; margin: 0 -150px; }
    .box02 .prospect{top:850px;bottom: 0; right:50%; width:300px; height: 360px; margin: 0 -150px; padding: 30px 20px;  }
    .box02 .prospect .btnSet, .box02 .prospect .btnSet a{ position: static; justify-content: center;}
    .box02 .prospect h3{ font-size: 22px; text-align: center;}
    .box02 .prospect p{ text-align: center;}
    .box02 .prospect table th{ font-size:30px ; border-bottom:4px solid #e2ebf0;}
    .box02 .prospect table td{ font-size:18px ; color:#b1bdc3; font-weight: bold;}
}

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