@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*topimg
---------------------------------------------------------------------------*/
.topimg {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 400px;
  overflow:hidden;
}

@media screen and (max-width: 810px) {
.topimg {
  min-height: initial;
  height: 650px;
}
}

@media screen and (max-width: 568px) {
.topimg {
  height: 350px;
}
}

/*bx-slider
---------------------------------------------------------------------------*/
.bx-wrapper {
  height: 100%;
  min-height: 400px;
  width: 100%;
  margin: 0px auto;
  position: relative;
  z-index:0;
  overflow:hidden;
}

@media screen and (max-width: 810px) {
.bx-wrapper {
  min-height: initial;
  height: 650px;
}
}

@media screen and (max-width: 568px) {
.bx-wrapper {
  height: 350px;
}
}

.bx-wrapper #dot {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(000, 000, 000, 1), rgba(000, 000, 000, 0));
  opacity: 0.7;
}

#slider01 li{
  position: relative;
  height: 90vh;
  min-height: 400px;
}

@media screen and (max-width: 810px) {
#slider01 li{
  min-height: initial;
  height: 650px;
}
}

@media screen and (max-width: 568px) {
#slider01 li{
  height: 350px;
  text-align: center;
}
}

.bx-wrapper img {
  width: 100%;
  height:auto;
  min-height: 100%;
  display: block;
  position: relative;
  z-index:0;
}

@media screen and (max-width: 810px) {
.bx-wrapper img {
  width: auto;
  min-width: 100%;
  min-height: initial;
  height: 650px;
}
}

@media screen and (max-width: 568px) {
.bx-wrapper img {
  height: 350px;
}
}

#sl_row {
  width: 50%;
  height:auto;
  position: absolute;
  top: 0;
  left: 25%;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media screen and (max-width: 810px) {
#sl_row {
  width: 100%;
  left: 0;
  padding:0 10%;
  box-sizing: border-box;
}
}

.sld-text {
  color: #fff;
  position: relative;
  z-index: 1;
  width:100%;
  margin:0;
  padding-top:5%;
}

.sld-text .stx01{
  letter-spacing:.3em;
  font-weight:400;
  font-weight:300;
  text-transform: uppercase;
  font-size:1.6em;
  margin-bottom:15px;
  line-height:1.6;
}

@media screen and (max-width: 810px) {
.sld-text .stx01{
  font-size:2em;
  margin-bottom:10px;
  line-height:1.5;
  letter-spacing:.2em;
}
}

@media screen and (max-width: 568px) {
.sld-text .stx01{
  font-size:1.2em;
  line-height:1.4;
  margin-bottom:5px;
  letter-spacing:.15em;
}
}

.sld-text .stx02{
  margin-bottom:10px;
  letter-spacing:0em;
  letter-spacing:.02em;
  font-weight:400;
  line-height:2;
}

@media screen and (max-width: 568px) {
.sld-text .stx02{
  font-size:14px;
  display:none;
}
}

.stx-buttons{
  margin-top:15px;
  font-family: Roboto,sans-serif;
  letter-spacing:0.2em;
  text-transform: uppercase;
  font-size:12px;
  font-weight:400;
  line-height:1;
  display:inline-block;
}

@media screen and (max-width: 810px) {
.stx-buttons{
  text-align: center;
}
}

.stx-button{border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.stx-button.c-button--ghost{display:block;padding:15px 50px;border:1px solid #fff;color:#fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s}
.stx-buttons a{text-decoration:none;}
.stx-buttons a:hover{text-decoration:none;display:inline-table;background-color:#fff;color:#222;text-shadow:0 0 0 #FFF;}

@media screen and (max-width: 568px) {
.stx-button.c-button--ghost{
  padding:10px 40px;
}
}

/*THEME */

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url(../images/bx_loader.gif) center center no-repeat #fff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .9em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  z-index:50;
  position: absolute;
  bottom: 3%;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  *zoom: 1;
  *display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  text-indent: -9999px;
  display: block;
  width: 5px;
  height: 5px;
  margin: 0 8px;
  outline: 0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border:0.2em solid #FFF;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #FFF;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
  width:30px;
  height:30px;
  left: 20px;
  background: url(../images/top/arrowL_off.png) no-repeat;
  background-size:cover;
}

.bx-wrapper .bx-next {
  width:30px;
  height:30px;
  right: 20px;
  background: url(../images/top/arrowR_off.png) no-repeat;
  background-size:cover;
}

.bx-wrapper .bx-prev:hover {
  opacity: 0.7;
}

.bx-wrapper .bx-next:hover {
  opacity: 0.7;
  -webkit-transition: opacity 400ms;
  transition: opacity 400ms;
}


@media only screen and (max-width: 568px)  {
.bx-wrapper .bx-prev {
  left: 10px;
}
.bx-wrapper .bx-next {
  right: 10px;
}
}

.bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  outline: 0;
  width:30px;
  height:30px;
  text-indent: -9999px;
  z-index: 9999;
}

.bx-controls-direction a:hover {
  width:30px;
  height:30px;
  text-indent: -9999px;
  z-index: 9999;
}

/* top_contents
--------------------------------------- */
.top_contents{
  width: 100%;
  margin: 0 auto;
  padding:3% 0 2%;
  text-align: center;
}

.top_contents h2{
  font-weight:500;
  font-size:1.8em;
  font-family: 'Noto Serif JP', serif;
  color:#fff;
}

.top_contents .catch{
  padding:2%;
  color: #ACACAC;
  line-height:2;
  font-size:14px;
}

@media screen and (max-width: 810px) {
.top_contents{
  padding:5% 0 4%;
}

.top_contents h2{
  line-height:1.4;
  font-size:1.45em;
  padding:0 2% 2%;
}
.top_contents .catch{
  padding:2% 3% 0;
  line-height:1.8;
  text-align: left;
}
}

@media screen and (max-width: 568px) {
.top_contents h2{
  font-size:1.4em;
  padding:1% 4% 2%;
}
.top_contents .catch{
  padding:2% 5% 0;
}
}

.top_contents .tp-erea{
  width:100%;
  margin:2% 0 0;
  text-align: center;
}

.top_contents .tp-erea li{
  width:45%;
  margin:0 2.5%;
  display:inline-block;
  position: relative;
}

@media screen and (max-width: 810px) {
.top_contents .tp-erea li{
  width:47%;
  margin:0 1.5%;
}
}

@media screen and (max-width: 568px) {
.top_contents .tp-erea li{
  width:92%;
  margin:3% 4% 0;
}
}

.top_contents .tp-erea .tp-photo{
  width:100%;
  position: relative;
  display:block;
  overflow: hidden;
}

.top_contents li img {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform 500ms;
  transition: transform 500ms;
}
.top_contents li:hover img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}

