@charset "utf-8";
@import url(//fonts.googleapis.com/css?family=Barlow);

/* 物件詳細一覧
--------------------------------------------------*/
#bukken-list{
  width:100%;
  display:block;
  box-sizing: border-box;
  padding:0 4% 4%;
}

@media screen and (max-width: 1580px) {
#bukken-list{
  padding:0 3% 4%;
}
}

.list-ttl{
  letter-spacing:.1em;
  display:block;
  font-weight:400;
  font-size:1.8em;
  font-family: 'Noto Serif JP', serif;
  padding-bottom:25px;
  padding-left:1%;
  color:#FFF;
}

@media screen and (max-width: 810px) {
.list-ttl{
  font-size:1.6em!important;
  padding:0 2% 15px!important;
  line-height:1.4!important;
}
}

@media screen and (max-width: 568px) {
.list-ttl{
  font-size:1.4em!important;
  padding:0 2% 10px!important;
}
}

#bukken-list .bsl {
  width: 33.3333%;
  padding:14px;
  display:inline-block;
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
}

@media screen and (max-width: 1280px) {
#bukken-list .bsl {
  padding:10px;
}
}

@media screen and (max-width: 1000px) {
#bukken-list .bsl {
  width: 50%;
  padding:14px;
}
}

@media screen and (max-width: 810px) {
#bukken-list .bsl {
  padding:10px;
}
}

@media screen and (max-width: 568px) {
#bukken-list .bsl {
  width: 100%;
  display:block;
  padding:7px;
}
}

#bukken-list .bkls_text a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 100%;
  z-index:2;
}

#bukken-list .bkls_text:hover{
  filter:alpha(opacity=60);  /* for IE */
  -moz-opacity: 0.6;  /* for Firefox */
  opacity: 0.6;  /* for Safari or Opera */
  background-color: #fff;
  z-index: 3;
}

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

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

.bkls_photo img{
  width:auto;
  height:420px;
  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:250px;
}

.bkls_photo img{
  height:300px;
}
}

@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;
}
}

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

}

#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-color:#FFF;
  color:#000;
  -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
}

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

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

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

@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;
}

.bsl .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) {
.bsl .blsinfo {
  padding:10px 10px;
}
}

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

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

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

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

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


/* .new_page
--------------------------------------------------*/
.new_page {
  font-size   : 0.9em;
  text-align	: center;
  border-radius: 0;
  margin-top:5%;
  margin-bottom:2%;
  line-height:1.2;
  font-family: Roboto,Meiryo,sans-serif;
  font-weight:400;
  text-transform: uppercase;
  letter-spacing:.02em;
  width:100%;
}

.current_page{
  background: #B4B4B4;
  color : #FFF;
  border: 1px solid #dedede;
  padding : 5px 8px 3px 8px;
  line-height:1.2;
}

.new_page a{
  margin:0 2px;
  background : #F7F7F7;
  color : #333;
  border: 1px solid #dedede;
  padding : 5px 8px 3px 8px;
  text-decoration	: none;
  -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}

.new_page a:hover{
  background: #000;
  color : #FFF;
  text-decoration	: none;
}


/* 物件詳細
--------------------------------------- */
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
  display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
  font-size:1.2rem;
  text-align: center;
  margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
  padding:0;
}

.info-list dl{
  display: flex;
}

.info-list dt{
  margin:0 10px 0 0;
}

.gallery-list:-webkit-scrollbar{
  display: none;
}

/* #bukken-syousai
--------------------------------------------------*/
#bukken-syousai{
  width:100%;
  display:block;
  box-sizing: border-box;
  padding:0 4% 2%;
}

@media screen and (max-width: 1580px) {
#bukken-syousai{
  padding:0 3% 3%;
}
}

.gallery-list{
  width:100%;
  display:block;
  position: relative;
}

.gallery-list .main-photo{
  width:50%;
  height:500px;
  display:inline-block;
  vertical-align:  bottom;
  box-sizing: border-box;
  padding:2px;
  position: relative;
}

@media screen and (max-width: 1750px) {
.gallery-list .main-photo{
  height:450px;
}
}

@media screen and (max-width: 1580px) {
.gallery-list .main-photo{
  height:400px;
}
}

@media screen and (max-width: 1380px) {
.gallery-list .main-photo{
  height:380px;
}
}

@media screen and (max-width: 1280px) {
.gallery-list .main-photo{
  height:350px;
}
}

@media screen and (max-width: 810px) {
.gallery-list .main-photo{
  width:100%;
  display:block;
  height:400px;
}
}


@media screen and (max-width: 680px) {
.gallery-list .main-photo{
  height:350px;
}
}

@media screen and (max-width: 568px) {
.gallery-list .main-photo{
  height:250px;
}
}

@media screen and (max-width: 400px) {
.gallery-list .main-photo{
  height:220px;
}
}

@media screen and (max-width: 350px) {
.gallery-list .main-photo{
  height:200px;
}
}

.ph-number{
  position: absolute;
  left: 50%;
  bottom: 30px;
  text-align: left;
  z-index:11;
  margin-left:-180px;
}

@media screen and (max-width: 810px) {
.ph-number{
  left: initial;
  bottom: initial;
  position: relative;
  margin:30px auto 20px;
  text-align: center;
}
}

@media screen and (max-width: 568px) {
.ph-number{
  margin:20px auto;
}
}

.ph-number p span{
  display:inline-block;
  vertical-align: middle;
}

.ph-number p .fa{
  display:inline-block;
  vertical-align: middle;
  font-size:1.4em;
  padding-right:10px;
}

.ph-number a {
  padding:12px 20px;
  color:#FFF;
  -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;
  background: rgba(0, 0, 0, 0.65);
  text-decoration:none;
  border:1px solid #262626;
}

