@charset "UTF-8";

/*=== 共通 ===*/
.contents {
overflow: hidden;
}

.contents figure {
position: relative;
height: fit-content;
}

.contents img {
width: 100%;
}

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

.point_box {
padding: 26px 0;
background: linear-gradient(90deg, rgba(224, 247, 255, 1) 0%, rgba(248, 253, 255, 1) 50%, rgba(224, 247, 255, 1) 100%);
}

.point_Area {
padding: 12px 0 10px;
background: linear-gradient(to right, rgba(5, 13, 18, 1) 0%, rgba(36, 69, 95, 1) 100%);
}

.point_Area figure {
width: 94%;
max-width: 1281px;
margin: 0 auto;
}


.teiki_Area {
padding: 80px 0;
text-align: center;
font-family: "游明朝 Medium", YuMincho Medium, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
color: #27506f;
}

.teiki_Area p {
display: flex;
align-items: baseline;
justify-content: center;
font-size: clamp(25px, 3.5vw, 50.6px);
line-height: 1.2;
letter-spacing: 0.12em;
font-feature-settings: "palt";
}
.teiki_Area p span {
letter-spacing: 0.14em;
}
.teiki_Area p span.keisen {
display: inline-block;
font-size: 50%;
margin: 0 0.5em;
padding: 0.1em 0.4em;
border: 1px solid #27506f;
}

.teiki_Area a {
display: block;
box-sizing: border-box;
text-align: center;
width: 80%;;
max-width: 320px;
padding: 15px 5px;
font-size: 17px;
letter-spacing: 0.2em;
color: #fff;
transition: .3s;
margin: 1.5em auto 0;
}
.teiki_Area a.res_btn {
background: linear-gradient(to right, rgb(60 14 14) 0%, rgb(137 31 31) 100%);
}
.teiki_Area a.req_btn {
background: linear-gradient(to right, rgb(0 31 87) 0%, #186ead 100%);
}
.teiki_Area a:hover {
opacity: 0.5;
}
/* information */
.info_Wrap {
margin: 0 auto 80px;
max-width: 824px;
width: 94%;
}

.info_Wrap h3 {
position: relative;
text-align: center;
font-size: 18px;
font-family: "Cinzel", serif;
letter-spacing: 0.18em;
color: #998b6b;
padding-bottom: 20px;
}
.info_Wrap h3::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,0);
width: 40px;
height: 1px;
background: #7a6a30;
}

.info_Wrap .info_List {
padding: 40px 0;
}

.info_Wrap .info_List .unit {
letter-spacing: 0.1em;
font-size: 15px;
line-height: 1.5;
padding: 30px 0 0;
}

.info_Wrap .info_List .unit:first-of-type {
padding: 0;
}

.info_Wrap .info_List .unit:last-of-type {
margin: 0;
}

.info_Wrap .info_List .unit h4 {
color: #998b6b;
font-size: 1.5em;
letter-spacing: 0.12em;
margin: 5px 0 10px;
}

.info_Wrap .info_List .unit .body p {
margin-bottom: 14px;
font-feature-settings: "palt";
}

.info_Wrap .info_List .unit .body a {
color: #236886;
/*  border-bottom: 1px solid;*/
}

.info_Wrap .info_List .unit .body a:hover {
border-bottom: none;
}
.concept_Area {
text-align: center;
background: #fff url(../img/concept_bg.jpg) no-repeat center center;
background-size: cover;
padding: 80px 3%;
margin: 100px auto 0;
}
.concept_Area h4 {
color: #224259;
font-size: clamp(17px,2.5vw,30px);
letter-spacing: 0.02em;
line-height: 1.4;
}
.concept_Area span {
position: relative;
}
.concept_Area span::after {
content: "※";
position: absolute;
top: -0.5em;
right: -0.3em;
font-size: min(9px,0.9vw);
color: #224259;
}