.top_contents .tp-erea .tp-photo img{
  width:100%;
  height:auto;
}

.top_contents .tp-erea .tp-text{
  width:100%;
  padding:2% 4%;
  box-sizing: border-box;
  text-align: left;
  font-size:14px;
  color: #ACACAC;
}

@media screen and (max-width: 810px) {
.top_contents .tp-erea .tp-text{
  width:100%;
  padding:2% 2% 0;
}
}

.top_contents .tp-erea .tp-text h3{
  letter-spacing:.1em;
  font-weight:300;
  text-transform: uppercase;
  font-size:1.4em;
  margin-bottom:10px;
  color:#fff;
}

@media screen and (max-width: 810px) {
.top_contents .tp-erea .tp-text h3{
  font-size:1.3em;
  margin-bottom:5px;
}
}

.tp-bt {
  font-size: 13px;
  display:inline-block;
  letter-spacing: 0.2em;
  margin-top:3%;
  text-transform: uppercase;
}

.tp-bt a {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
}

.tp-bt a span {
  padding: 0 2px 5px;
  display: block;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.tp-bt a span::before {
  content: '';
  display: block;
  width: 100%;
  top: 0;
  bottom: 0;
  left: -100%;
  border-bottom: solid 1px #fff;
  position: absolute;
  transition: all .5s ease;
  z-index: -1;
}

.tp-bt a:hover span::before {
  left: 0;
}

.tp-bt a:hover span {
  color: #fff;
}

.cf:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;
  clear: both; 
  visibility:hidden;
}

.cf{
  display: inline-block;
} 
/* Hides from IE Mac */
* html .cf{
  height: 1%;
}

.cf{
  display:block;
}



.erea-syousai{
  width: 100%;
  text-align: center;
  margin-bottom:3%;
}

.erea-syousai ul{
  width: 100%;
  margin:2% auto 2%;
  max-width:970px;
}

.erea-syousai li{
  width: 48%;
  display: inline-block;
  vertical-align: middle;
  padding:2% 3%;
  box-sizing: border-box;
  margin:0 1%;
  position: relative;
  color:#FFF;
  background:#484848;
}

@media screen and (max-width: 810px) {
.erea-syousai li{
  width: 90%;
  display: block;
  padding:2% 3% 5%;
  margin:3% auto;
}
}

@media screen and (max-width: 568px) {
.erea-syousai li{
  width: 94%;
}
}

.erea-syousai li a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 100%;
  z-index:2;
  color:#FFF;
}

.erea-syousai li:hover{
  cursor:pointer;
  color:#FFF;
  background:#000;
  text-decoration:none;
  transition: all .5s ease;
}

.erea-syousai li .ere-ic{width:auto;height:100px;margin:2% auto 3%;}
.erea-syousai li .ere-ic img{width:auto;height:100%;}
.erea-syousai li .ere01{font-size:1.6em;font-weight:500;letter-spacing:.1em;text-transform: uppercase;}
.erea-syousai li .ere02{padding:3% 4%;margin-bottom:5px;}
.erea-syousai li .ere03{text-transform: uppercase;font-size:1.1em;font-weight:500;}

/* bk_contents
--------------------------------------- */
.bk_contents{
  width: 100%;
  margin: 0 auto;
  padding:2% 0;
  text-align: center;
}

#bg-gy{
  background:#F5F5F5;
}