.ph-number a:hover {
  color:#FFF;
  background: rgba(0, 0, 0, 0.8);
  text-decoration:none;
}


@media screen and (max-width: 810px) {
.ph-number a {
  padding:14px 25px 15px;
  color:#FFF;
  background: rgba(0, 0, 0, 1);
  text-decoration:none;
  border:none;
}

.ph-number a:hover {
  background: rgba(0, 0, 0, 0.6);
}
}

.gallery-list ul{
  width:50%;
  height:500px;
  display:inline-block;
  vertical-align: bottom;
}

@media screen and (max-width: 1750px) {
.gallery-list ul{
  height:450px;
}
}

@media screen and (max-width: 1580px) {
.gallery-list ul{
  height:400px;
}
}

@media screen and (max-width: 1380px) {
.gallery-list ul{
  height:380px;
}
}

@media screen and (max-width: 1280px) {
.gallery-list ul{
  height:350px;
}
}

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

@media screen and (max-width: 568px) {
.gallery-list ul{
  height:250px;
}
}

@media screen and (max-width: 400px) {
.gallery-list ul{
  height:220px;
}
}

@media screen and (max-width: 350px) {
.gallery-list ul{
  height:200px;
}
}

.gallery-list li{
  display:inline-block;
  vertical-align: top;
  width:50%;
  height:50%;
  box-sizing: border-box;
  padding:2px;
}

.bkls-ph{
  position: relative;
  overflow: hidden;
  height:100%;
}

.gallery-list .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-ph img {
  width:100%;
  height:auto;
}

.gallery-list .bkls-ph img {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform 500ms;
  transition: transform 500ms;
}
.gallery-list .bkls-ph:hover img {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
  transform: scale3d(1.05, 1.05, 1.05);
}

.gallery-list #h100 {
  width:auto;
  max-width:90%;
  margin:5% auto;
  max-height: 90%;
}

.gallery-list li img a.gallery   {
  width:auto;
  height:100%;
}

.photo-list{
  width:100%;
  display:block;
}

.photo-list .pls-tx {
  font-size:13px;
  line-height:1.6;
  letter-spacing:0;
  color: #ACACAC;
  padding:5px;
}

.photo-list .pw100{
  width:100%!important;
  display:block!important;
  box-sizing: border-box!important;
  padding:4px!important;
  height: 800px;
}

.photo-list .pw50{
  display:inline-block!important;
  vertical-align: top!important;
  box-sizing: border-box!important;
  padding:4px!important;
  width:50%!important;
  height: 500px;
}

.photo-list .pw33{
  display:inline-block!important;
  vertical-align: top!important;
  box-sizing: border-box!important;
  padding:4px!important;
  width:33.3333%!important;
  height: 350px;
}

@media screen and (max-width: 1800px) {
.photo-list .pw100{
  height: 750px;
}

.photo-list .pw50{
  height: 450px;
}

.photo-list .pw33{
  height: 300px;
}
}

@media screen and (max-width: 1580px) {
.photo-list .pw100{
  height: 700px;
}

.photo-list .pw50{
  height: 400px;
}

.photo-list .pw33{
  height: 250px;
}
}

@media screen and (max-width: 1380px) {
.photo-list .pw100{
  height: 660px;
}

.photo-list .pw50{
  height: 370px;
}

.photo-list .pw33{
  height: 225px;
}
}

@media screen and (max-width: 1280px) {
.photo-list .pw100{
  height: 620px;
}

.photo-list .pw50{
  height: 330px;
}

.photo-list .pw33{
  height: 200px;
}
}

@media screen and (max-width: 810px) {
.photo-list .pw100{
  height: 400px;
}

.photo-list .pw50{
  height: 200px;
}

.photo-list .pw33{
  height: 130px;
}
}

@media screen and (max-width: 568px) {
.photo-list .pw100{
  height: 250px;
  padding:3px!important;
}

.photo-list .pw50{
  height: 100px;
  padding:3px!important;
}

.photo-list .pw33{
  height: 80px;
  padding:3px!important;
}
}


.bkls-ph{
  position: relative;
  overflow: hidden;
  height:100%;
}

.photo-list .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;
}

.photo-list img {
  width:100%;
  height:auto;
}

#bukken-box{
  width: 100%;
  position: relative;
}

.bk_contents{
  width: 78%;
  display:inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding:0 3% 0 3px;
  margin-top:2%;
}

@media screen and (max-width: 1580px) {
.bk_contents{
  width: 75%;
}
}

@media screen and (max-width: 1350px) {
.bk_contents{
  width: 72%;
}
}

@media screen and (max-width: 810px) {
.bk_contents{
  width: 100%;
  display:block;
  padding:0 2.5%;
  margin-top:5%;
}
}

/* .bukken-top
-------------------------- */
.bukken-top{
  width:100%;
  display:block;
  box-sizing: border-box;
  padding:0;
}

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

.bukken-id {
  display:block;
  padding:1% 5px 0;
}

.bukken-id p{
  letter-spacing:.02em;
  font-weight:400;
  font-size:1em;
  color: #ACACAC;
}

@media screen and (max-width: 810px) {
.bukken-id {
  display:block;
  padding:10px 5px ;
}

.bukken-id p{
  font-size:1em;
}
}

.bukken-id span{
  color: #ACACAC;
}

.bukken-top h2{
  letter-spacing:.1em;
  line-height:1.5;
  display:block;
  font-weight:400;
  font-size:1.8em;
  font-family: 'Noto Serif JP', serif;
  color:#FFF;
}

@media screen and (max-width: 810px) {
.bukken-top h2{
  font-size:1.6em!important;
}
}

@media screen and (max-width: 568px) {
.bukken-top h2{
  font-size:1.4em!important;
}
}

