@charset "utf-8";
/*  */
*{scroll-behavior: smooth;}
.main{background: #fff;}
.main-bg{
  background: url('../img/top/bg.jpg');
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  padding-bottom: 100px;
  background-attachment: fixed;
}
.title-page .title_jp {
  font-size: min(3.6vw,3.6rem);}
.title-page{margin: 0;}
.title-page{background: linear-gradient(to right, #7c6e61,#53493f);}
.title-page .title_en{font-size: 2rem;margin: 15px 0 20px;}
.tit-box{color: #796a56;text-align: center;padding: 10px 0;background: linear-gradient(to right, #7c6e61 50%,#53493f 100%);position: relative;}
.tit-box::after{content: "";position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(255, 255, 255, 0.5);z-index: 1;}
.tit-box span{position: relative;z-index: 2;font-size: 2.2rem;letter-spacing: 0.1em;font-family: "Copperplate";font-weight: 500;}
.txt-intro{background: #fff;text-align: center;padding: 40px 0 60px;}
.txt-intro h3{font-size: 3.2rem;font-weight: 500;margin: 0 0 40px;}
.txt-intro p{font-size: 1.8rem;line-height: 2;font-weight: 500;}

/*  */
.box-type{padding: 100px 0;background: linear-gradient(to right, rgba(124, 110, 97,0.2),rgba(83, 73, 63,0.2));}
.box-type .tit-box-type{font-size: 2.6rem;text-align: center;font-weight: 500;margin: 0 0 35px;}
/* .box-type  */

.list-obi{display: flex;justify-content: space-between;flex-wrap: wrap;margin: 0 0 80px;}
.list-obi li{width: 24%;background: linear-gradient(to right, rgba(124, 110, 97,0.85),rgba(83, 73, 63,0.85));text-align: center;color: #fff;font-weight: 500;font-size: 2.4rem;align-content: center;line-height: 1.4;padding: 15px 0;letter-spacing: 0.1em;}

.map-cnt{max-width: 464px;margin: 0 auto;position: relative;}
.map-cnt .img-abs{position: absolute;bottom: 1em;right: -4em;}
.map-type.map-type{position: relative;}
.map-type.map-type-detail .img-abs{bottom: 1em;right: -3em;position: absolute;}
.list-type{display: flex;justify-content: space-between;flex-wrap: wrap;margin: 60px 0 0;}
.list-type .type-obi{width: 48%;background: #fff;border: 2px solid #c8bb9b;padding: 20px 40px;transition: all 0.3s;}
.list-type .type-obi:hover{background: #fff7eb;}
.list-type .type-obi .type-head{display: flex;align-items: flex-end;justify-content: center;width: fit-content;margin: 0 auto 0px;padding: 0 0 15px;border-bottom: 2px solid #000;}
.list-type .type-obi .type-head .name-type{font-size: 4rem;font-weight: 500;line-height: 1.4;padding-right: 10px;margin-right: 20px;border-right: 4px solid #c8bb9b;}
.list-type .type-obi .type-head .name-type span{font-size: 0.48em;line-height: 1;}
.list-type .type-obi .type-head .txt-type{font-size: 3rem;line-height: 1.4;}
.list-type .type-obi .type-head .txt-type span{font-size: 0.86em;}
.list-type .type-obi .type-info{text-align: center;display: flex;align-items: center;justify-content: center;margin: 10px 0 0;gap: 10px;}
.list-type .type-obi .type-info-name{font-size: 1.8rem;line-height: 1;padding: 8px 0 0 ;font-weight: 500;}
.list-type .type-obi .metter-txt{font-size: 4rem;line-height: 1;font-weight: 500;}

.type-detail{padding: 120px 0;max-width: 1200px;
  margin: 0 auto;}
  .type-d{border-bottom: 1px solid #000;}
.type-detail .intro-type{font-size: 2.8rem;text-align: center;margin:  0 0 40px;font-weight: 500;}
.type-inner{display: flex;justify-content: space-between;flex-wrap: wrap;max-width: 750px;margin: 0 auto 60px;}
.type-inner .type-info{width: 40%;padding: 20px 0;background:linear-gradient(to right, rgba(124, 110, 97,0.2),rgba(83, 73, 63,0.2)) ;text-align: center;align-content: center;}
.type-inner .type-more{width: 60%;background: #fff;align-content: center;padding: 0 40px;font-weight: 500;padding-right: 0;}
.type-inner .type-name{font-size: 6rem;line-height: 1;font-weight: 500;width: fit-content;margin: 0 auto 5px;padding: 0 15px 5px;border-bottom: 3px solid #fff;}
.type-inner .type-name span{font-size: 1.8rem;line-height: 1.5;display: block;}
.type-inner .txt-type{font-size: 3rem;font-weight: 500;}
.type-inner .txt-type span{font-size: 0.8em;}
.type-inner .type-more .metter {text-align: center;display: flex;justify-content: flex-start;align-items: center;gap: 10px;max-width: 320px;margin: 0 auto;}
.type-inner .type-more .metter .txt-metter{font-size: 1.8rem;padding-bottom: 5px;}
.type-inner .type-more .metter .num-metter{font-size: 4.2rem;line-height: 1;}
.type-inner .type-more .metter .num-metter .num{font-size: 6rem;line-height: 1;}
.type-inner .type-more .metter .num-metter small{display: block;font-size:2rem;text-align: left;line-height: 1.6;}
.type-inner .type-more ul{margin: 20px auto 0;font-size: 1.6rem;  padding-left: calc(50% - 160px);}

.type-detail .list-txt{max-width: 750px;margin: 0 auto 60px;display: flex;justify-content: space-between;flex-wrap: wrap;}
.type-detail .list-txt .txt-more{width: 49%;border-left: 4px solid #c8bb9b;font-weight: 500;padding:15px 20px ;font-size: 1.7rem;}
.type-detail .type-note{display: flex;justify-content: center;align-items: center;margin: 40px 0 0;gap: 20px;flex-wrap: wrap;}
.type-detail .type-note li{display: flex;align-items: center;gap: 5px;font-size: 1.2rem;font-weight: 500;}

.box-item{padding: 50px 50px 20px;background: #fff;}
.box-item .tit-box-item{font-size: 2.2rem;font-weight: 600;text-align: center;padding: 40px 0;border-top: 1px solid #796a56;color: #796a56;letter-spacing: 0.1em;}
.box-item  .list-item{display: flex;justify-content: space-between;flex-wrap: wrap;row-gap: 30px;padding: 0 0 40px;border-bottom: 1px solid #796a56;}
.box-item  .list-item .col-item{width: 48%;display: flex;justify-content: space-between;flex-wrap: wrap;}
.box-item  .list-item .col-item-flex .item{width: 46%;}
.box-item  .list-item .item.item01 .item-ttl,.box-item  .list-item .item.item02 .item-ttl{font-size: 2.2rem;font-weight: 600;}
.box-item  .list-item .item .item-ttl{font-size: 1.8rem;text-align: center;color:#796a56;padding: 10px 0 5px;}
.box-item  .list-item .item p{font-weight: 500;font-size: 1.5rem;}
.note-type{width: 100%;}
.note-type p{font-size: 1.2rem;}
.note-item{font-size: 1.2rem;margin:10px 0 0;line-height: 1.5;}
.w-full img{width: 100%;}
.w-full.is-view {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.w-full {
  opacity: 0;
  filter: blur(16px);
  transform: scale(1.03);
  transition: opacity 1.2s ease-out, filter 1.6s ease-out, transform 1.6s ease-out;
}
.text-shadow-w{color: #fff;text-shadow:0 0 0.1rem rgba(0,0,0,.2), 0 0 0.2rem rgba(0,0,0,.2), 0 0 0.3rem rgba(0,0,0,.2), 0 0 0.4rem rgba(0,0,0,.2), 0 0 0.5rem rgba(0,0,0,.2), 0 0 0.6rem rgba(0,0,0,.2), 0 0 0.7rem rgba(0,0,0,.2), 0 0 0.8rem rgba(0,0,0,.2), 0 0 0.9rem rgba(0,0,0,.2), 0 0 1rem rgba(0,0,0,.2) ;}
.text-shadow-bl{color: #000;text-shadow:0 0 0.1rem rgba(255,255,255,.5), 0 0 0.2rem rgba(255,255,255,.5), 0 0 0.3rem rgba(255,255,255,.5), 0 0 0.4rem rgba(255,255,255,.5), 0 0 0.5rem rgba(255,255,255,.5), 0 0 0.6rem rgba(255,255,255,.5), 0 0 0.7rem rgba(255,255,255,.5), 0 0 0.8rem rgba(255,255,255,.5), 0 0 0.9rem rgba(255,255,255,.5), 0 0 1rem rgba(255,255,255,.5) ;}
@media screen and (min-width: 1121px){
.type-d .map-type.map-type-detail .img-abs{bottom: 7em;}

}
@media screen and (max-width: 1120px){
    .map-type.map-type-detail .img-abs{bottom: -40px;width: 30px;right: 0;}
}
@media screen and (max-width: 768px){
  .title-page img{width: 60px;}
  .title-page .title_en{font-size: 1.6rem;}
  .tit-box span{font-size: 1.8rem;}
  .main-bg{padding-bottom: 60px;}
  .txt-intro{padding: 40px 0;}
  .txt-intro h3{font-size: 2.4rem;line-height: 1.5;margin: 0 0 20px;}
  .txt-intro p{font-size: 1.4rem;line-height: 2;letter-spacing: -0.05em;}
  .scroll-sp img{max-width: unset;width: 801px;}
  .scroll-hint-icon{background: transparent;top: 0;width: 100%;left: 0;}
  .scroll-hint-icon:before{background-image: url('../img/common/scroll01.svg');width: 42px;height: 53px;top: 20px;position: relative;}
  .scroll-hint-icon::after{background-image: url('../img/common/scroll02.svg');width: 55px;height: 11px;left: 47.5%;top: 40px;}
  .scroll-hint-text{font-size: 1.4rem;position: absolute;top: 5px;width: 100%;;text-align: center;}
  .list-obi li{width: 49%;font-size: 1.5rem;min-height: 65px;margin-bottom: 2%;padding: 0;}
  .box-type{padding: 40px 0;}
  .box-type .tit-box-type{font-size: 2.2rem;}
  .list-obi{margin: 0 0 60px;}
  .list-type .type-obi{width: 100%;padding: 20px;}
  .list-type{row-gap: 20px;}
  .list-type .type-obi .type-head .txt-type{font-size: 2rem;line-height: 1;padding-bottom: 5px;}
  .box-item  .list-item .col-item-flex .item{width: 48%;}
  .list-type .type-obi .type-head .name-type{font-size: 3.4rem;margin-right: 10px;line-height: 1;padding-bottom: 5px;}
  .list-type .type-obi .metter-txt{font-size: 3.4rem;}
  .list-type .type-obi .type-info-name{font-size: 1.4rem;}
  .type-detail .intro-type{font-size: 2.2rem;font-weight: 500;margin: 0 0 20px;}
  .type-detail{padding: 60px 0;}
    .type-inner{position: relative;}
    .note-type{position: absolute;right: 10px;top: 88px;text-align: right;}
    .note-type p{font-size: 1rem;}
  .type-inner .type-info{width: 100%;display: flex;align-items: center;padding: 20px;justify-content: center;}
  .type-inner .type-name{border-bottom: none;border-right: 3px solid #fff;font-size: 4rem;margin: 0 20px 0 0;padding-right: 20px;padding-left: 0;}
  .type-inner .type-name span{font-size: 1.6rem;}
  .type-inner .txt-type{font-size: 2.4rem;}
  .type-inner .type-more{width: 100%;padding: 20px;}
  .type-inner{margin: 0 0 30px;}
  .type-inner .type-more .metter{align-items: center;justify-content: center;width: fit-content;max-width: unset;}
  .type-inner .type-more .metter .num-metter .num{font-size: 9vw;}
  .type-inner .type-more .metter .num-metter{font-size: 2.6rem;}
  .type-inner .type-more .metter .txt-metter{font-size: 1.4rem;padding-bottom: 0;}
  .type-inner .type-more .metter .num-metter small{font-size: 1.6rem;display: inline-block;}
  .type-inner .type-more ul {width: fit-content;font-size: 1.3rem;padding-left: 0;}
  .type-detail .list-txt .txt-more{width: 100%;margin: 0 15px 20px;padding: 5px 0 5px 15px;font-size: 1.4rem;}
  .box-item .list-item .item p{font-size: 1.4rem;}
  .type-detail .list-txt{margin: 0 0 30px;}
  .type-detail .type-note{flex-wrap: wrap;justify-content: flex-start;margin: 60px 0 0;padding: 0 20px;row-gap: 10px;}
  .map-type.map-type-detail .img-abs{bottom: -40px;width: 30px;right: 0;}
  .box-item{padding: 20px;}
  .box-item .tit-box-item{font-size: 2rem;padding: 20px 0;line-height: 1.5;}
  .box-item .list-item .col-item{width: 100%;}
  .box-item .list-item .item.item01 .item-ttl, .box-item .list-item .item.item02 .item-ttl{font-size: 1.8rem;font-weight: 600;}
  .box-item .list-item .item .item-ttl{line-height: 1.6;}
  .title-page .title_jp{margin: 40px 0 0;font-size: 6vw;}
} 
@media screen and (max-width: 600px){
  .map-cnt .img-abs{bottom: -40px;right: 0;width: 30px;}
}
@media screen and (max-width: 576px){
    .scroll-hint-icon::after{left: 46%;}

}

.btn-more{max-width: 354px;text-align: center;color: #fff;font-size: min(2.2vw,2.2rem);height: 68px;align-content: center;margin: 0 auto;display: block;}
@media screen and (max-width: 768px){
  .btn-more{font-size: 1.6rem;height: 60px;letter-spacing: 0;}
}
.btn-more-brd{border: 1px solid #fff;position: relative;margin: 40px auto 10px;background: transparent;transition: all 0.4s;}
.btn-more-brd::before{position: absolute;content: "";width: 0%;height: 100%;top:0;left: 0;background: #fff;z-index: 1;transition: all 0.4s;}
.btn-more-brd:hover::before{width: 100%;}
.btn-more-brd:hover{color: #134663;}
.btn-more-brd::after{position: absolute;content: "";}
.btn-more-brd span{position: relative;z-index: 2;}
.btn-more-brd.coming-btn{pointer-events: auto;cursor: default;}
.btn-more-brd.coming-btn span{transition: opacity 0.3s;}
.btn-more-brd.coming-btn::after{
  content: "COMING SOON";
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-more-brd.coming-btn:hover span{opacity: 0;}
.btn-more-brd.coming-btn:hover::after{opacity: 1;}
.box-btn {margin: 60px auto 0;text-align: center;background: #134663;padding: 40px 0;}
.box-btn h3{font-size: 2.2rem;
  text-align: center;color: #fff;
  font-weight: 500;}
@media screen and (max-width: 768px){
  .box-btn h3{font-size: 1.6rem;line-height: 1.8;}
  .box-btn {padding: 20px 20px 10px;margin: 40px auto 0;}
  .btn-more-brd{margin: 20px auto;}
}