/* .area_list
================================================== */
.area_list {
  width: 100%;
  padding:2% 0 3%;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.area_ttl{
  font-size:14px;
  line-height:2;  
  margin-bottom:2%;
}

.area_ttl span{
  font-size:2em;
  letter-spacing:.1em;
  text-transform: uppercase;
}

@media screen and (max-width: 810px) {
.area_ttl{
  text-align: center;
}

.area_ttl span{
  font-size:1.5em;
}
}

@media screen and (max-width: 568px) {
.area_ttl span{
  font-size:1.3em;
}
}

.wtxt{
  color:#FFF;
}

.area_list ul{
  width:100%;
  margin:0 auto;
}

.area_list li{
  display:inline-block;
  vertical-align:top;
  text-align: center;
  box-sizing: border-box;
}

.area_list .img-wrapper {
  width:100%;
  height:auto;
  max-height:356px;
  display:block;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 810px) {
.area_list .img-wrapper {
  max-height:200px;
}
}

@media screen and (max-width: 680px) {
.area_list .img-wrapper {
  max-height:170px;
}
}

@media screen and (max-width: 568px) {
.area_list .img-wrapper {
  max-height:150px;
}
}

@media screen and (max-width: 500px) {
.area_list .img-wrapper {
  max-height:130px;
}
}


@media screen and (max-width: 400px) {
.area_list .img-wrapper {
  max-height:110px;
}
}

.area_list .img-wrapper img {
  width:100%;
  height:auto;
  margin:auto;
}

.area_list .w30{
  width:33.3333%;
  padding:10px;
}

@media screen and (max-width: 810px) {
.area_list .w30{
  padding:1px;
}
}

@media screen and (max-width: 568px) {
.area_list .w30{
  width:50%;
}
}

.area_list .img-wrapperL {
  width:100%;
  height:auto;
  max-height:356px;
  display:block;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 810px) {
.area_list .img-wrapperL {
  max-height:200px;
}
}

@media screen and (max-width: 680px) {
.area_list .img-wrapperL {
  max-height:170px;
}
}

@media screen and (max-width: 568px) {
.area_list .img-wrapperL {
  max-height:210px;
}
}

@media screen and (max-width: 500px) {
.area_list .img-wrapperL {
  max-height:190px;
}
}

@media screen and (max-width: 400px) {
.area_list .img-wrapperL {
  max-height:170px;
}
}

.area_list .img-wrapperL img {
  width:100%;
  height:auto;
  margin:auto;
}

.area_list .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width:100%;
  height:100%;
  display:block;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
}

.area_list .overlay:hover {
  background: rgba(0, 0, 0, 0);
}

.area_list .overlay p{
  letter-spacing:0.05em;
  font-weight:300;
  line-height:1.6;
  color:#FFF;
  z-index: 2;
  position: relative;
  text-shadow:1px 1px 3px #000;
}

@media screen and (max-width: 810px) {
.area_list .overlay p{
  line-height:1.4;
  padding:0 5px;
}
}

@media screen and (max-width: 568px) {
.area_list .overlay p{
  letter-spacing:0.03em;
  text-shadow:1px 1px 1px #000;
}
}

.area_list .overlay strong{
  font-size:1.5em;
  letter-spacing:.05em;
  font-weight:400;
  text-transform: uppercase;
}

@media screen and (max-width: 810px) {
.area_list .overlay strong{
  font-size:1.4em;
  margin-right:0px;
}
}

@media screen and (max-width: 568px) {
.area_list .overlay strong{
  font-size:1.3em;
}
}

@media screen and (max-width: 400px) {
.area_list .overlay strong{
  font-size:1.2em;
}
}

.area_sy{
  width: 100%;
  height: 100%;
  position: relative;
}

.dabt{
  display:inline-block;
  vertical-align:top;
  text-align: center;
  width:50%;
  position: relative;
  font-family: 'Inter',sans-serif;
  font-weight:400;
  box-sizing: border-box;
  padding:10px;
}

#drt{
  background:#000;
  color:#FFF;
}

#dby{
  background:#7B7B7B;
  color:#FFF;
}

.dabt a.bklink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 100%;
  z-index: 2;
}

#drt:hover {
  opacity: 0.7;
  -webkit-transition: opacity 400ms;
  transition: opacity 400ms;
}

#dby:hover {
  opacity: 0.7;
  -webkit-transition: opacity 400ms;
  transition: opacity 400ms;
}

/* area-box
--------------------------------------- */
.area-top{
  width:100%;
  box-sizing: border-box;
  padding: 2% 4.1% 0;
  position: relative;
}

@media screen and (max-width: 1580px) {
.area-top{
  padding: 2% 2.1% 0;
}
}

.area-top_ttl{
  font-size:14px;
  line-height:2;  
}

.area-top_ttl span{
  font-size:2em;
  letter-spacing:.1em;
  text-transform: uppercase;
}

@media screen and (max-width: 810px) {
.area-top_ttl span{
  font-size:1.7em;
}
}

@media screen and (max-width: 568px) {
.area-top_ttl span{
  font-size:1.5em;
}
}

.area-box{
  width:100%;
  box-sizing: border-box;
  padding: 2% 4.1% 3%;
  position: relative;
  max-width:1580px;
  margin:0 auto;
}

@media screen and (max-width: 1580px) {
.area-box{
  padding: 2% 2.1% 1%;
}
}