/* .bktL
-------------------------- */
.bukken-top .bktL{
  width: 70%;
  display:inline-block;
  vertical-align: bottom;
  box-sizing: border-box;
  padding:0 3% 0 0;
}

@media screen and (max-width: 568px) {
.bukken-top .bktL{
  width: 100%;
  display:block;
  padding:0;
}
}

.bukken-top .area_tx{
  letter-spacing:.02em;
  font-weight:400;
  font-size:1em;
  color:#F6F6F6;
  display:block;
  padding:1% 5px;
}

.bukken-top .area_tx .fa{
  margin-right:10px;
  font-size:1.1em;
  color: #ACACAC;
}

.blsinfos{
  width:100%;
  max-width:800px;
  display:block;
  text-align: left;
  padding:15px 0;
  color:#FFF;
}

.blsinfos .anim{
  width:16%;
  margin:0 1%;
  display:inline-block;
  vertical-align: top;
  font-size:0.95em;
}

@media screen and (max-width: 1280px) {
.blsinfos .anim{
  width:20%;
}
}

@media screen and (max-width: 810px) {
.blsinfos .anim{
  width:24%;
}
}

@media screen and (max-width: 568px) {
.blsinfos .anim{
  width:31.3333%;
  font-size:0.9em;
}
}

.blsinfos .anim p{
  font-size:1em;
  letter-spacing : 0.05em;
  margin-bottom:5px;
  display:block;
}


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

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

.blsinfos dd{
  width:70%;
  box-sizing: border-box;
  padding:3% 0 3% 10%;
  display:inline-block;
  vertical-align: middle;
  line-height:1.2;
  font-size:1.1em;
}

/* .bktR
-------------------------- */
.bukken-top .bktR{
  width: 30%;
  display:inline-block;
  vertical-align: bottom;
  color:#FFF;
}

.bukken-top .bktR span{
  font-size:2em;
  padding-left:10px;
}


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

.bukken-top .bktR span{
  font-size:1.75em;
  padding-left:0;
}
}

@media screen and (max-width: 568px) {
.bukken-top .bktR{
  width: 100%;
  display:block;
  text-align: center;
  padding:15px 0 20px;
}

.bukken-top .bktR span{
  padding-left:10px;
}
}

/* .bukken-expain
-------------------------- */
.bukken-expain{
  width:100%;
  box-sizing: border-box;
  padding:1% 0 3%;
  border-bottom:1px solid #626262;
  color: #CECECE;
}

.bukken-expain p{
  padding:1% 5px;
  line-height:1.8;
}

@media screen and (max-width: 810px) {
.bukken-expain p{
  padding:5px 0;
  line-height:1.6;
  font-size:15px;}
}

/* .bukken-detail
-------------------------- */
.bukken-detail{
  width:100%;
  box-sizing: border-box;
  padding:3% 0 3.5%;
  border-bottom:1px solid #626262;
  color:#FFF;
}

.detail-ttl{
  letter-spacing:.1em;
  display:block;
  font-weight:400;
  font-size:1.8em;
  font-family: 'Noto Serif JP', serif;
  font-family: EB Garamond,sans-serif;
  padding-bottom:5px;
  text-transform: uppercase;
}

@media screen and (max-width: 810px) {
.detail-ttl{
  font-size:1.6em;
}
}

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

.bukken-detail ul{
  width:100%;
  margin:0;
}

.bukken-detail .bdet{
  width: 100px;
  position: relative;
  text-align: center;
  display:inline-block;
  padding:25px 30px 0 0;
  vertical-align: top;
}

.bukken-detail .bdet p {
  margin-top:10px;
  font-size:0.95em;
}

@media screen and (max-width: 1280px) {
.bukken-detail .bdet{
  padding:15px 25px 0 0;
}
}

@media screen and (max-width: 810px) {
.bukken-detail .bdet{
  padding:15px 0;
  margin:0 10px;
}

.bukken-detail .bdet p {
  margin-top:8px;
}
}

@media screen and (max-width: 568px) {
.bukken-detail .bdet{
  margin:0 7px 0 0;
}
}

.bukken-detail .bdet .detail-bt{
  width: 100px;
  height: 100px;
  position: relative;
  border-radius:50%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bukken-detail .bdet .dt-sk {
  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;background: rgba(0, 0, 0, 0.6);
}

.bukken-detail .bdet:hover .dt-sk{
  background: rgba(0, 0, 0, 0.4);
}

.bukken-detail .bdet .dt-sk .fa{
  font-size:1.5em;
  color:#FFF;
  z-index:3;
}

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

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

.bukken-detail .bdet:hover{
  cursor:pointer;
  text-decoration:underline;
}

.bukken-detail #maps {
  background-image: url("../images/g-map.jpg");
}

/* .bukken-feature
-------------------------- */
.bukken-feature{
  width:100%;
  box-sizing: border-box;
  padding:3% 0 3%;
  border-bottom:1px solid #626262;
  color:#FFF;
}

.feature-ttl{
  letter-spacing:.1em;
  display:block;
  font-weight:400;
  font-size:1.8em;
  font-family: 'Noto Serif JP', serif;
  font-family: EB Garamond,sans-serif;
  padding-bottom:5px;
  text-transform: uppercase;
}

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

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

.bukken-feature ul{
  width:100%;
  margin:0;
}

.bukken-feature li{
  display:inline-block;
  padding:10px 3% 10px 0;
  line-height:1.4;
  font-weight:400;
  width:22%;
  vertical-align: top;
}

@media screen and (max-width: 1280px) {
.bukken-feature li{
  width:30.3333%;
  padding:8px 3% 8px 0;
}
}

@media screen and (max-width: 810px) {
.bukken-feature li{
  width:auto;
  padding:5px 5% 5px 0;
}
}

