@charset "UTF-8";

/*=== 共通 ===*/
.f-40{font-size: 40%;}
.contents { overflow: hidden; }
.contents figure {
position: relative;
height: fit-content;
}
.contents img {
width: 100%;
}

.bg {
background: #111;
}
.bg02 {
background: url(../img/bg02.jpg) repeat-y top center;
background-size: cover;
}


#main_Wrap {
position: relative;
z-index: 1;
}
#main_Wrap figcaption{
color: #808080;
}

.point_box {
padding: 20px 0 20px;
background: rgb(7,7,7);
background: linear-gradient(130deg, rgba(7,7,7,1) 0%, rgba(46,46,46,1) 50%, rgba(7,7,7,1) 100%);
}
.point_box .inner {

}
.point_box figure {
width: 94%;
max-width: 1340px;
margin: 0 auto;
}
.kokuti_box {
padding: 20px 0 20px;
background: rgb(7,7,7);
background: linear-gradient(130deg, #002757 0%, #00397e 50%, #002757 100%);
}
.kokuti_box figure{
width: 94%;
max-width: 609px;
margin: 0 auto;
}
.kokuti_box ul{
display: flex;
flex-wrap: wrap;
width: fit-content;
max-width: 94%;
color: #fff;
font-size: 11px;
line-height: 1.4;
text-align: left;
margin: 1.8em auto 0;
padding-left: 1em;
text-indent: -1em;
}
.kokuti_box ul li{
display: inline-block;
}
.kokuti_box p{
color: #fff;
text-align: center;
font-size: clamp(26px,4.5vw,54px);
letter-spacing: 0.1em;
}
.kokuti_box p.note{
width: 94%;
padding-top: 1em;
font-size: 10px;
text-align: center;
margin: 0 auto;
line-height: 1.4;
padding-left: 1em;
text-indent: -1em;
}

/*=== 個別 ===*/
.sec01 {
padding: 80px 0 100px;
}

/* ul.point_Area {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
ul.point_Area li {
width: calc((100% - 3%) / 3);
margin-bottom: 1.5%;
} */



.teiki_Area {
padding: 50px 0 80px;
text-align: center;
font-family: "游明朝 Medium", YuMincho Medium , "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
color:#FFF;
}
.teiki_Area p {
font-size: clamp(30px,3.8vw,46px);
line-height: 1.6;
letter-spacing: 0.18em;
font-feature-settings: "palt";
}
.teiki_Area p span.f-50{
letter-spacing: 0.18em;
}
.teiki_Area p span.space{
display: inline-block;
padding:0 0.05em;
}

.teiki_Area .btn_request {
padding: 50px 0 0;
width:430px;
margin:0 auto;
}
.teiki_Area .btn_request a {
display: block;
position: relative;

color:#FFF;
font-size: clamp(14px, calc(10.444444444444445px + 0.4629629629629629vw), 16px);
letter-spacing: 0.12em;
padding: 20px 0;
background: rgb(192,176,143);
background: linear-gradient(145deg, rgba(192,176,143,1) 0%, rgba(139,125,92,1) 100%);
border: 1px solid;
border-image: linear-gradient(to right, #d9c8a3, #7a6c4c);
border-image-slice: 1;

transition: .3s;
}
.teiki_Area .btn_request a .arrow {
position: absolute;
top: 40%;
right: 20%;

width: 30px;
height: 8px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
transform: skew(45deg);
transition: .3s;
}
.teiki_Area .btn_request a:hover .arrow {
transition: .3s;
right: 18%;
}

/* information */
.info_Wrap {
margin: 0 auto 0;
max-width: 800px;
width:94%;
}
.info_Wrap h3 {
font-size: 18px;
color: #FFF;
font-weight: 900;
letter-spacing: 0.16em;
/* padding-bottom: 10px;
border-bottom: 1px solid #d8c7a2; */
padding: 0 70px;
margin-bottom: -10px;
}
.info_Wrap .info_Box {
--bg-gradient: linear-gradient(#d8c7a2 0 100%);
margin: 0.5rem;
/*  padding: 1.5rem;*/
padding: 1.5rem 1.5rem 0rem;
background-image:
var(--bg-gradient),
var(--bg-gradient),
var(--bg-gradient),
var(--bg-gradient);
background-repeat: no-repeat;
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
background-position:
left top 20px,
left 20px top;
}
.info_Wrap .info_Box .inner_700 {
margin: 0 auto;
padding: 30px 0 15px;
max-width: 700px;
width:90%;
}
.info_Wrap .info_List {
font-family: "a-otf-ryumin-pr6n", serif;
margin: 0 0 30px;
letter-spacing: 0.1em;
font-size: 15px;
line-height: 1.5;
}
/*.info_Wrap .info_List .unit:last-of-type { margin: 0; }*/
.info_Wrap .info_List h4 {
color:#998b6b;
font-size: 1.5em;
margin: 5px 0 10px;
}
.info_Wrap .info_List .body p {
margin-bottom: 15px;
color:#FFF;
}
.info_Wrap .info_List .body a {
color: #4393ae;
border-bottom: 1px solid;
}
.info_Wrap .info_List .body a:hover {
border-bottom: none;
}


.concept_area {
background: #111111;
}
.concept_area figure {
margin: 0 auto 0;
}
.concept_area figure .cap_Txt {
bottom: 10px;
}
.concept_area .copy {
color: #fff;
writing-mode: vertical-rl;
margin: 0 auto 0;
padding: 0 0 150px;
}
.concept_area .copy h3 {
font-size: clamp(20px,2.1vw,26px);
line-height:1.8;
letter-spacing: 0.24em;
padding: 0 0 0 0.5em;
}
.concept_area .copy p {
font-size: clamp(14px,1.34vw,16px);
line-height:3.3;
letter-spacing: 0.24em;
}


.content_bnr_area {
margin: 60px auto 60px;
}
.content_bnr_area .content_box {
position: relative;
  display: block;
  width: 100%;
}
.content_bnr_area .content_box.location::before {
content: "";
position: absolute;
top: 50%;
left: 0;
display: block;
width: 50.71428571428571%;
height: 80%;
background: #121212;
}
.content_bnr_area .content_box.location::after {
content: "";
position: absolute;
top: -7%;
right: 0;
display: block;
width: 57.857142857142857%;
height: 50%;
background: #121212;
z-index: -1;
}
.content_bnr_area .content_box.plan::after {
content: "";
position: absolute;
top: 0;
right: 0;
display: block;
width: 49.285714285714286%;
height: 81.6%;
background: #121212;
z-index: -1;
}
.content_bnr_area .content_box:not(:first-of-type) {
margin: 60px auto 0;
}
.content_bnr_area .content_box a {
position: relative;
display: block;
}
.content_bnr_area .content_box figure {
overflow: hidden;
}
.content_bnr_area .content_box a figure img{
filter: blur(3px);
transition: 2s;
}
.content_bnr_area .content_box a:hover figure img{
filter: blur(0);
transform: scale(1.1);
}


.content_bnr_area .content_box.location figure {
position: relative;
width: 49.285714285714286%;
margin: 0 0 0 auto;
}
.content_bnr_area .content_box.location figure::before {
content: "";
position: absolute;
top: -7%;
right: 0;
display: block;
width: 117.391304347826087%;
height: 50%;
background: #121212;
z-index: -1;
}

.content_bnr_area .content_box.plan figure {
width: 50.714285714285714%;
margin: 0 auto 0 0;
}

.content_bnr_area .content_box.design figure {
position: relative;
width: 49.285714285714286%;
margin: 0 0 0 auto;
}

.content_bnr_area .content_box .text_box {
position: absolute;
top: 50%;
width: 50%;
background: linear-gradient(135deg,  #3d3b3b 0%,#262424 100%);
transform: translate(0,-50%);
}
.content_bnr_area .content_box.location .text_box,
.content_bnr_area .content_box.design .text_box{
left: 5%;
}
.content_bnr_area .content_box.plan .text_box {
right: 5%;
}
.content_bnr_area .content_box .text_box .text_inner {
display: block;
width: fit-content;
margin: 0 auto;
padding: 20% 3%;
}
.content_bnr_area .content_box .text_box .text_inner h3 {
text-align: center;
font-family: "Cinzel", serif;
font-size: clamp(24px,3vw,36px);
color: #e1bb79;
letter-spacing: 0.12em;
}
.content_bnr_area .content_box .text_box .text_inner p {
font-size: clamp(14px,1.4vw,16.8px);
color: #fff;
letter-spacing: 0.08em;
line-height: 2;
padding-top: 50px;
}
.content_bnr_area .content_box .text_box .text_inner .more {
position: relative;
color: #fff;
width: fit-content;
margin: 50px auto 0;
}
.content_bnr_area .content_box .text_box .text_inner .more::after {
content: "";
position: absolute;
top: 50%;
left: calc(100% + 1em);
display: block;
width: 50px;
height: 4px;
border-bottom: 1px solid #e1bb79;
border-right: 2px solid #e1bb79;
transform: skew(63deg) translate(0, -50%);
}
.content_bnr_area .content_box a:hover .text_box .text_inner .more::after {
animation: extend 1.5s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

@keyframes extend {
0% {
width: 0;
}
100% {
width: 100px;
}
}


.floor-room {
background: #fbfbfa;
padding: 80px 0 100px;
}
.floor-room .room,
.floor-room .merit,
.floor-room .floor{
width: 94%;
max-width: 1200px;
align-items: center;
}
.floor-room .room {
display: flex;
margin: 0 auto;
gap:0 5%;
}
.floor-room .room > figure {
width: 55.833333333333333%;
}
.floor-room .room .txt {
width: 39.166666666666667%;
}
.floor-room .txt h3 {
font-family: "Cinzel", serif;
font-size: clamp(24px,3vw,36px);
line-height: 1;
letter-spacing: 0.08em;
font-feature-settings: "palt";
color: #916c14;
}
.floor-room .txt h4 {
font-size: clamp(20px,2.383333333333333vw,28px);
line-height: 1.7;
letter-spacing: 0.08em;
font-feature-settings: "palt";
color: #000;
padding-top: 40px;
}
.floor-room .txt p {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 1.8;
color: #000;
padding-top: 40px;
}

.floor-room .room .txt figure {
padding: 40px 0 0;
}
.floor-room .merit {
margin: 60px auto 80px;
}
.floor-room .merit ul{
display: flex;
gap: 0 3.25%;
}
.floor-room li {
width: 31.166666666666667%;
background: #e5e3d4;
padding: 1em 0;
}
.floor-room li h4 {
font-family: "EB Garamond", serif;
text-align: center;
font-size: clamp(24px,3vw,36px);
letter-spacing: 0.06em;
color: #916c14;
}
.floor-room li p {
text-align: center;
font-size: clamp(14px,1.666666666666667vw,20px);
line-height: 1.8;
color: #000;
}
.floor-room li .line {
width: 100%;
height: 1px;
background: linear-gradient(135deg,  rgba(145,108,20,0.1) 0%,rgba(145,108,20,1) 50%,rgba(145,108,20,0.1) 100%);
margin: 20px auto 14px;
}

.floor-room .floor {
display: flex;
margin: 0 auto;
gap:0 5%;
}
.floor-room .floor > figure {
order: 1;
width: 65%;
}
.floor-room .floor .txt {
order: 2;
width: 30%;
}



.bnr_area {
max-width: 1000px;
width: 94%;
margin: 100px auto;
}
.bnr_area div {
width: 100%;
max-width: 1000px;
margin: 0 auto 0;
pointer-events: all;
}
.bnr_area div:not(:first-of-type) {
margin: 40px auto 0;
}

.bnr_area .bnr_help_b {
max-width: 800px;
width: 100%;
}

.bnr_area a {
transition: .3s;
}
.bnr_area a:hover {
opacity: .5;
}
.bnr_area.top {
    margin: 40px auto;
}
.bnr_area.top div:not(:first-of-type) {
margin: 20px auto 0;
}

/*サービス*/
.service_area {
  margin: 80px auto 0;
}
.service_area ul {
 display: flex;
 justify-content: space-between;
  width:94%;
 max-width: 1000px;

 margin: 0 auto;
 gap:20px 2.9%;
}
.service_area ul li {
width: 100%;
padding: 0;
background: #fff;
}
.service_area ul li a {
 transition: .3s;
}
.service_area ul li a:hover {
 transition: .3s;
 opacity: .5;
}

/* bnr_online */
.bnr_online {
  padding: 60px 0;
}
.bnr_online a {
  transition: .3s;
}
.bnr_online a:hover {
  transition: .3s;
  opacity: .5;
}

.bnr_area.top {
max-width: 1000px;
width: 94%;
/*margin: 60px auto;*/
margin: 30px auto 60px;
}
.bnr_area div {
max-width: 800px;
margin: 0 auto;
}
.bnr_area a {
}

/*=========================================================================================================
tab
=========================================================================================================*/
@media screen and (min-width: 768px) and (max-width: 1024px) {

/*=== 共通 ===*/



/*=== 個別 ===*/
/* bnr_online */
.bnr_online {
  padding: 0px 0;
}

}

/*=========================================================================================================
sp
=========================================================================================================*/
@media screen and (max-width: 767px) {

/*=== 共通 ===*/
.bg {
padding-bottom: 30px;
}

#main_Wrap .triangle {
height: calc(tan(60deg) * 36vw / 2);
width: 36vw;
left: 55.5%;
}
#main_Wrap .cap_Txt {
font-size: 10px;
transform: scale(.8);
transform-origin: bottom left;
}
#main_Wrap .cap_center {
left: 28%;
}
#main_Wrap .cap_right {
left: 65%;
}





/*=== 個別 ===*/


.sec01 {
padding: 50px 0 50px;
}

.teiki_Area {
padding: 30px 0 50px;
}
.teiki_Area p{
line-height: 1.45;
/*下記調整用*/
font-size: 26px;
letter-spacing: 0.14em;
}
.teiki_Area p.sub{
line-height: 1;
}
.teiki_Area p span.space {
display: none;
}

.teiki_Area .btn_request {
padding: 30px 0 0;
width:90%;
margin:0 auto;
}
.teiki_Area .btn_request a {
display: block;
position: relative;

color:#FFF;
font-size: clamp(14px, calc(10.444444444444445px + 0.4629629629629629vw), 16px);
letter-spacing: 0.12em;
padding: 18px 0;
}


.info_Wrap {
width: 100%;
margin: 0 auto 40px;
}
/* .info_Wrap h3 {
} */
.info_Wrap .info_Box {
margin: 0.5rem 0;
}
.info_Wrap .info_List {
margin: 0 0 25px;
font-size: 14px;
}
.info_Wrap .info_List h4 {
margin-bottom: 4px 0 7px;
}

.service_area {
margin: 0 auto 30px;
}
.service_area ul {
flex-direction: column;
}
.service_area ul li {
width: 100%;
margin-bottom: 20px;
}

.point_box {
padding: 20px 0;
width: 100%;
}
.kokuti_box {
padding: 15px 0;
width: 100%;
}

.concept_area figure .cap_Txt {
bottom: 5px;
}
.concept_area .copy {
writing-mode: unset;
padding: 0 0 100px;
width: 90%;
}
.concept_area .copy h3 {
padding: 0 0 1em 0;
}
.concept_area .copy p {
line-height: 1.8;
letter-spacing: 0.12em;
}
.content_bnr_area .content_box a {
  display: block;
  width: 100%;
}
.content_bnr_area .content_box:not(:first-of-type) {
margin: 27% auto 0;
}

.content_bnr_area .content_box.location figure,
.content_bnr_area .content_box.plan figure,
.content_bnr_area .content_box.design figure{
width: 100%;
margin: 0 auto;
}
.content_bnr_area .content_box .text_box {
position: absolute;
display: block;
top: 25%;
width: 90%;
background: linear-gradient(135deg,  rgba(61,59,59,0.97) 0%,rgba(38,36,36,0.97) 100%);
z-index: 1;
}
.content_bnr_area .content_box.location .text_box,
.content_bnr_area .content_box.design .text_box{
left: 0;
}
.content_bnr_area .content_box.plan .text_box {
right: 0;
}
.content_bnr_area .content_box .text_box .text_inner {
width: 100%;
padding: 10% 1.5em;
}
.content_bnr_area .content_box .text_box .text_inner p {
padding-top: 30px;
}
.content_bnr_area .content_box .text_box .text_inner .more {
margin: 30px auto 0;
}
.content_bnr_area .content_box .text_box .text_inner .more::after {
    width: 40px;
}
.content_bnr_area .content_box a:hover .text_box .text_inner .more::after {
animation: extend 1.5s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

@keyframes extend {
0% {
width: 0;
}
100% {
width: 60px;
}
}
.content_bnr_area .content_box a figure img {
filter: blur(0);
}


.floor-room {
    padding: 60px 0 60px;
}
.floor-room .room {
flex-wrap: wrap;
gap:30px 0;
}
.floor-room .room > figure {
width: 100%;
}
.floor-room .room .txt {
width: 100%;
}

.floor-room .merit {
margin: 30px auto 60px;
}
.floor-room .merit ul{
flex-wrap: wrap;
gap: 1em 0;
}
.floor-room li {
width: 100%;
background: #e5e3d4;
padding: 1em 0;
}
.floor-room li h4 {

}
.floor-room li p {
padding: 0 1em
}
.floor-room li .line {
width: 100%;
height: 1px;
margin: 12px auto 8px;
}

.floor-room .floor {
flex-wrap: wrap;
gap:30px 0;
}
.floor-room .floor > figure {
order: 2;
width: 100%;
}
.floor-room .floor .txt {
order: 1;
width: 100%;
}
.floor-room .txt h4 {
    padding-top: 20px;
}
.floor-room .txt p {
    padding-top: 20px;
}
/*サービス*/
.service_area {
margin: 60px auto 0;
}
.service_area ul {
flex-direction: column;
}
.service_area ul li {
width: 100%;
margin-bottom: 0;
}
.kokuti_box p.note{
text-align: left;
}

/* bnr_online */
.bnr_online {
  padding: 0px 0;
}

.bnr_area.top {
  margin: 10px auto 30px;
}
}