.concept_Area h3 {
color: #224259;
font-size: clamp(28px,5.34vw,64px);
letter-spacing: 0.08em;
padding: 0.4em 0 0.5em;
}
.concept_Area p {
color: #224259;
font-size: clamp(14px,1.5vw,18px);
letter-spacing: 0.12em;
line-height: 2;
}
.redevelopment_area {
padding: 70px 0 100px;
}
.redevelopment_area .inner {
display: flex;
gap: 0 4.16666667%;
}
.redevelopment_area .text {
width: 43.33333333%;
}
.redevelopment_area h4 {
color: #224259;
font-size: clamp(18px,2.0vw,24px);
letter-spacing: 0.08em;
line-height: 1.6;
padding-bottom: 0.5em;
margin-bottom: 0.5em;
border-bottom: 1px solid #000;
}
.redevelopment_area p {
font-size: clamp(14px,1.34vw,16px);
letter-spacing: 0.08em;
line-height: 2;
}
.redevelopment_area .fig {
width: 52.5%;
}
.redevelopment_area figure {
width: 100%;
}
.redevelopment_area .cap_notes {
display: inline-block;
width: 100%;
font-size: 10px;
text-align: right;
padding: 1em 0 0;
}

.content_Area {
display: flex;
flex-direction: column;
gap: 180px 0;
margin: 100px auto clamp(100px,20vw,200px);
}
.content_box {

}
.content_box > h2 {
display: block;
font-size: clamp(28px, 4vw, 48px);
letter-spacing: 0.12em;
color: #2e7998;
line-height: 0.668;
width: 94%;
max-width: 1200px;
margin: 0 auto;
}
.content_box.right > h2 {
text-align: right;
}


.content_box .box_bg {
display: block;
position: relative;
width: 100%;
background: #fff url(../img/content_bg.jpg) no-repeat center center;
background-size: cover;
border-bottom: 10px solid #345a78;
}
.content_box .box_bg > figure {
position: absolute;
top: 0;
width: 50%;
}

.content_box.location .box_bg > figure {
left: 0;
}
.content_box.plan .box_bg > figure {
right: 0;
}
/*
.content_box .box_bg > figure img {
filter: saturate(0.1);
transition: 0.2s;
}
.content_box .box_bg:hover > figure img {
filter: saturate(1);
}
*/

.content_box .inner {
display: block;
position: relative;
padding: 12.89% 0;
}
.content_box .text {
position: absolute;
top: 60px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
width: 56%;
max-width: 500px;
height: clamp(240px, 28.57142857vw, 400px);
box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);
padding: 0 2em;
color: #000;
transition: 0.2s;
}
.content_box.plan .text {
    top: calc(50% - 10px);
}

.content_box a:hover .text {
background: #345a78;
color: #fff;
}

.content_box.right .text {
right: 0;
}
.content_box.left .text {
left: 0;
}
.content_box.right .text .text_inner {
width: fit-content;
}
.content_box .text h4 {
font-size: clamp(18px, 1.84vw, 22px);
line-height: 1.6;
}
.content_box .text p {
font-size: clamp(14px,1.34vw,16px);
line-height: 2;
padding-top: 1em;
}
.content_box .text .text_inner .more{
display: flex;
justify-content: flex-end;
align-items: center;
color: #000;
letter-spacing: 0.12em;
margin-top: 3em;
transition: 0.8s;
}
.content_box a:hover .text .text_inner .more{
color: #fff;
transition: 0.8s;
}
.content_box .text .text_inner .more span{
width: 24px;
height: 4px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: skew(45deg);
transition: 0.8s;
margin-left: 0.5em;
}
.content_box a:hover .text .text_inner .more span{
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: skew(45deg) translate(10px, 0);
}



.pick_up {
text-align: center;
background: #fff url(../img/pickup_bg.jpg) no-repeat center center;
background-size: cover;
margin: -180px 0 0;
padding: 60px 0 80px;
position: relative;
z-index: -1;
}
.pick_up .inner{
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
}
.pick_up .inner .text{
width: 56.66666667%;
}
.pick_up .inner .text h4{
text-align: left;
color: #224259;
font-size: clamp(17px, 2.167vw, 26px);
letter-spacing: 0.02em;
line-height: 1.6;
}
.pick_up .inner .text ul{
text-align: left;
color: #224259;
font-size: clamp(16px, 1.75vw, 21px);
letter-spacing: 0.08em;
line-height: 1.8;
padding-top:2em; 
}
.pick_up .inner .text ul li{
padding-left: 1em;
text-indent: -1em;
}