.bukken-feature li .fa {
  margin-right:7px;
}

.bukken-feature li a {
  text-decoration: none;
  color:#FFF;
}

.bk-feature li a:hover {
  color:#414141;
  text-decoration:underline;
}
/* .bukken-map
-------------------------- */
.bukken-map{
  width:100%;
  box-sizing: border-box;
  padding:3% 0 5%;
  border-bottom:1px solid #626262;
  color:#FFF;
}

.bukken-map .map-ttl{
  letter-spacing:.1em;
  display:block;
  font-weight:400;
  font-size:1.8em;
  font-family: 'Noto Serif JP', serif;
  font-family: EB Garamond,sans-serif;
  padding-bottom:5px;
  text-transform: uppercase;
}

@media screen and (max-width: 810px) {
.bukken-map .map-ttl{
  font-size:1.6em!important;
}
}

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

.bukken-map .map_tx{
  letter-spacing:.02em;
  font-weight:400;
  font-size:1em;
  color:#FFF;
  display:block;
  padding:1% 5px 15px;
}

.bukken-map .map_tx .fa{
  margin-right:10px;
  font-size:1.1em;
  color: #ACACAC;
}

.bukken-map .gmap{
  width:100%;
}

.bukken-map .gmap iframe {
  width: 100%;
  height: 100%;
  min-height:450px;
}

/* #bk-side
-------------------------- */
#sidebar {
  float: right;
  width:22%;
  margin-top:2%;
  box-sizing: border-box;
  padding-right:3px;
  position: relative;
}

@media screen and (max-width: 1580px) {
#sidebar {
  width: 25%;
}
}

@media screen and (max-width: 1350px) {
#sidebar {
  width: 28%;
}
}

@media only screen and  (max-width: 810px) {
#sidebar{
  width:100%;
  padding:0 2%;
  box-sizing: border-box;
}
}


#sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 160px;
}

.bk-contact{
  width:100%;
  padding:5%;
  box-sizing: border-box;
  margin-bottom:20px;
  border:1px solid #E5E5E5;
  background:#F5F5F5;
  position: relative;
}

.bk-contact .contact-ttl{
  font-weight:500;
  font-family: 'Noto Serif JP', serif;
  letter-spacing:.02em;
  font-size:1.15em;
  padding:0 1% 0;
  box-sizing: border-box;
  display:block;
  margin-bottom:5px;
  text-align: center;
}

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

.bk-contact .contact-ttl img{
  width:150px;
  height:auto;
  margin-bottom:5px;
}

.bk-contact dl{
  width: 100%;
}

.bk-contact .pd3{
  padding:5px 0;
}

.bk-contact .pd32{
  padding:5px 0 0;
}

.bk-contact dt{
  width: 100%;
  display: block;
  padding:0 1%;
  box-sizing: border-box;
  font-weight:500;
  text-align: left;
  line-height: 1;
  color:#545454;
}

@media screen and (max-width: 568px) {
.bk-contact dt{
  font-size:1em;
  line-height: 1.4;
}
}

.bk-contact dd{
  width: 100%;
  display: block;
  padding:0 0.5%;
  box-sizing: border-box;
}

@media screen and (max-width: 568px) {
.bk-contact dd{
  font-size:0.95em;
  padding:2% 1%;
}
}

.bk-contact dd input{
 padding : 12px;
 font-size:14px;
 border:1px solid #E5E5E5;
 color:#000;
 letter-spacing : 0.05em;
}

@media screen and (max-width: 568px) {
.bk-contact dd input{
 font-size:14px;
 padding : 8px;
}
}

.bk-contact dd textarea{
  font-size:14px;
  padding : 12px;
  border:1px solid #E5E5E5;
  font-size:0.95em;
  letter-spacing : 0.05em;
  color:#333;
  font-family: 'Roboto',Meiryo,sans-serif;
}

@media screen and (max-width: 568px) {
.bk-contact dd textarea{
  font-size:14px;
  padding : 8px;
}
}

.bk-contact dd .ws100{
  width:100%;
  box-sizing: border-box;
}


.bk-contact input[type=radio],.bk-contact input[type=checkbox] {
  display: none;
}

.bk-contact .id_tl{
  display: inline-block;
  padding: 5px 15px 0 0;
  vertical-align: middle;
}

.bk-contact .id_tx{
  display: inline-block;
  padding: 5px 0 0;
  vertical-align: middle;
}

.bk-contact .radio {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 8px 0 20px;
  border-radius: 8px;
  vertical-align: middle;
  cursor: pointer;
}

bk-contact .checkbox {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 8px 0 20px;
  vertical-align: top;
  cursor: pointer;
}

.bk-contact .radio:hover, .bk-contact .checkbox:hover {
  background-color:;
}

.bk-contact .radio:hover:after,.bk-contact .checkbox:hover:after {
  border-color:;
}

.bk-contact .radio:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 0px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #bbb;
  border-radius: 50%;
  content: '';
}

.bk-contact .radio:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 3px;
  display: block;
  margin-top: -5px;
  margin-left:2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
  content: '';
  opacity: 0;
}
.bk-contact input[type=radio]:checked + .radio:before {
  opacity: 1;
}

.bk-contact .form_col .ws100{
  width:100%;
}

.bk-contact .form_col .mbtm10{
  margin-bottom:10px;
}

.bk-contact .form_col textarea{
  padding : 15px;
  border:1px solid #FFF;
  cursor: pointer;
  font-size:0.95em;
  letter-spacing : 0.05em;
  font-family: 'Noto Sans Japanese', sans-serif;
  box-sizing: border-box;
}

.bk-contact .form_col input{
 padding : 15px;
 border:1px solid #FFF;
 color:#000;
 cursor: pointer;
 font-size:0.95em;
 letter-spacing : 0.05em;
 box-sizing: border-box;
 font-family: 'Noto Sans Japanese', sans-serif;
}

