/* CSS Document */
img {
  width: 100%;
  height: auto;
}

.box_left {
  width: 24%;
}

.txt-center {
  text-align: center;
}

.padd_wrap {
  padding: 0 5%;
}

.h_btn {
  background: #1d2213;
  padding: 5% 0 7%;
}

.h_btn ul {
  display: flex;
  justify-content: space-around;
  padding-top: 3%;
}

.h_btn ul li {
  width: 47%;
}

#sec01 .set1 {
  padding-top: 10%;
  padding-bottom: 10%;
}

#sec01 .set1 .box {
  width: 95%;
  position: relative;
  margin: 0 auto;
  padding: 8% 0;
}

#sec01 .set1 .box:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid #fff;
}

#sec01 .set1 .box:after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  border: 1px solid #fff;
}

#sec01 .set1 .box dl dt {
  font-size: 19px;
  padding: 0 3%;
}

#sec01 .set1 .box dl dd {
  padding: 3% 3%;
}

#sec01 .set1 ul {
  padding: 8% 5% 8% 10%;
  border-bottom: 1px solid #fff;
  width: 96%;
  margin: 0 auto;
}

#sec01 .set1 ul li {
  position: relative;
  padding-left: 5%;
}

#sec01 .set1 ul li:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background: #fff;
}

#sec01 .set1 .txt {
  padding-top: 8%;
}

#sec01 .set2 {
  padding-bottom: 10%;
}

#sec01 .set2 dl {
  margin-top: -8%;
  position: relative;
  z-index: 1;
}

#sec01 .set2 dl dt {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 8%;
}

#sec01 .set2 dl dd {
  padding-bottom: 10%;
}

#sec01 .set2 .slider2 .slick-list {
  width: 100%;
}

#sec01 .set2 .slider2 .slick-slide {
  margin: 0 15px;
}

#sec01 .set2 .slider2 .slick-prev {
  left: 5%;
  z-index: 2;
  background: url("../img/hanare/arr_prev.png") no-repeat center/100%;
  width: 10vw;
  height: 10vw;
  background-size: 50%;
}

#sec01 .set2 .slider2 .slick-prev:before {
  content: "";
}

#sec01 .set2 .slider2 .slick-next {
  right: 0;
  z-index: 2;
  right: 5%;
  z-index: 2;
  background: url("../img/hanare/arr_next.png") no-repeat center/100%;
  width: 10vw;
  height: 10vw;
  background-size: 50%;
}

#sec01 .set2 .slider2 .slick-next:before {
  content: "";
}

#sec02 {
  padding-bottom: 5%;
}

#sec02 .set1 {
  padding-top: 15%;
  padding-bottom: 15%;
}

#sec02 .set1 dl dt {
  width: 90%;
  margin: 0 auto;
}

#sec02 .set1 dl dd {
  padding-top: 8%;
}

#sec02 .set1 .btn {
  width: 90%;
  margin: 0 auto;
  padding-top: 8%;
}

#sec02 .set2 {
  padding-bottom: 15%;
}

#sec02 .set2 dl dt {
  width: 90%;
  margin: 0 auto;
}

#sec02 .set2 dl dd {
  padding-top: 8%;
}

#sec02 .set3 {
  padding-bottom: 10%;
}

#sec02 .set3 dl dt {
  width: 90%;
  margin: 0 auto;
}

#sec02 .set3 dl dd {
  padding-top: 8%;
}

#sec02 .set3 .btn {
  width: 90%;
  margin: 0 auto;
  padding-top: 8%;
}

#sec03 {
  background: #0d0f08;
  padding-bottom: 15%;
  overflow: hidden;
}

#sec03 .slider3 {
  width: 90%;
  padding-left: 5%;
  padding-top: 5%;
}

#sec03 .slider3 .slick-dots {
  left: 101%;
  bottom: 0;
}

#sec03 .slider3 .slick-dots li {
  width: 4px;
  height: 39px;
  background: #817f7f;
  display: block;
  margin-bottom: 10px;
}

#sec03 .slider3 .slick-dots li.slick-active {
  background: #fff;
}

#sec03 .img {
  margin-top: -37%;
}

#sec03 .floormap {
  width: 90%;
  margin: -6% auto 0;
}

#sec03 .txt {
  padding-top: 8%;
}

#sec04 {
  background: #0a0a0a;
  padding-top: 10%;
}

#sec04 h2 {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 8%;
}

#sec04 .note {
  padding: 6% 0;
}

#sec04 .set1 {
  padding-top: 8%;
  padding-bottom: 10%;
}

#sec04 .set1 dl {
  padding-bottom: 5%;
}

#sec04 .set1 dl dt {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 5%;
}

#sec04 .set1 .slider3 .slick-dots li {
  width: 39px;
  height: 4px;
  background: #817f7f;
  margin-bottom: 10px;
  margin: 0 8px;
}

#sec04 .set1 .slider3 .slick-dots li.slick-active {
  background: #fff;
}