.pick_up .inner > .img_box{
display: flex;
flex-direction: column;
/*width: 37.08333333%;*/
width: 45%;
gap: 30px 0;
}
.pick_up .inner > .img_box .madori_type{
max-width: 445px;
margin: 0 auto;
}

.concept_Area {
text-align: center;
background: #fff url(../img/concept_bg.jpg) no-repeat center center;
background-size: cover;
padding: 80px 3%;
}

.under_content {
}
.under_content ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5%;
}
.under_content li {
width: calc(97.5% / 5);
}
.under_content li a {
position: relative;
display: block;
width: 100%;
transition: 0.3s;
}
.under_content li a:hover {
filter: brightness(1.4);
}
.under_content li.comingsoon a {
pointer-events: none;
}
.under_content li figure {
background: #fff;
border: 1px solid #203f58;
}
.under_content li.comingsoon figure {
background: #fff;
}
.under_content li.comingsoon figure img {
opacity: 0.4;
}
.under_content li.comingsoon figure img {
opacity: 0.1;
}

.under_content li .box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
text-align: center;
}
.under_content li .box h3 {
color: #fff;
font-size: clamp(18px, 1.8vw, 25px);
letter-spacing: 0.12em;
font-family: 'Cinzel', serif;
}

.under_content li.comingsoon .box h3 {
color: #374e5f;
}

.under_content li .box span.line{
display: block;
width: 100%;
height: 1px;
background: linear-gradient(to right,  rgba(255,255,255,0.05) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.05) 100%);
margin: 20px 0;
}
.under_content li.comingsoon .box span.line{
background: linear-gradient(to right,  rgba(94,112,126,0.05) 0%,rgba(94,112,126,1) 50%,rgba(94,112,126,0.05) 100%);
}
.under_content li .box .more {
text-align: center;
font-size: 13px;
letter-spacing: 0.04em;
font-family: 'Cinzel', serif;
color: #f0d79f;
}
.under_content li.comingsoon .box .more {
color: #374e5f;
}
.under_content li.comingsoon .box .more {
width: 100%;
}

.bnr_Area {
display: flex;
flex-direction: column;
gap: 30px 0;
}
.bnr_Area div {
width: 94%;
max-width: 1000px;
margin: 0 auto;
}
.bnr_Area a {
transition: 0.3s;
}
.bnr_Area a:hover {
opacity: 0.5;
}


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

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


}

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

.point_Area {
padding: 16px 0;
}

.teiki_Area {
padding: 40px 0;
}
.teiki_Area p {
    letter-spacing: 0.05em;
}
.teiki_Area div.sp p:nth-child(2) {
    align-items: center;
}
.info_Wrap {
margin: 0 auto 20px;
}
.concept_Area {
padding: 60px 3%;
margin: 60px auto 0;
}
.redevelopment_area {
    padding: 40px 0 50px;
}
.redevelopment_area .inner {
flex-direction: column;
}
.redevelopment_area .fig {
width: 100%;
order: 1;
margin-bottom: 1.5em;
}
.redevelopment_area .text {
width: 100%;
order: 2;
}
.content_Area {
margin: 60px auto clamp(100px, 20vw, 200px);
gap: 80px 0;
}
.content_box .box_bg > figure {
position: absolute;
top: 0;
width: 100%;
}
.content_box .box_bg > figure .cap_Txt{
bottom: unset;
top: 5px;
}

.content_box .inner {
padding: 60% 0 36%;
}
.content_box .text {
top: unset;
bottom: 4%;
width: 100%;
}
.content_box.plan .text {
top: unset;
bottom: 4%;
}


.pick_up {
margin: -80px 0 0;
padding: 40px 0 ;
}
.pick_up .inner .text{
width: 100%;
}
.pick_up .inner .text ul {
padding-top: 1em;
padding-bottom: 1em;
}
.pick_up .inner > .img_box{
width: 100%;
}
.under_content ul {
width: 94%;
margin: 0 auto;
gap: 10px 2%;
}
.under_content li {
width: calc((100% - 2%) / 2);
}
.under_content li:nth-child(5) {
width: 100%;
}


}