.bk-contact .send_bts {
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 810px) {
.bk-contact .send_bts {
  margin-bottom:5px;
}
}

@media screen and (max-width: 568px) {
.bk-contact .send_bts {
  margin-top:10px;
  margin-bottom:10px;
}
}

.bk-contact input.bconf_bt{
  padding:10px 0;
  line-height: 1.4;
  background : #000;
  color: #fff;
  display:block;
  border-style: none;
  cursor: pointer;
  font-size:1em;
  letter-spacing: 0.1em;
  width:100%;
}

@media screen and (max-width: 568px) {
.bk-contact input.bconf_bt{
  font-size:1em;
  padding:15px 25px;
}
}

.bk-contact input.bconf_bt:hover{
  filter:alpha(opacity=80);  /* for IE */
  -moz-opacity: 0.8;  /* for Firefox */
  opacity: 0.8;  /* for Safari or Opera */
}

.bk-contact input.breset_bt{
  padding:10px 15px;
  line-height: 1.4;
  background : #ACACAC;
  color: #fff;
  display:block;
  border-style: none;
  cursor: pointer;
  font-size:12px;
}

.bk-contact input.breset_bt:hover{
  opacity: 0.8;
}

@media screen and (max-width: 810px) {
.bk-contactinput.breset_bt{
  padding:8px 12px;
  font-size:11px;
}
}

.bk-contact input[type=checkbox] {
  display: none;
}

.bk-contact .checkbox {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 5px 8px 0;
  padding: 12px 12px 12px 50px;
  vertical-align: middle;
  cursor: pointer;
}

.bk-contact .checkbox:hover {

}

.bk-contact .checkbox:hover:after {
  border-color: #bbb;
}
.bk-contact .checkbox:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 10px;
  display: block;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  border: 2px solid #bbb;
  content: '';
  background:#FFF;
  z-index:0;
}

.bk-contact .checkbox:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 17px;
  display: block;
  margin-top: -7px;
  width: 7px;
  height: 10px;
  border-right: 3px solid #BF9B30;
  border-bottom: 3px solid #BF9B30;
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index:1;
}
.bk-contact input[type=checkbox]:checked + .checkbox:before {
  opacity: 1;
}

.bk-contact .aggt{margin:0;padding:0;}

.bk-contact .agtx{
  font-size:0.85em;
  line-height:1.2;
  color:#545454;
  letter-spacing: 0.05em;
}

.bk-contact .agtx a {
  text-decoration: underline;
  color: #000;
}

.bk-contact .agtx a:hover {
  color: #545454;
  text-decoration: none;
}

/* エリアページ
---------------------------------------------------------------------------*/
.erea-topimg {
  position: relative;
  width: 100%;
  height: 84vh;
  min-height: 400px;
  overflow:hidden;
}

#bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #FFF;
}

@media screen and (max-width: 810px) {
#bg {
  background-attachment: scroll;
}
}

.erea-topimg #block {
  width:100%;
  height: 100%;
  position: relative;
  background: linear-gradient(to right, rgba(000, 000, 000, 0.6), rgba(000, 000, 000, 0));
  z-index:1;
}

.erea-topimg #top_row {
  width: 100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding:30px;
  z-index:2;
}

@media screen and (max-width: 568px) {
.erea-topimg #top_row {
  padding:20px 30px 0;
}
}

.erea-topimg h2{
  letter-spacing:.1em;
  font-weight:400;
  font-size:2.4em;
  color:#FFF;
  text-align: center;
}

@media screen and (max-width: 810px) {
.erea-topimg h2{
  font-size:2em;
  line-height:1.5;
}
}

@media screen and (max-width: 568px) {
.erea-topimg h2{
  font-size:1.4em;
  margin-bottom:5px;
}
}

/* .danang-box
================================================== */
.danang-box{
  width:100%;
  padding:3% 1%;
  box-sizing: border-box;
  color:#FFF;
  max-width:1580px;
  margin:0 auto;
}

@media screen and (max-width: 810px) {
.danang-box{
  padding:3%;
}
}

.danang-box .dantx{
  padding:1% 10px 1%;
  text-align: center;
  line-height: 2;
  font-weight:400;
}

@media screen and (max-width: 568px) {
.danang-box .dantx{
  text-align: left;
  line-height: 1.8;
  font-size:0.95em;
}
}

.danang-box img{
  width:auto;
  max-width:100%;
  height:auto;
  margin:1.5% auto;
}

/* .danang-erea-box
================================================== */
.danang-erea-box{
  width:100%;
  padding:2% 1%;
  box-sizing: border-box;
}

.danang-erea-box .dan-ttl{
  padding:1% 2%;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-weight:500;
  font-size:1.45em;
}

@media screen and (max-width: 810px) {
.danang-erea-box .dan-ttl{
  font-size:1.2em;
}
}

.danang-erea-box .dantx{
  padding:1% 2%;
  text-align: left;
  line-height: 2;
  font-family: 'Noto Serif JP', serif;
  font-weight:400;
  font-size:1.05em;
}

@media screen and (max-width: 568px) {
.danang-erea-box .dantx{
  text-align: left;
  line-height: 1.8;
  font-size:1em;
}
}

.danang-erea-ph{
  margin:1.5% auto 4%;
}

.danang-erea-ph img{
  width:auto;
  max-width:100%;
  height:auto;
}

.danang-erea-box table{
  width : 100%;
  margin : 2% auto;
  max-width:600px;
  background: #FFF;
  border-top : solid 1px #ccc;
  border-left : solid 1px #E0E0E0;
  border-right : solid 1px #E0E0E0;
  font-size:14px;
  box-sizing: border-box;
  line-height:1.6;
}

