@charset "UTF-8";

.inner90 {
width: 90%;
margin: 0 auto;
}

figcaption {
font-size: 10px;
}

figcaption.tx-right {
text-align: right;
}

.italic {
font-style: italic;
}

/* 2LDK */
.page-ttl {
background-image: url(../img/page-ttl-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
padding: 23% 0;
position: relative;
}

.page-ttl h2 {
width: 30%;
max-width: 398px;
position: absolute;
top: 50%;
right: 10%;
transform: translateY(-50%);
}

/*
[class$="-box"] {
width: 90%;
max-width: 1200px;
margin: 120px auto 0;
}
*/
.lead_bg {
background-image: url(../img/lead_bg.png);
background-repeat: no-repeat;
background-size: cover;
padding: 120px 0;
background-color: rgba(255, 255, 255, 0.8);
background-blend-mode: lighten;
}


.lead-box {
width: 90%;
max-width: 1200px;
margin: 0 auto 0;
}

/* lead-box */
.lead-box {
flex-wrap: wrap;
justify-content: space-between;
}

.lead-box.style01 {
width: 90%;
max-width: 1200px;
margin: 120px auto 0;
}

.lead-box .left {
width: 62.13414634%;
}

.lead-box.style01 .left {
width: 38.33333333%;
}

.lead-box .right {
width: 33.333333%;
}

.lead-box.style01 .right {
width: 57.13414634%;
}

h3 {
font-size: 28px;
letter-spacing: 0.03em;
line-height: 1.4;
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 1px solid #000;
}

h4 {
font-size: 24px;
letter-spacing: 0.04em;
line-height: 1.4;
margin-bottom: 20px;
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 1px solid #000;
}

.point {
color: #fff;
font-size: clamp(18px, 2vw, 24px);
line-height: 1;
margin-right: 0.5em;
padding: 0.1em 0.5em;
background: #412514;
}

.text01 {
font-size: 16px;
letter-spacing: 0.06em;
line-height: 1.8;
}

/* madori-box */
.madori-box {
width: 90%;
max-width: 1200px;
margin: 0 auto 0;
}

.madori-box .type {
position: relative;
padding: 0 0 1em;
margin: 60px auto 60px;
}

.madori-box .type::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 0);
display: block;
width: 100vw;
height: 1px;
background: #000;
}

.madori-flex {
flex-wrap: wrap;
justify-content: space-between;
margin: 60px auto 0;
}

.madori-flex.bg01 {
position: relative;
z-index: 1;
}

.madori-flex.bg01::before {
content: "";
position: absolute;
top: 47.5%;
left: 50%;
transform: translate(-50%, -50%);
width: 100vw;
height: clamp(400px, 30vw, 450px);
background: #eef2f6;
z-index: -1;
}

.bg02 {
position: relative;
padding: 30px 0 120px;
z-index: 1;
}

.bg02::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0%);
width: 100vw;
height: 95%;
background: #eef2f6;
z-index: -1;
}

.madori-flex .left {
width: 44%;
}

.madori-flex.htype .left {
width: 49%;
}

.madori-flex .right {
width: 52%;
}

.madori-flex.htype .right {
position: relative;
width: 49%;
}

.madori-flex .flex {
flex-wrap: wrap;
width: 100%;
gap: 30px 2%;
}

.madori-flex .flex .madori-item {
width: 49%;
margin-top: 0;
}

.madori-item:nth-of-type(n+2) {
margin-top: 60px;
}

.madori-item figure {
margin-top: 20px;
}

.madori + .hanrei.ctype {
max-width: 300px;
margin: 20px 0 0 auto;
}


.model-ttl {
color: #00466c;
font-size: 26px;
line-height: 1.5;
text-align: center;
border: 1px solid #00466c;
padding: 10px 0;
margin-bottom: 20px;
}

.madori_band {
text-align: center;
color: #fff;
font-size: clamp(18px, 3.16666667vw, 38px);
letter-spacing: 0.12em;
padding: 0.6em;
0;
background: #412514;
margin: 0 auto 0;
}

.madori-flex.htype .right > div.htype-madori {
position: relative;
}

.madori-flex.htype .right > div.htype-madori::after {
position: absolute;
content: '';
top: 0;
left: 0;
display: block;
width: 100%;
/*幅*/
height: 1124px;
/*どれだけデカくなってもはみ出ないであろう高さを指定*/
background-image: url(../img/madori-h.png);
background-size: contain;
background-repeat: no-repeat;
/*画像を繰り返さない*/
z-index: 2;
}

.item_flex {
align-items: flex-start;
gap: 20px 3.78787879%;
}