#sec04 .set1 .box {
  position: relative;
  width: 90%;
  margin: 6% auto 0
}

#sec04 .set1 .box:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid #fff;
}

#sec04 .set1 .box:after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  border: 1px solid #fff;
}

#sec04 .set1 .box dl {
  padding: 0 8%;
  position: relative;
  padding: 18% 5% 10%;
}

#sec04 .set1 .box dl dt {
  width: 70%;
  margin: 0 auto;
  position: absolute;
  top: -4%;
  left: 0;
  right: 0;
  z-index: 1;
}

#sec04 .set2 {
  padding-top: 10%;
  padding-bottom: 15%;
  background: #000;
}

#sec04 .set2 .info {
  padding-top: 8%;
}

#sec04 .set2 .info dt {
  padding-bottom: 5%;
}

#sec04 .set2 .box {
  width: 90%;
  margin: 15% auto 0;
  position: relative;
  background: url("../img/hanare/s4_bg_box.jpg") repeat;
  padding: 8% 0;
}

#sec04 .set2 .box:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid #fff;
}

#sec04 .set2 .box dl dt {
  width: 80%;
  margin: 0 auto;
}

#sec04 .set2 .box dl dd {
  padding-top: 10%;
}

#sec04 .set3 {
  background: #000;
  padding-bottom: 15%;
}

#sec04 .set3 h3 {
  width: 70%;
  margin: 0 auto;
}

#sec04 .set3 .txt {
  padding-top: 5%;
  padding-bottom: 10%;
}

/*
#sec04 .set3 .box {
  text-align: center;
  position: relative;
  padding: 25% 0 10%;
}

#sec04 .set3 .box .ico {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
}

#sec04 .set3 .box dl {
  font-size: 23px;
  padding-bottom: 5%;
}

#sec04 .set3 .box dl dt {
  line-height: 40px;
  position: relative;
}

#sec04 .set3 .box dl dt:before {
  content: "";
  display: inline-block;
  background: url("../img/hanare/s4_icon.png") no-repeat center;
  width: 40px;
  height: 39px;
  margin-top: 3px;
  padding-right: 10px;
}

#sec04 .set3 .box.box1 {
  background: #2f2e27;
}

#sec04 .set3 .box.box2 {
  background: url("../img/hanare/s4_bg_yellow.jpg") repeat;
}
*/

/*《NEW》tab切り替え start*/

.tab_container {
  margin: 0 auto;
}

.tab_item {
  width: calc(100%/2);
  background-color: #000;
  text-align: center;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}

.tab_item:hover {
  opacity: 0.75;
}

input[name="tab_item"] {
  display: none;
}

.tab_content {
  display: none;
  padding: 1em 1em 0;
  clear: both;
  overflow: hidden;
}

#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content {
  display: block;
}

.tab_container input:checked + .tab_item {
  background-color: #000 ;
  /*  color: #fff;*/
}

#tab1_content {
  background: #2f2e27;
  padding-bottom: 1em;
}

#tab1_content .txt_box1 {
  text-align: center;
  position: relative;
  padding: 5% 0 5%;
}

#tab1_content .txt_box1 dl {
  font-size: 23px;
  padding-bottom: 5%;
}

#tab1_content .txt_box1 dl dt:before {
  content: "";
  display: inline-block;
  background: url("../img/hanare/s4_icon.png") no-repeat center;
  width: 40px;
  height: 39px;
  margin-top: 3px;
  padding-right: 10px;
}


#tab2_content {
  background: url(../img/hanare/s4_bg_yellow.jpg) repeat;
  padding-bottom: 1em;
}

#tab2_content .txt_box2 {
  text-align: center;
  position: relative;
  padding: 5% 0 5%;
}

#tab2_content .txt_box2 dl {
  font-size: 23px;
  padding-bottom: 5%;
}

#tab2_content .txt_box2 dl dt:before {
  content: "";
  display: inline-block;
  background: url("../img/hanare/s4_icon.png") no-repeat center;
  width: 40px;
  height: 39px;
  margin-top: 3px;
  padding-right: 10px;
}


/*《NEW》tab切り替え end*/

#sec04 .set3 .btn {
  width: 90%;
  margin: 0 auto;
  padding-top: 10%;
}

#sec05 {
  padding-bottom: 15%;
}

#sec05 h2 {
  padding-top: 8%;
  width: 60%;
  margin: 0 auto;
}

#sec05 .info {
  width: 90%;
  margin: 0 auto;
  padding-top: 8%;
  padding-bottom: 15%;
}

#sec05 .info dl {
  display: table;
  padding: 3% 0;
  border-bottom: 1px solid #fff;
  width: 100%;
}

#sec05 .info dl dt,
#sec05 .info dl dd {
  display: table-cell;
}

#sec05 .info dl dt {
  width: 100px;
}

#sec05 .btn {
  padding-top: 8%;
  width: 90%;
  margin: 0 auto;
}