@media screen and (max-width: 568px) {
.danang-erea-box table{
  font-size:13px;
}
}

.danang-erea-box td{
  padding : 14px 1% 10px 2.5%;
  box-sizing: border-box;
  width:60%
  color : #000000;
  border-bottom : solid 1px #E0E0E0;
  text-align : left;
}

.danang-erea-box th{
  color : #000;
  border-bottom : solid 1px #E0E0E0;
  border-right : solid 1px #E0E0E0;
  text-align : center;
  font-weight:normal;
  padding : 14px 5px 10px;
  background : #FBFBFB;
  box-sizing: border-box;
 width:40%;
}

@media only screen and (max-width: 568px)  {
.danang-erea-box td{
  padding : 10px 5px 6px 2.5%;
  width:50%;
  text-align : left;
}

.danang-erea-box th{
  padding : 10px 5px 6px;
  width:50%;
}
}

.danang-erea-box td p{
  margin:5px 0;
}

.danang-erea-box ul{
  width:100%;
  max-width:800px;
  margin:2% auto;
}

.danang-erea-box li{
  width:50%;
  display:inline-block;
  vertical-align:top;
  text-align: center;
  box-sizing: border-box;
  padding:2% 1%;
  font-size:14px;
}

@media only screen and (max-width: 568px)  {
.danang-erea-box li{
  font-size:13px;
}
}

.danang-erea-box li img{
  width:100%;
  height:auto;
  margin:0 0 10px;
}

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

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

@media screen and (max-width: 810px) {
.area-box{
  padding: 3% 4%;
}
}

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

.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;
}
}

.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: 59%;
  left: 48%;
}

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

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

@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: 14%;
}
}

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

.area-box .csite-leftv .Lien-Chieu{
  position: absolute;
  top: 41%;
  left: 28%;
}

.area-box .csite-leftv .Cam-Le{
  position: absolute;
  top: 70%;
  left: 44%;
}

.area-box .csite-leftv .Thanh-Khe{
  position: absolute;
  top: 49.5%;
  left: 38%;
}

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

.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: 800px) {
.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;
}
}

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

.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;
}
}

@media screen and (max-width: 568px) {
.form_search{
  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: 810px) {
.form_search dt{
  width: 34%;
  padding:1.5% 3% 1.5% 0;
}
.form_search dt p{
 font-size: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: 810px) {
.form_search dd{
  width: 66%;
}
}

@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;
}


/* ランディングページ
---------------------------------------------------------------------------*/
.sub-topimg {
  position: relative;
  width: 100%;
  height: 84vh;
  min-height: 400px;
  overflow:hidden;
}

.sub-tbg {
  width: 100%;
  height:auto;
  min-height: 100%;
  display: block;
  position: relative;
  z-index:0;
}

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

#sl_row {
  width: 30%;
  height:auto;
  position: absolute;
  top: 0;
  left: 8%;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  z-index: 2;
}

@media screen and (max-width: 1580px) {
#sl_row {
  width: 40%;
}
}

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

.sld-text {
  color: #fff;
  position: relative;
  width:100%;
  margin:0;
}

.sld-text h2{
  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 h2{
  font-size:1.6em;
  margin-bottom:10px;
  line-height:1.5;
}
}

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

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

@media screen and (max-width: 568px) {
.sld-text .catch{
  font-size:13px;
  line-height:1.7;
}
}

/* #landing-syousai
--------------------------------------------------*/
#landing-syousai{
  width:100%;
  display:block;
  box-sizing: border-box;
  padding:1% 4% 3%;
}

@media screen and (max-width: 1580px) {
#landing-syousai{
  padding:0 3% 4%;
}
}

@media screen and (max-width: 810px) {
#landing-syousai{
  padding:4% 1% 2%;
}
}

.land-top{
  width:100%;
  margin:0 auto;
}

/* land-top */

.land-top-box{
  width:100%;
  box-sizing: border-box;
  margin:0 auto;
  padding:1% 2% 2%;
  text-align: center;
}

@media screen and (max-width: 810px) {
.land-top-box{
  padding:1% 02%;
}
}

.land-top h3{
  letter-spacing:.3em;
  font-weight:400;
  font-weight:300;
  text-transform: uppercase;
  font-size:1.6em;
  margin-bottom:20px;
  line-height:1.6;
  color:#FFF;
}

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

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

.land-top .ldtx{
  margin-bottom:10px;
  letter-spacing:0em;
  letter-spacing:.05em;
  font-weight:400;
  font-size:14px;
  line-height:2;
  color: #ACACAC;
}

@media screen and (max-width: 568px) {
.land-top .ldtx{
 text-align: left;
 line-height:1.8;
 padding:0 5%;
}
}

.land-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) {
.land-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;background-color:#FFF;border:1px solid #FFF;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}
.land-buttons a{text-decoration:none;}
.land-buttons 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) {
.stx-button.c-button--ghost{
  padding:10px 40px;
}
}

/* box2タイプ */

#landing-syousai .box2{
  width:100%;
  margin:5% 0 0;
  text-align: center;
}

#landing-syousai .box2 li{
  width:45%;
  margin:0 2.5%;
  display:inline-block;
  position: relative;
  vertical-align: top;
}

@media screen and (max-width: 810px) {
#landing-syousai .box2 li{
  width:47%;
  margin:0 1.5%;
}
}

@media screen and (max-width: 568px) {
#landing-syousai .box2 li{
  width:94%;
  display:block;
  margin:2% auto;
}
}

#landing-syousai .box2 .lnd-photo{
  width:100%;
  position: relative;
  display:block;
  overflow: hidden;
}

#landing-syousai li img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  -webkit-transition: -webkit-transform 500ms;
  transition: transform 500ms;
}
#landing-syousai li:hover img {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