.item_flex.side {
align-items: center;
gap: 20px 3.755%;
}

.item_flex > .text01 {
width: 43.18181818%;
}

.item_flex > figure {
width: 53.03030303%;
margin-top: 0;
}

.item_flex.side > div {
width: 57.63888889%;
}

.item_flex.side > figure {
width: 38.61111111%;
}




.price_area {
margin: 80px auto 0;
}

.price_area ul {
display: flex;
gap: 1em;
}

.price_area li {}

.price_area li:nth-child(1) {
width: 34.33333333%;
}

.price_area li:nth-child(2) {
width: 30.13333333%;
}

.price_area li:nth-child(3) {
font-size: 12px;
width: 35.33333333%;
line-height: 1.4;
}

.price_area figure {}


/* room-box */
.room-box {
width: 90%;
max-width: 1200px;
margin: 120px auto 0;
}


.en-ttl {
display: flex;
align-items: center;
color: #00466c;
font-size: 30px;
letter-spacing: 5px;
text-align: center;
margin-bottom: 40px;
}

.en-ttl span {
display: block;
}

.en-ttl .line-01,
.en-ttl .line-02 {
flex: 1;
height: 1px;
background: #00466c;
}

.en-ttl .line-01 {
margin-right: 20px;
}

.en-ttl .line-02 {
margin-left: 20px;
}

.image-flex {
flex-wrap: wrap;
justify-content: space-between;
gap: 20px 2.5%;
margin-top: 30px;
}

.image-flex .left {
display: flex;
flex-direction: column;
width: 48.75%;
gap: 30px 0;
}

.image-flex .right {
width: 48.75%;
}

.image-single {}

.image-single + .image-single {
margin-top: 30px;
}


.furniture-item {
flex-wrap: wrap;
justify-content: space-between;
padding-top: 20px;
}

.furniture-item.flex {
gap: 42px 2.72108844%;
}

.furniture-item li {
width: 31.29251701%;
position: relative;
}

.furniture-item li.two {
width: 65.30612245%;
}

.furniture-item li.two ul {
display: flex;
flex-direction: column;
width: 100%;
gap: 42px 0;
}

.furniture-item li.two ul li {
display: flex;
align-items: flex-end;
width: 100%;
gap: 20px 4.16666667%;
}

.furniture-item li.two ul li figure {
width: 47.91666667%;
}

.furniture-item li.two ul li > div {
width: 47.91666667%;
}

.furniture-item li figure {
margin-top: 0;
}

.furniture-item li .item-ttl {
color: #00466c;
margin-top: 10px;
border-top: 1px solid #00466c;
border-bottom: 1px solid #00466c;
padding: 8px 0;
font-feature-settings: "palt";
text-align: center;
letter-spacing: 0.01em;
font-size: 16px;
}

.furniture-item li .item-ttl span.f-small {
font-size: 90%;
}

.furniture-item li .item-text {
margin-top: 10px;
}

[class^="num-"] {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
font-size: 18px;
color: #fff;
position: absolute;
top: 0px;
left: 0;
background: #00466c;
}

/*
.num-01 {
background: #000;
}

.num-02 {
background: #000;
}

.num-04 {
background: #000;
}

.num-05 {
background: #000;
}

.num-06 {
background: #000;
}

.num-07 {
background: #000;
}
*/

.item-ttl {
font-size: 18px;
}

.item-text {
font-size: 14px;
line-height: 1.3;
}

.view_area {
margin: 0 auto 0;
}

.view_area > div {
margin: 0 calc(50% - 50vw);
width: 100vw;
}

.view_area figure {}

/* タブ切り替え */
.tab-box {
margin: 120px auto 0;
}

.tab-content h4 {
text-align: center;
}

.tab-container {
width: 100%;
max-width: 1100px;
margin: 40px auto;
overflow: hidden;
}

.tabs {
display: flex;
background-color: #e8f0f8;
}

.tabs label {
flex: 1;
text-align: center;
cursor: pointer;
border-right: 8px solid #fff;
padding: 15px;
transition: background-color 0.3s, color 0.3s;
font-size: clamp(18px, 2vw, 21px);
letter-spacing: 0.08em;
}

.tabs label small {
font-size: 80%
}

.tabs label:last-child {
border-right: none;
}

/* チェックされたタブ */
input[type="radio"] {
display: none;
}

input[type="radio"]:checked + label {
background-color: #cfe1ed;
color: #000;
}

.tab-container > .tab-content {
display: none;
background-color: #cfe1ed;
padding: 60px 30px 30px 30px;
}