.area-box .csite-left{
  width:50%;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

@media screen and (max-width: 810px) {
.area-box .csite-left{
  width:100%;
  max-width:715px;
  display: block;
  margin:3% auto;
}
}

@media screen and (max-width: 568px) {
.area-box .csite-left{
  padding:0;
}
}


.area-box .csite-left .csmp{
  width:100%;
  height:auto;
}

.area-box .csite-left a{
  background: rgba(0, 0, 0, 0.6);
  color:#FFF;
  display: block;
  text-decoration: none;
  padding:2px 10px 4px;
  font-size:0.9em;
}

.area-box .csite-left a:hover {
  text-decoration: none;
  opacity: 0.7;
}

.area-box .csite-left .hokubu{
  position: absolute;
  top: 35%;
  right: 20%;
}

.area-box .csite-left .tube{
  position: absolute;
  top: 60%;
  right: 35%;
}

.area-box .csite-left .nanbu{
  position: absolute;
  bottom: 10%;
  right: 30%;
}

.area-box .csite-left .miyako{
  position: absolute;
  top: 18%;
  left: 5%;
}

.area-box .csite-left .ishigaki{
  position: absolute;
  top: 45%;
  left: 5%;
}

.area-box .csite-left .kerama{
  position: absolute;
  bottom: 3%;
  left: 5%;
}

.area-box .csite-leftv{
  width:50%;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

@media screen and (max-width: 810px) {
.area-box .csite-leftv{
  width:100%;
  max-width:715px;
  display: block;
  margin:3% auto 3%;
}
}

@media screen and (max-width: 568px) {
.area-box .csite-leftv{
  padding:0;
}
}

.area-box .csite-leftv h3{
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
  padding: 10px 15px;
  text-transform: uppercase;
  display:inline-block;
  line-height:1;
  font-size:1.2em;
  font-weight:400;
  letter-spacing:.1em;
  background: rgba(0, 0, 0, 0.7);
  color:#FFF;
}

.area-box .csite-leftv .csmp{
  width:100%;
  height:auto;
}

.area-box .csite-leftv p {
  display:inline-block;
  text-transform: uppercase;
}

.area-box .csite-leftv .fa {
  font-size:1.2em;
}

.area-box .csite-leftv p a {
  color: #000;
  text-decoration: none;
  font-size: 14px;
}

.area-box .csite-leftv p a span {
  padding: 0 2px 5px;
  display: block;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.area-box .csite-leftv p a span::before {
  content: '';
  display: block;
  width: 100%;
  top: 0;
  bottom: 0;
  left: -100%;
  border-bottom: solid 1px #000;
  position: absolute;
  transition: all .5s ease;
  z-index: -1;
}

.area-box .csite-leftv p a:hover span::before {
  left: 0;
}

.area-box .csite-leftv p a:hover span {
  color: #000;
}

.area-box .csite-leftv .Hai-Chau{
  position: absolute;
  top: 47.5%;
  right: 36.5%;
}

@media screen and (max-width: 1400px) {
.area-box .csite-leftv .Hai-Chau{
  left: 45%;
}
}

.area-box .csite-leftv .Ngu-Hanh-Son{
  position: absolute;
  top: 50%;
  right: 15%;
}

@media screen and (max-width: 1580px) {
.area-box .csite-leftv .Ngu-Hanh-Son{
  right: 16%;
}
}

@media screen and (max-width: 1280px) {
.area-box .csite-leftv .Ngu-Hanh-Son{
  right: 9%;
}
}

@media screen and (max-width: 568px) {
.area-box .csite-leftv .Ngu-Hanh-Son{
  right: 7%;
}
}

.area-box .csite-leftv .Son-Tra{
  position: absolute;
  top: 26%;
  right: 21%;
}

@media screen and (max-width: 568px) {
.area-box .csite-leftv .Son-Tra{
  right: 15%;
}
}

.area-box .csite-leftv .Lien-Chieu{
  position: absolute;
  top: 32%;
  right: 52%;
}

@media screen and (max-width: 568px) {
.area-box .csite-leftv .Lien-Chieu{
  top: 30%;
  right: 50%;
}
}

.area-box .csite-leftv .Cam-Le{
  position: absolute;
  top: 56%;
  right: 42%;
}

@media screen and (max-width: 1280px) {
.area-box .csite-leftv .Cam-Le{
  right: 43%;
}
}

@media screen and (max-width: 568px) {
.area-box .csite-leftv .Cam-Le{
  top: 55%;
  right: 44%;
}
}

.area-box .csite-leftv .Hoi-An{
  position: absolute;
  bottom:12%;
  right: 11%;
}

.area-box .csite-leftv .Thanh-Khe{
  position: absolute;
  top: 40%;
  right: 42.5%;
}

@media screen and (max-width: 1280px) {
.area-box .csite-leftv .Thanh-Khe{
  left: 35%;
}
}

@media screen and (max-width: 568px) {
.area-box .csite-leftv .Thanh-Khe{
  top: 38%;
}
}


.area-box .csite-right{
  width:50%;
  display: inline-block;
  vertical-align: top;
  position: relative;
  box-sizing: border-box;
  padding-left:5%;
}

@media screen and (max-width: 810px) {
.area-box .csite-right{
  width:100%;
  max-width:715px;
  display: block;
  margin:3% auto;
  padding:0;
}
}

@media screen and (max-width: 568px) {
.area-box .csite-right{
  padding:0 2%;
}
}

.menu_btn {
  width: 100%;
  padding:2% 0 5%;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

@media screen and (max-width: 810px) {
.menu_btn {
  padding:3% 0 5%;
  text-align: left;
  margin-bottom:10px;
}
}


.menu_btn ul{
  width:100%;
  box-sizing:border-box;
  padding:10px 0;
  display:table;
  border-collapse: separate;
  border-spacing: 15px 0;
}

.menu_btn {
  width:100%;
}

.menu_btn ul li {
  display:table-cell;
  font-family: 'Noto Serif JP', serif;
  font-size:1.1em;
  letter-spacing:.1em;
  text-align:center;
  vertical-align:middle;
  -moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s
}

@media only screen and  (max-width: 810px) {
.menu_btn ul {
  width:100%;
  display:block;
  border-spacing: 0;
  padding:0;
}

.menu_btn ul li {
  display:inline-block;
  width:48%;
  margin:1%;
  vertical-align:top;
}
}

.menu_btn ul li a {
  width:100%;
  display:block;
  color:#000;
  background: #FFF;
  padding:25px 0;
  box-sizing:border-box;
  text-decoration: none;
  border:1px solid #000;
}

@media screen and (max-width: 568px) {
.menu_btn ul li a {
  padding:20px 0;
}
.menu_btn ul li {
  display:block;
  width:100%;
  margin:1% 0;
}
}

.menu_btn a:hover {
  background: #000;
  color:#fff;
  text-decoration: none;
  border:1px solid #000;
}

.menu_btn li {
  font-size:1.25em;
  font-family: 'Noto Serif JP', serif;
  font-weight:300;
  text-align: center;
}

@media screen and (max-width: 568px) {
.menu_btn li {
  font-size:1.1em;
}
}


/* camp_slider
--------------------------------------- */
.camp_slider{
  margin:2% 0 0%;
  width:100%;
  box-sizing: border-box;
  padding:80px 4.3% 0;
  position: relative;
}

@media screen and (max-width: 1580px) {
.camp_slider{
  padding:80px 2% 0;
}
}

@media screen and (max-width: 1280px) {
.camp_slider{
  padding:75px 2% 0;
}
}

@media screen and (max-width: 810px) {
.camp_slider{
  padding:60px 2% 0;
}
}

.lslv{
  position: absolute;
  top: 10px;
  left:6%;
  cursor: pointer;
  font-size:1.3em;
}


@media screen and (max-width: 1280px) {
.lslv{
  position: absolute;
  top: 15px;
  left:5%;
}
}

.camp_slider:after,.buttons::after{clear:both;content:"";display:table;}

.camp_slider .sl {
  width: 25%;
  padding:0 14px;
  float:left;
  box-sizing: border-box;
  position: relative;
}

@media screen and (max-width: 1580px) {
.camp_slider .sl {
  width: 33.3333%;
  padding:0 10px;
}
}

@media screen and (max-width: 1280px) {
.camp_slider .sl {
  padding:0 10px;
}
}

@media screen and (max-width: 810px) {
.camp_slider .sl {
  width: 50%;
  padding:10px;
}
}

@media screen and (max-width: 568px) {
.camp_slider .sl {
  width: 90%;
  padding:5px 10px;
  margin:0 auto;
}
}

.slide-arrows{
  position: absolute;
  top: -80px;
  right:0;
  cursor: pointer;
}

@media screen and (max-width: 1280px) {
.slide-arrows{
  top: -65px;
}
}

@media screen and (max-width: 810px) {
.slide-arrows{
  top: -50px;
}
}

.slide-arrows:hover { opacity: 0.7;}

.prev-arrows{
  right:60px;
  display: block;
  width: 42px;
  height: 42px;

}
.next-arrows{
  right: 10px;
  display: block;
  width: 42px;
  height: 42px;
}

.camp_slider .item {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  border:1px solid #222222;
  background:#FFF;
}

.bkls_photo {
  width:100%;
  height:280px;
  position: relative;
  overflow: hidden;
  display:block;
}

.bkls_photo img{
  width:auto;
  height:330px;
  margin:auto;
}

@media screen and (max-width: 1580px) {
.bkls_photo {
  height:300px;
}

.bkls_photo img{
  height:350px;
}
}

@media screen and (max-width: 1280px) {
.bkls_photo {
  height:230px;
}

.bkls_photo img{
  height:280px;
}
}

@media screen and (max-width: 1000px) {
.bkls_photo img{
  height:350px;
}
}

@media screen and (max-width: 810px) {
.bkls_photo {
  height:220px;
}

.bkls_photo img{
  height:300px;
}
}

.bkls_photo a:hover{
  opacity: 0.8;
}

#bukken-list .bsl .overlays {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width:100%;
  height:100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bkls_photo .bicn{
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
  padding: 5px 7px;
  display:inline-block;
  line-height:1;
  letter-spacing : 0.05em;
  font-size:13px;
  background: rgba(0, 0, 0, 0.7);
  color:#FFF;
}

.bkls_text {
  width:100%;
  height:auto;
  padding:15px 25px;
  box-sizing: border-box;
  position: relative;
}

@media screen and (max-width: 810px) {
.bkls_text {
  padding:10px 15px;
}
}

.bkls_name {
  font-size:0.95em;
  line-height:1.4;
  color:#000;
  text-align: left;
  font-weight:500;
}

@media screen and (max-width: 1280px) {
.bkls_name {
  font-size:0.9em;
}
}

.bkls_price{
  padding:10px 0 0;
  color:#000;
  color:#545454;
  text-align: left;
}

.bkls_txt {
  font-size:13px;
  line-height:1.6;
  letter-spacing:0;
  color:#545454;
  padding:10px 0 0;
}

.os_text {
  width:100%;
  height:auto;
  padding:10px 5px 5px;
  box-sizing: border-box;
}

@media screen and (max-width: 810px) {
.os_text {
  padding:10px 5px 0;
}
}

.os_name {
  font-size:0.95em;
  line-height:1.4;
  text-align: left;
}

@media screen and (max-width: 1280px) {
.os_name {
  font-size:0.9em;
}
}

.os_price{
  padding:10px 0 0;
  color:#545454;
  text-align: left;
}

@media screen and (max-width: 810px) {
.os_price{
  padding:5px 0 0;
  font-size:0.95em;
  text-align: left;
}
}

.os_pricew{
  padding:10px 0 0;
  color: #ACACAC;
  text-align: left;
}

@media screen and (max-width: 810px) {
.os_pricew{
  padding:5px 0 0;
  font-size:0.95em;
  text-align: left;
}
}

.os_txt {
  font-size:13px;
  line-height:1.6;
  letter-spacing:0;
  color:#545454;
  padding:10px 0 0;
}

.camp_slider .blsinfo{
  width:100%;
  display:block;
  margin:10px 0 0;
  border-top:1px dashed #E3E3E3;
  padding:15px 0 0;
  box-sizing: border-box;
  position: relative;
}

@media screen and (max-width: 568px) {
.camp_slider .blsinfo {
  padding:10px 10px;
}
}

.blsinfoL{
  width:75%;
  display:inline-block;
  vertical-align: middle;
  text-align: left;
  box-sizing: border-box;
  padding-right:5%;
}

@media screen and (max-width: 810px) {
.blsinfoL{
  width:65%;
}
}

.camp_slider .blsinfo .anim{
  width:30.3333%;
  margin:1.5%;
  display:inline-block;
  vertical-align: top;
  font-size:0.9em;
}


.camp_slider .blsttl{
  margin-bottom:10px;
  line-height:1.5;
  border-bottom:1px dashed #E3E3E3;
}

.camp_slider .blsttl p{
  font-weight:500;
  font-family: 'Inter',sans-serif;
  font-size:1.1em;
  line-height:1.5;
  padding:0 5px 10px;
}

.camp_slider .blsinfo .anim{
  width:31.3333%;
  margin:1%;
  display:inline-block;
  vertical-align: top;
  font-size:0.9em;
}
.camp_slider .blsinfo .anim p{
  font-size:0.95em;
  letter-spacing : 0.05em;
  margin-bottom:5px;
  display:block;
}

.camp_slider .blsinfo dt{
  width:30%;
  box-sizing: border-box;
  padding:3%;
  display:inline-block;
  vertical-align: middle;
}

.camp_slider .blsinfo dt img{
  width:100%;
  height:auto;
}

.camp_slider .blsinfo dd{
  width:70%;
  box-sizing: border-box;
  padding:3% 0 3% 10%;
  display:inline-block;
  vertical-align: middle;
  line-height:1.2;
}

.blsinfoR{
  width:25%;
  display:inline-block;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
  padding:left:5%;
  margin-top:10px;
}

@media screen and (max-width: 810px) {
.blsinfoR{
  width:35%;
}
}

.blsinfoR p{
  font-family: Roboto,sans-serif;
  letter-spacing:0.2em;
  text-transform: uppercase;
  font-size:12px;
  font-weight:400;
  line-height:1;
}

.blsinfoR p a{text-decoration:none;padding:12px 0 12px;display:block;background-color:#FFF;color:#000;border:1px solid #000;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s}
.blsinfoR p a:hover{text-decoration:none;background-color:#000;color:#FFF;}

/* 検索
================================================== */
.search-box {
  width:100%;
  max-width:1200px;
  margin:3% auto 0;
}

.form_search{
  width: 96%;
  margin:0 2%;
  box-sizing: border-box;
  font-size:0.95em;
  background:#FFF;
  padding:2% 3%;
  -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
  border:1px solid #E5E5E5;
}

@media screen and (max-width: 810px) {
.form_search{
  width: 100%;
  display: block;
  margin:2% auto;
  max-width:500px;
}
}

@media screen and (max-width: 568px) {
.form_search{
  width: 95%;
  margin:3% auto;
  padding:3% 4%;
}
}

.form_search dl{
  background:#FFF;
}

.form_search dt{
  width: 29%;
  display: inline-block;
  vertical-align: middle;
  padding:1.5% 5% 1.5% 0;
  box-sizing: border-box;
  font-weight:400;
  text-align: right;
  line-height:1;
  letter-spacing:.05em;
  font-weight:400;
  font-size:1.2em;
}

.form_search dt p{
 font-size:1.1em;
}

@media screen and (max-width: 568px) {
.form_search dt{
  width: 100%;
  display: block;
  text-align: right;
  padding:0 2% 8px;
  text-align: center;
}
}

.form_search dd{
  width: 71%;
  display: inline-block;
  padding:2% 2% 2% 3%;
  box-sizing: border-box;
  vertical-align: middle;
  border-left:1px solid #E5E5E5;
  text-align: left;
}

@media screen and (max-width: 568px) {
.form_search dd{
  width: 100%;
  padding:15px 2% 0;
  border-left:none;
  border-top:1px solid #E5E5E5;
  text-align: center;
}
}

.form_search dd .form_col{
  display: inline-block;
  margin-right:5px;
}

@media screen and (max-width: 568px) {
.form_search dd .form_col{
  display: block;
  margin-right:0;
}
}

.form_search dd p{
 font-size:14px;
}

.form_search dd input{
 padding : 7px;
 border:1px solid #E5E5E5;
 -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
 color:#000;
 font-size:14px;
 cursor: pointer;
}

.form_search .form_input{
  width:100%;
}

.form_search dd select{
  -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #E5E5E5;
  background: #FFF;
  background: url(../images/arrow01.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#FFF 100%);
  background: url(../images/arrow01.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#FFF 100%);
  background-size: 20px, 100%;
  margin:0 15px 0 0;
  padding: 8px 35px 8px 8px;
  line-height:1;
  font-size:15px;
  letter-spacing:0.03em;
  cursor: pointer;
  font-family: Roboto,sans-serif;
  font-weight:400;
  width:auto;min-width:180px;
}

@media screen and (max-width: 568px) {
.form_search dd select{
  padding: 8px 17px 8px 7px;
  background-size: 15px 100%;
  font-size:13px;
}
}

input.sear_bt{
  padding:9px 10px!important;
  line-height: 1;
  background : #000;
  color: #fff!important;
  -webkit-border-radius:5px!important;
  -moz-border-radius:5px!important;
  border-radius:5px!important;
  border-style: none!important;
  cursor: pointer;
  font-size:0.9em;
  font-family: Roboto,sans-serif;
  font-weight:400;
  text-transform: uppercase;
}

@media screen and (max-width: 568px) {
input.sear_bt{
  font-size:1.2em;
}
}

input.sear_bt:hover{
  opacity: 0.8;
}


/* .agen-box
================================================== */
.agen-box {
  width: 100%;
  padding:3% 4% 0;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

@media screen and (max-width: 1580px) {
.agen-box {
  padding:3% 1% 0;
}
}

@media screen and (max-width: 1280px) {
.agen-box {
  padding:3% 0 0;
}
}

@media screen and (max-width: 568px) {
.agen-box {
  padding:4% 2% 5%;
}
}

.agen_ttl{
  font-size:14px;
  line-height:2;
  margin-bottom:2%;
}

.agen_ttl span{
  font-size:2em;
  letter-spacing:.1em;
  text-transform: uppercase;
}

@media screen and (max-width: 810px) {
.agen_ttl{
  line-height:1.5;
}

.agen_ttl span{
  font-size:1.7em;
}
}

@media screen and (max-width: 568px) {
.agen_ttl span{
  font-size:1.5em;
}
}

.agen-syousai{
  width: 100%;
  text-align: center;
}

.agen-syousai ul{
  width: 100%;
  margin:4% auto;
  max-width:970px;
}

.agen-syousai li{
  width: 48%;
  display: inline-block;
  vertical-align: middle;
  padding:2% 3%;
  box-sizing: border-box;
  margin:0 1%;
  position: relative;
  border:1px solid #000;
}

@media screen and (max-width: 810px) {
.agen-syousai li{
  width: 90%;
  display: block;
  padding:2% 3% 5%;
  margin:3% auto;
}
}

@media screen and (max-width: 568px) {
.agen-syousai li{
  width: 94%;
}
}

.agen-syousai li a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 100%;
  z-index:2;
  color:#FFF;
}

.agen-syousai li:hover{
  cursor:pointer;
  color:#FFF;
  background:#000;
  text-decoration:none;
}

.agen-syousai li .agt-ic{font-size:4em;}
.agen-syousai li .agt01{font-size:1.4em;font-weight:500;}
.agen-syousai li .agt02{padding:3% 4%;margin-bottom:5px;}
.agen-syousai li .agt03{text-transform: uppercase;font-size:1.1em;font-weight:500;}

.ag-ttl{
  font-size:1.6em;
  padding:1% 1% 1%;
}

@media screen and (max-width: 568px) {
.ag-ttl{
  font-size:1.4em;
}
}

.ag-txs{
  padding:2% ;
}


.flsw-button{border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.flsw-button.c-button--ghost{display:block;padding:15px 30px;background-color:#FFF;border:1px solid #000;color:#000;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s}
.flsw-bt a{text-decoration:none;}
.flsw-bt a:hover{text-decoration:none;display:inline-table;background-color:#000;color:#FFF;text-shadow:0 0 0 #FFF;}

@media screen and (max-width: 568px) {
.flsw-button.c-button--ghost{display:block;padding:15px 30px;}
}

.flsw-bt{
  color:#FFF;
  font-weight:400;
  font-size:0.9em;
  line-height:1.3;
  margin-top:2%;
  margin-bottom:5%;
  display:inline-block;
  text-transform: uppercase;
  letter-spacing:.1em;
}

.flsw-bt a{text-decoration:none;}
.flsw-bt a:hover{text-decoration:none;display:inline-table;background-color:#000;color:#FFF;text-shadow:0 0 0 #FFF;}

/* 無料査定バナー
================================================== */
.satei-bnbox{
  width: 100%;
  margin:3% auto;
  max-width:950px;
  position: relative;
  background-color:#F3F3F3;
  border:1px solid #000;
}

@media screen and (max-width: 810px) {
.satei-bnbox{
  width: 90%;
  margin:3% auto 1%;
}
}

@media screen and (max-width: 568px) {
.satei-bnbox{
  width: 94%;
}
}

@media screen and (max-width: 380px) {
.satei-bnbox{
  width: 98%;
}
}

.stl-box{
  width:50%;
  margin:0 auto;
  display:inline-block;
  vertical-align: top;
  position: relative;
}

@media screen and (max-width: 810px) {
.stl-box{
  width:100%;
  display:block;
}
}

.stl-box img{
  width:100%;
  height:auto;
  margin:0!important;
  vertical-align: bottom;
}

.sale-mr{
  width:40%;
  max-width:500px;
  position: absolute;
  bottom: 10%;
  left: 10%;
}

.sale-lg{
  width:25%;
  position: absolute;
  bottom: 3%;
  right: 3%;
}

.str-box{
  width:50%;
  margin:0 auto;
  display:inline-block;
  vertical-align: top;
}
@media screen and (max-width: 810px) {
.str-box{
  width:100%;
  display:block;
}
}
.msttp01{
  font-size:1.4em!important;
  background: #000;
  padding:10px 1% 12px!important;
  color:#FFF!important;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  letter-spacing:.2em!important;
  font-weight:500!important;
  line-height:1!important;
}

@media screen and (max-width: 1000px) {
.msttp01{
  font-size:1.2em!important;
}
}

@media screen and (max-width: 568px) {
.msttp01{
  font-size:1.15em!important;
  text-align: center!important;
  letter-spacing:.1em!important;
}
}

.msttp01 span{
  font-size:1.2em!important;
  margin:0 5px;
}

.msttp02{
  font-size:1.3em!important;
  color:#000!important;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-weight:500!important;
  line-height:1.6!important;
}

@media screen and (max-width: 1000px) {
.msttp02{
  font-size:1.05em!important;
}
}

@media screen and (max-width: 810px) {
.msttp02{
  font-size:1.2em!important;
}
}

@media screen and (max-width: 568px) {
.msttp02{
  font-size:1em!important;
  padding:0 5px;
  text-align: center!important;
}
}

.mryu-satei{
  width:92%;
  margin:25px auto 15px;
  text-align: center;
}

@media screen and (max-width: 1000px) {
.mryu-satei{
  margin:15px auto 10px;
}
}

@media screen and (max-width: 810px) {
.mryu-satei{
  margin:20px auto 10px;
}
}

@media screen and (max-width: 568px) {
.mryu-satei{
  margin:15px auto 10px;
}
}

.mryu-satei img{
  width:16.6666%;
  height:auto;
  margin:0 auto;
  display:inline-block;
  vertical-align: middle;
}

.mst-btn{
  font-size:1.2em!important;
  letter-spacing:.2em!important;
  text-align: right;
  font-family: 'Noto Serif JP', serif;
  font-weight:500!important;
  line-height:1!important;
  width:50%;
  height:auto;
  position: absolute;
  right: 0;
  bottom: 0;
}

@media screen and (max-width: 1000px) {
.mst-btn{
  font-size:1.1em!important;
}
}

@media screen and (max-width: 810px) {
.mst-btn{
  position: relative;
  width:100%;
  margin-top:3%;
  font-size:1.2em!important;
}
}

@media screen and (max-width: 568px) {
.mst-btn{
  margin-top:4%;
  font-size:1.1em!important;
  text-align: right!important;
}
}

.mst-button{border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.mst-button.c-button--ghost{display:block;padding:20px 20px;background-color:#000;color:#FFF;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s}
.mst-btn a{text-decoration:none;}
.mst-btn a:hover{text-decoration:none;display:block;background-color:#373737!important;color:#FFF;}

@media screen and (max-width: 1000px) {
.mst-button.c-button--ghost{
  padding:15px 20px;
}
}

@media screen and (max-width: 810px) {
.mst-button.c-button--ghost{
  padding:20px 20px;
}
}

@media screen and (max-width: 568px) {
.mst-button.c-button--ghost{
  padding:15px 20px;
}
}