#landing-syousai .box2 .lnd-photo img{
  width:100%;
  height:auto;
}

#landing-syousai .box2 .lnd-text{
  width:100%;
  padding:2% 4%;
  box-sizing: border-box;
  text-align: left;
  font-size:14px;
  color: #ACACAC;
}

@media screen and (max-width: 810px) {
#landing-syousai .box2 .lnd-text{
  padding:2% 1%;
}
}

#landing-syousai .box2 .lnd-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: 1280px) {
#landing-syousai .box2 .lnd-text h3{
  font-size:1.35em;
  margin-bottom:5px;
}
}

@media screen and (max-width: 568px) {
#landing-syousai .box2 .lnd-text h3{
  font-size:1.3em;
  margin-bottom:5px;
}
}

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

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

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

.lnd-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;
}

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

.lnd-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;
}

/* bg-grayタイプ */

/* .gray-box
--------------------------------------- */
.gray-box{
  width:100%;
  padding: 4.5% 0;
  position: relative;
  background:#F5F5F5;
}

@media screen and (max-width: 1580px) {
.gray-box{
  padding: 4.5% 4%;
  box-sizing: border-box;
}
}

.gry-ph{
  display: inline-block;
  width:50%;
  vertical-align: middle;
}

@media screen and (max-width: 810px) {
.gry-ph{
  display: block;
  width:100%;
  box-sizing: border-box;
  padding:2% 1%;
}
}

@media screen and (max-width: 568px) {
.gry-ph{
  padding:2% 0%;
}
}

.gry-ph img{
  width:100%;
  height:auto;
}

.gry-txt{
  display: inline-block;
  width:50%;
  vertical-align: middle;
  box-sizing: border-box;
  text-align: left;
  padding-left:5%;
}


@media screen and (max-width: 810px) {
.gry-txt{
  display: block;
  width:100%;
  box-sizing: border-box;
  padding:2% 2% 0;
}
}

@media screen and (max-width: 568px) {
.gry-txt{
  padding:2% 1% 0;
}
}


.gry-tx p{
  width:100%;
  padding:2% 5px;
  font-size:14px;
  color:#333;
}

@media screen and (max-width: 1280px) {
.gry-tx p{
  padding:1% 5px;
}
}

.gry-txt h4{
  letter-spacing:.1em;
  font-weight:300;
  text-transform: uppercase;
  font-size:1.4em;
  margin-bottom:10px;
  color:#000;
}

@media screen and (max-width: 1280px) {
.gry-txt h4{
  font-size:1.35em;
  margin-bottom:5px;
}
}

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

/* box3
--------------------------------------- */
#box3{
  width:100%;
  display:block;
  box-sizing: border-box;
  padding:4% 4% 3%;
  border-top:1px solid #E5E5E5;
}

@media screen and (max-width: 1580px) {
#box3{
  padding:4% 3% 4%;
}
}

@media screen and (max-width: 1280px) {
#box3{
  padding:3% 2% 3%;
}
}

.list-ttl{
  letter-spacing:.1em;
  display:block;
  font-weight:400;
  font-size:1.8em;
  font-family: 'Noto Serif JP', serif;
  padding-bottom:25px;
  padding-left:1%;
  text-transform: uppercase;
}

#box3 li {
  width: 33.3333%;
  padding:14px;
  display:inline-block;
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
}

@media screen and (max-width: 810px) {
#box3 li {
  width: 50%;
  padding:10px;
}
}

@media screen and (max-width: 568px) {
#box3 li {
  width: 100%;
  padding:10px 4% 0;
}
}

.b3-item {
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

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

.b3_photo img{
  width:auto;
  height:370px;
  margin:auto;
}

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

.b3_photo img{
 height:300px;
}
}

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

.b3_photo img{
  height:220px;
}
}


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

.b3_photo img{
 height:260px;
}
}

.b3_photo .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;
}

.b3_photo:hover{
  filter:alpha(opacity=80);  /* for IE */
  -moz-opacity: 0.8;  /* for Firefox */
  opacity: 0.8;  /* for Safari or Opera */
}

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

@media screen and (max-width: 1280px) {
.b3_text {
  padding:10px 2%;
}
}

@media screen and (max-width: 810px) {
.b3_text {
  padding:5px 1%;
}
}


.b3_name {
  line-height:1.6;
  color:#FFF;
  text-align: left;
}

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

.b3_txt {
  font-size:14px;
  line-height:1.6;
  letter-spacing:0;
  color: #ACACAC;
  padding:10px 0 0;
}


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

/* お問い合わせ */

/* .land-contact
--------------------------------------- */
.land-contact{
  width:100%;
  padding: 4.5% 0;
  position: relative;
}

@media screen and (max-width: 1580px) {
.land-contact{
  padding: 4.5% 4%;
  box-sizing: border-box;
}
}

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

#bgry{
  background:#F5F5F5;
}

.lcon-ph{
  display: inline-block;
  width:50%;
  vertical-align: middle;
}

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

.lcon-ph img{
  width:100%;
  height:auto;
}

.lcon-txt{
  display: inline-block;
  width:45%;
  vertical-align: middle;
  box-sizing: border-box;
  text-align: left;
  margin-right:5%;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
  text-align: center;
  padding:3.5%;
}

@media screen and (max-width: 810px) {
.lcon-txt{
  display: block;
  width:100%;
  margin-right:0;
  margin-bottom:5%;
}
}

.lcon-tx p{
  width:100%;
  padding:2% 5px;
  font-size:14px;
  color:#333;
}

.lcon-txt h5{
  letter-spacing:.1em;
  font-weight:300;
  text-transform: uppercase;
  font-size:1.4em;
  margin-bottom:10px;
  color:#000;
}