.tab-container:has(#tab1:checked) #content1,
.tab-container:has(#tab2:checked) #content2,
.tab-container:has(#tab3:checked) #content3,
.tab-container:has(#tab4:checked) #content4 {
display: block;
}

.tab-inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.tab-text {
width: 56%;
}

.tab-text .text01 {
font-size: clamp(14px, 1.25vw, 15px);
}

.tab-text h4 {
text-align: left;
}

.tab-image {
width: 38%;
}


/* sp */
@media only screen and (max-width: 820px) {
.page-ttl h2 {
width: 49%;
max-width: 398px;
position: absolute;
top: 50%;
right: 4%;
transform: translateY(-50%);
}

/*
[class$="-box"] {
margin: 60px auto 0;
}
*/
.lead_bg {
padding: 40px 0 60px;
}

.lead-box {
margin: 40px auto 0;
}

.lead-box.style01 {
margin: 60px auto 0;
}

h3 {
font-size: 20px;
text-align: center;
}

.text01 {
font-size: 14px;
text-align: left;
}

.point {
display: block;
margin-right: 0;
margin-bottom: 0.7em;
padding: 0.3em 0.5em 0.4em;
}

.lead-box .left {
width: 100%;
}

.lead-box.style01 .left {
width: 100%;
}

.lead-box .right {
width: 100%;
margin-top: 20px;
}

.lead-box.style01 .right {
width: 100%;
}

.lead-box .text01 {
text-align: left;
}

.madori_band {
line-height: 1.4;
margin: 0 auto 0;
}

.madori-box .type {
margin: 30px auto 30px;
}

.madori-flex {
margin: 30px auto 0
}

.madori-flex + .madori-flex {
margin: 60px auto 0;
}

.madori-flex .left {
width: 100%;
}

.madori-flex.htype .left {
width: 100%;
}

.madori-flex.htype .right {
width: 85%;
margin: 0 auto;
padding-bottom: 40px;
}

.madori-flex.htype .right .hanrei {
width: 300px;
margin: 20px auto 0;
}

.madori-flex .right {
width: 85%;
margin: 60px auto 0;
}

.madori-flex .right.set {
width: 100%;
margin-top: 20px;
}

.madori-flex .right.set .madori {
width: 76.5%;
margin: 20px auto 0;
}

.madori + .hanrei.ctype {
margin: 20px auto 0;
}

.madori-flex.htype .right {
width: 76.5%;
margin: 30px auto 0;
}

.madori-flex .flex .madori-item {
width: 100%;
margin-top: 0;
}

.bg02 {
padding: 30px 0 60px;
}

.item_flex > .text01 {
width: 100%;
}

.item_flex > figure {
width: 100%;
}

.item_flex.side > div {
width: 100%;
}

.item_flex.side > figure {
width: 60%;
margin: 0 auto;
}

.price_area {
margin: 40px auto 0;
}

.price_area ul {
flex-wrap: wrap;
}

.price_area li:nth-child(1) {
width: 90%;
margin: 0 auto;
}

.price_area li:nth-child(2) {
width: 90%;
margin: 0 auto;
}

.price_area li:nth-child(3) {
width: 90%;
margin: 0 auto;
}

.room-box {
margin: 60px auto 0;
}

.en-ttl {
font-size: 20px;
letter-spacing: 3px;
margin-bottom: 20px;
}

.image-flex .left {
width: 100%;
}

.image-flex .right {
width: 100%;
margin-top: 10px;
}

/*
.image-flex .left figure:nth-of-type(n+2),
.image-flex .right figure:nth-of-type(n+2) {
margin-top: 10px;
}
*/

.model-ttl {
font-size: 20px;
}

h4 {
font-size: 18px;
text-align: center;
}

.furniture-item li {
width: 48%;
}

.furniture-item li.two {
width: 48%;
}

.furniture-item li .item-ttl {
font-size: 15px;
}

/*
.furniture-item li:nth-of-type(n+3) {
margin-top: 40px;
}
*/
.tabs {
width: 94%;
margin: 0 auto;
}

.tabs label {
padding: 15px 0;
font-size: clamp(13.6px, 2vw, 21px);
letter-spacing: 0.04em;
}

.tab-box {
margin: 60px auto 50px;
}

.tab-container {
margin: 20px auto 0;
}

.tab-container > .tab-content {
padding: 20px 15px 15px 15px;
}

.tab-text {
width: 100%;
}

.tab-text h4 {
text-align: center;
letter-spacing: 0;
}

.tab-image {
width: 100%;
margin-top: 20px;
}

/* scroll-hint対象だけ横スクロール可に */
.scroll-hint {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.scroll-hint img {
width: 750px;
/* ←【修正③】スマホで横スクロールできる幅 */
max-width: none;
}

}