.ludln{
  border-bottom:1px solid #000;
  height:1px;
  width:70px;
  margin: 0 auto 4%;
}


@media screen and (max-width: 568px) {
.ludln{
  margin: 0 auto 15px;
}
}

.lcon-txt dl{
  width:100%;
  max-width:300px;
  display:block;
  padding:8px 0;
  margin:0 auto;
}

@media screen and (max-width: 1580px) {
.lcon-txt dl{
  padding:4px 0;
}
}

.lcon-txt dt{
  vertical-align: top;
  display: inline-block;
  width:15%;
  font-size:1.2em;
  text-align: center;
}

.lcon-txt dd{
  vertical-align: top;
  display: inline-block;
  width:85%;
  padding:5px 0 0 5%;
  box-sizing: border-box;
  text-align: left;
}

.lcon-txt a{text-decoration:none;color:#000;}
.lcon-txt a:hover{text-decoration:none;color:#C80000;}

.lcon-txt .social-icon{
  width:100%;
  margin: 5% auto 0;
  text-align: center;
}

@media screen and (max-width: 1580px) {
.lcon-txt .social-icon{
  margin: 3% auto 0;
}
}

.lcon-txt .social-icon li{
  vertical-align: top;
  display: inline-block;
  margin:10px;
  font-size:1.4em;
}

@media screen and (max-width: 1580px) {
.lcon-txt .social-icon li{
  margin:10px 10px 0;
}
}

/* エラー画面他
================================================== */
.tkmain td,.tkmain th { font-size:80%; background:#f0f0f0; color:#000; }
p.msg { color:#CC2931; }
span.msg { color:#CC2931;line-height:1.6; }
.tkmain { text-align:center;width:100%;max-width:350px;margin:2% auto; }
.ckmain { text-align:center;width:100%;margin:2% auto; }
.wt350 { width:100%;border-top:1px solid #FFF;clear:both;padding:5% 0;}
.ered {color:#CC0404;line-height:2;}
.tkttl{margin-bottom:10px;color:#CC2931;}
.tkttext{font-size:14px;margin-bottom:10px;line-height:1.8;}
.ckttl{margin-bottom:10px;color:#CC2931;}
.ckttext{margin-bottom:10px;}

/* #conform_box
================================================== */
#conform_box {
  width:100%;
  padding:1.5% 2% 7%;
  max-width:950px;
  box-sizing: border-box;
  margin:0 auto;
  text-align: center;
}

@media screen and (max-width: 800px) {
#conform_box {
  padding:5% 2% 7%;
}
}

#conform_box h1{
  font-family: 'Noto Serif JP', serif;
  font-weight:400;
  font-size:1.8em;
  margin-bottom:15px;
  color:#FFF;
  line-height:1.5;
  text-align: center;
}

@media screen and (max-width: 568px) {
#conform_box h1{
  font-size:1.2em;
}
}
#conform_box h2{
  font-family: 'Noto Serif JP', serif;
  font-weight:400;
  font-size:1.8em;
  margin-bottom:15px;
  color:#FFF;
  line-height:1.5;
  text-align: center;
}

@media screen and (max-width: 568px) {
#conform_box h2{
  font-size:1.2em;
}
}

#conform_box p{
  color:#FFF;
}

#conform_box #form {
  border-collapse: collapse;
  margin: 30px 0;
  width:100%;
}

@media screen and (max-width: 568px) {
#conform_box #form {
  margin: 20px 0;
}
}

#conform_box #form th, #form td {
  border: 1px solid #666;
  padding: 8px;
}
#conform_box #form th {
  white-space: nowrap;
  background: #e8e8e8;
}

@media screen and (max-width: 800px) {
#conform_box #form th {
  font-size:14px;
}
}

@media screen and (max-width: 568px) {
#conform_box #form th {
  font-size:13px;
}
}

#conform_box #form td {
  background: #fff;
  text-align: left;
}

@media screen and (max-width: 568px) {
#conform_box #form td {
  font-size:14px;
}
}
.msend_bt{
  text-align: center;
  margin-top:20px;
}

.msend_bt input{
  padding:10px 15px;
  line-height: 1.4;
  background : #FFF;
  color: #000;
  display:inline-block;
  border-style: none;
  cursor: pointer;
  font-size:1em;
  letter-spacing : 0.02em;
}

.msend_bt input:hover{
  opacity: 0.7;
}

.mssend_bt{
  text-align: center;
  margin-top:20px;
}

.mssend_bt input{
  padding:10px 15px;
  line-height: 1.4;
  background : #FFF;
  color: #000;
  display:inline-block;
  border-style: none;
  cursor: pointer;
  font-size:0.95em;
  letter-spacing : 0.02em;
}

.mssend_bt input:hover{
  opacity: 0.7;
}
.send_bt {
  width: 100%;
  margin-top:30px;
  text-align: center;
}

@media screen and (max-width: 568px) {
.send_bt {
  margin-top:15px;
}
}

.send_bt li{
  display:inline-block;
  margin:0 5px;
}

input.conf_bt{
  padding:15px 30px;
  line-height: 1.4;
  background : #BF9B30;
  color: #fff;
  display:block;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  border-style: none;
  cursor: pointer;
  font-size:1.1em;
  letter-spacing : 0.02em;
}

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

input.conf_bt:hover{
  opacity: 0.8;
}

input.reset_bt{
  padding:10px 15px;
  line-height: 1.4;
  background : #ACACAC;
  color: #fff;
  display:block;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  border-style: none;
  cursor: pointer;
  font-size:0.9em;
  letter-spacing : 0.02em;
}

@media screen and (max-width: 800px) {
input.reset_bt{
  padding:8px 12px;
  font-size:14px;
}
}

input.reset_bt:hover{
  opacity: 0.7;
}