/* それぞれのFV画像 */

.boxPageTop{
    display: flex;
    flex-direction: column;
    gap: 45px;
    width: 100%;
    justify-content: center;
    color: #fff;
    background: url(../img/housing_new/bgCmnTit.jpg) center top / cover no-repeat;
    height: 548px;
    align-items: center;
}
.boxPageTop .pageTitEng{
	font-size: 16px;
	letter-spacing: 0.16em;
	font-weight: 500;
	text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.3);
}
.boxPageTop .pageTitJp{
	font-size: 68px;
	letter-spacing: 0.05em;
	font-weight: 500;
	text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.3);
}
.boxPageTop .pageTitSub{
	font-size: 26px;
	letter-spacing: 0.18em;
	font-weight: 500;
	text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.3);
}

@media only screen and (max-width:767px){
	.boxPageTop{
        gap: 20px;
        background: url(../img/housing_new/bgCmnTit_sp.jpg) center top / cover no-repeat;
        height: 200px;
    }
    .boxPageTop .pageTitEng{
        font-size: 11px;
        letter-spacing: 0.03em;
    }
    .boxPageTop .pageTitJp{
        font-size: 26px;
        letter-spacing: 0.1em;
    }
    .boxPageTop .pageTitSub{
        font-size: 15px;
        letter-spacing: 0.1em;
    }
}

.pageLifestyle .boxPageTop{
    background: url(../img/housing_new/lifestyle/bgCmnTit.jpg) center top / cover no-repeat;
}
.pageSystem .boxPageTop{
    background: url(../img/housing_new/system/bgCmnTit.jpg) center top / cover no-repeat;
}
.pageMaterials .boxPageTop{
    background: url(../img/housing_new/materials/bgCmnTit.jpg) center top / cover no-repeat;
}
.pageCraftsman .boxPageTop{
    background: url(../img/housing_new/craftsman/bgCmnTit.jpg) center top / cover no-repeat;
}
.pageQuality .boxPageTop{
    background: url(../img/housing_new/quality/bgCmnTit.jpg) center top / cover no-repeat;
}
.pageValue .boxPageTop{
    background: url(../img/housing_new/value/bgCmnTit.jpg) center top / cover no-repeat;
}
@media only screen and (max-width:767px){
    .pageLifestyle .boxPageTop{
        background: url(../img/housing_new/lifestyle/bgCmnTit_sp.jpg) center top / cover no-repeat;
    }
    .pageSystem .boxPageTop{
        background: url(../img/housing_new/system/bgCmnTit_sp.jpg) center top / cover no-repeat;
    }
    .pageMaterials .boxPageTop{
        background: url(../img/housing_new/materials/bgCmnTit_sp.jpg) center top / cover no-repeat;
    }
    .pageCraftsman .boxPageTop{
        background: url(../img/housing_new/craftsman/bgCmnTit_sp.jpg) center top / cover no-repeat;
    }
    .pageQuality .boxPageTop{
        background: url(../img/housing_new/quality/bgCmnTit_sp.jpg) center top / cover no-repeat;
    }
    .pageValue .boxPageTop{
        background: url(../img/housing_new/value/bgCmnTit_sp.jpg) center top / cover no-repeat;
    }
}

.housingNew .boxPageTop{
    gap: 45px;
}
.housingNew .boxPageTop .pageTitJp{
    font-size: 52px;
    letter-spacing: 0.05em;
    font-weight: 500;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.3);
}
.housingNew .boxPageTop .pageTitSub{
    font-size: 22px;
    line-height: calc(48/22);
    letter-spacing: 0.05em;
    font-weight: 500;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.3);
    text-align: center;
}
@media only screen and (max-width:767px){
    .housingNew .boxPageTop{
        gap: 14px;
    }
    .housingNew .boxPageTop .pageTitJp{
        font-size: 20px;
        line-height: calc(30/20);
        letter-spacing: 0;
        text-align: center;
    }
    .housingNew .boxPageTop .pageTitSub{
        font-size: 13px;
        letter-spacing: 0;
        line-height: calc(22/13);
    }
}

/* secConceptFlex */
.secConceptFlex{
    margin-top: 120px;
}
.secConceptFlex .boxList{
    display: flex;
    flex-direction: column;
    gap: 120px;
}
.secConceptFlex .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}
.secConceptFlex .boxTxt{
    width: calc(100% - (43.67% + 30px));
}
.secConceptFlex .boxImg{
    width: 43.67%;
    max-width: 620px;
}
.secConceptFlex .boxTxt .titEng{
    font-size: 20px;
    letter-spacing: 0.05em;
    color: rgba(0, 0, 0, 0.3);
    padding-left: 40px;
    position: relative;
}
.secConceptFlex .boxTxt .titEng::before{
    content: '';
    width: 25px;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.secConceptFlex .boxTxt .tit{
    font-size: 26px;
    line-height: calc(46/26);
    letter-spacing: 0.05em;
    font-weight: bold;
    margin-top: 15px;
}
.secConceptFlex .boxAbout{
    margin-top: 16px;
}
.secConceptFlex .boxAbout .txtAbout{
    font-size: 20px;
    line-height: calc(42/20);
    letter-spacing: 0.05em;
    font-weight: bold;
}
.secConceptFlex .boxAbout .txtAbout2{
    font-size: 16px;
    line-height: calc(40/16);
    letter-spacing: 0.05em;
    margin-top: 16px;
}
.secConceptFlex .btnMore{
    width: 800px;
    height: 110px;
    border: 1px solid #000;
    padding: 0 0 0 59px;
    display: flex;
    align-items: center;
    font-size: 20px;
    letter-spacing: 0.1em;
    margin: 120px auto 0;
    position: relative;
}
.secConceptFlex .btnMore::after{
    content: '';
    width: 140px;
    height: 8px;
    position: absolute;
    top: 50%;
    right: 60px;
    transform: translateY(-50%);
}
.secConceptFlex .btnMore.lazyloaded::after{
    background: url(../img/housing_new/btnMoreArrow.png) center top / cover no-repeat;
}
@media only screen and (max-width:1500px){
    .secConceptFlex .boxAbout .txtAbout {
        font-size: 17px;
    }
    .secConceptFlex .boxAbout .txtAbout2 {
        font-size: 14px;
    }
}
@media only screen and (max-width:767px){
    .secConceptFlex{
        margin-top: 50px;
    }
    .secConceptFlex .boxList{
        gap: 48px;
    }
    .secConceptFlex .item{
        flex-direction: column;
        align-items: flex-start;
        gap: 0
    }
    .secConceptFlex .boxTxt{
        display: contents;
        width: 100%;
    }
    .secConceptFlex .boxTit{
        order: 1;
    }
    .secConceptFlex .boxImg{
        width: 100%;
        margin-top: 23px;
        order: 2;
    }
    .secConceptFlex .boxTxt .titEng{
        font-size: 16px;
        letter-spacing: 0;
        padding-left: 23px;
    }
    .secConceptFlex .boxTxt .titEng::before{
        width: 15px;
    }
    .secConceptFlex .boxTxt .tit{
        font-size: 18px;
        line-height: calc(28/18);
        letter-spacing: 0;
        margin-top: 13px;
    }
    .secConceptFlex .boxAbout{
        margin-top: 17px;
        order: 3;
    }
    .secConceptFlex .boxAbout .txtAbout{
        font-size: 16px;
        line-height: calc(30/16);
        letter-spacing: 0.05em;
    }
    .secConceptFlex .boxAbout .txtAbout2{
        font-size: 13px;
        line-height: calc(28/13);
        letter-spacing: 0.05em;
        margin-top: 7px;
    }
    .secConceptFlex .btnMore{
        width: 100%;
        height: 90px;
        padding: 0 0 0 18px;
        font-size: 16px;
        line-height: calc(24/16);
        letter-spacing: 0;
        margin: 70px auto 0;
    }
    .secConceptFlex .btnMore::after{
        width: 75px;
        height: 8px;
        right: 20px;
    }
    .secConceptFlex .btnMore.lazyloaded::after{
        background: url(../img/housing_new/btnMoreArrow_sp.png) center top / cover no-repeat;
    }
}
@media only screen and (max-width:370px){
    .secConceptFlex .btnMore{
        padding: 0 0 0 15px;
        font-size: 14px;
    }
}
@media only screen and (max-width:360px){
    .secConceptFlex .btnMore::after{
        width: 60px;
        height: 6px;
        right: 15px;
    }
    .secConceptFlex .boxTxt .tit{
        font-size: 17px;
    }
}
@media only screen and (max-width:340px){
    .secConceptFlex .boxTxt .tit{
        font-size: 16px;
    }
    .secConceptFlex .boxAbout .txtAbout{
        font-size: 15px;
    }
}

/*----------------------------
	boxConceptLink
----------------------------*/
.secWarranty {
    padding: 100px 0 200px;
    background: #f7f7f7;
    margin-top: 265px;
    position: relative;
}
.secWarranty::after {
    content: "";
    position: absolute;
    top: 61vw;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 0;
}

/* コンテンツが ::after の上に来るように */
.secWarranty > * {
    position: relative;
    z-index: 1;
}
.secWarranty .boxTitEng{
    position: relative;
}
.secWarranty .titEng{
    font-size: 30px;
    letter-spacing: 0.05em;
    color: rgba(0, 0, 0, 1);
    padding-right: 110px;
    position: absolute;
    top: -115px;
}
.secWarranty .titEng::before{
    content: '';
    width: 80px;
    height: 1px;
    background: rgba(0, 0, 0, 1);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.boxConceptLink{
	margin-top: 0;
}
.boxConceptLink .listConcept{
	display: flex;
    flex-wrap: wrap;
	gap: 25px 1.37%;
    justify-content: center;
}
.boxConceptLink .item{
	width: 32.42%;
    max-width: 590px;
    position: relative;
}
.boxConceptLink .item a{
	display: block;
	position: relative;
	overflow: hidden;
}
.boxConceptLink .boxImg{
	position: relative;
	width: 100%;
	padding-top: calc(700 / 590 * 100%);
	overflow: hidden;
}
.boxConceptLink .boxImg .bg,
.boxConceptLink .boxImg .circle{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.boxConceptLink .boxImg .bg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(6px);
	transform: scale(1.08);
	transition: filter 0.6s ease, transform 0.6s ease;
}
.boxConceptLink .boxImg .circle{
	display: flex;
	align-items: center;
	justify-content: center;
}
.boxConceptLink .boxImg .circle img{
	width: 360px;
	height: 360px;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
	transition: transform 0.6s ease, border-radius 0.6s ease, box-shadow 0.6s ease;
}
.boxConceptLink .item:hover .boxImg .bg img{
	transform: scale(1.02);
}
.boxConceptLink .item:hover .boxImg .circle img{
	transform: scale(1.6);
	box-shadow: 0 0 0 0 rgba(255,255,255,0);
}

/* item01: 中央360×360だけ非ぼかし → ホバーで全体クリア */
@property --mask-radius {
	syntax: '<length>';
	inherits: false;
	initial-value: 180px;
}
.boxConceptLink .item .boxImg .bg img{
	filter: none;
	transform: scale(1.02);
}
.boxConceptLink .item .boxImg::after{
	content: "";
	position: absolute;
	inset: 0;
	background: url(../img/housing_new/imgHousingLink01.jpg) center / cover no-repeat;
	filter: blur(4px) brightness(0.8);
	transform: scale(1);
	--mask-radius: 180px;
	transition: --mask-radius 0.6s ease; /* ホバー解除時は0.6秒 */
	/* 中央半径180px(360×360)だけ透明、外側をマスク */
	-webkit-mask: radial-gradient(circle var(--mask-radius) at 50% 50%, transparent 0 var(--mask-radius), #000 calc(var(--mask-radius) + 1px));
	mask: radial-gradient(circle var(--mask-radius) at 50% 42%, transparent 0 var(--mask-radius), #000 calc(var(--mask-radius) + 1px));
}
.boxConceptLink .item:hover .boxImg::after{
	--mask-radius: 1000px; /* 画面全体を覆う大きさに拡大 */
	transition: --mask-radius 2s ease; /* ホバー時は1秒 */
}
.boxConceptLink .boxTxt{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 30px 80px;
    color: #fff;
}
.boxConceptLink .labelTop{
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	letter-spacing: 0.15em;
}
.boxConceptLink .labelTop .num{
	border: 1px solid #fff;
	border-radius: 15px;
	width: 70px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    letter-spacing: 0.05em;
}
.boxConceptLink .labelTop .category{
    font-size: 22px;
    letter-spacing: 0.02em;
}
.boxConceptLink .labelBottom{
	text-align: center;
}
.boxConceptLink .labelBottom .titJp{
	font-size: 40px;
	letter-spacing: 0.1em;
}
.boxConceptLink .labelBottom .titSub{
	font-size: 20px;
	letter-spacing: 0.1em;
	margin-top: 25px;
    padding-bottom: 5px;
    border-bottom: 1px solid #fff;
    display: inline-block;
}
.boxConceptLink .item::after{
	content: "";
	position: absolute;
	right: 36px;
	bottom: 36px;
	width: 37px;
	height: 37px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.8);
	display: flex;
	align-items: center;
	justify-content: center;
}
.boxConceptLink .item::before{
    content: "";
    position: absolute;
    right: 52px;
    bottom: 50px;
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    transform: rotate(45deg);
    transform-origin: center;
    z-index: 1;
}
.boxConceptLink .boxImg::after {
    background: url(../img/housing_new/imgHousingLink01_sp.jpg) center / cover no-repeat;
}
.boxConceptLink .item02 .boxImg::after {
    background: url(../img/housing_new/imgHousingLink02.jpg) center / cover no-repeat;
}
.boxConceptLink .item03 .boxImg::after {
    background: url(../img/housing_new/imgHousingLink03.jpg) center / cover no-repeat;
}
.boxConceptLink .item04 .boxImg::after {
    background: url(../img/housing_new/imgHousingLink04.jpg) center / cover no-repeat;
}
.boxConceptLink .item05 .boxImg::after {
    background: url(../img/housing_new/imgHousingLink05.jpg) center / cover no-repeat;
}
.boxConceptLink .item06 .boxImg::after {
    background: url(../img/housing_new/imgHousingLink06.jpg) center / cover no-repeat;
}

@media only screen and (max-width:1750px){
    .boxConceptLink .item .boxImg::after{
        --mask-radius: 150px;
    }
}
@media only screen and (max-width:1600px){
    .boxConceptLink .item .boxImg::after{
        --mask-radius: 125px;
    }
    .boxConceptLink .boxTxt {
        padding: 30px 30px 80px;
    }
}
@media only screen and (max-width:1550px){
    .boxConceptLink .item .boxImg::after{
        --mask-radius: 100px;
    }
    .boxConceptLink .labelBottom .titJp {
        font-size: 34px;
        letter-spacing: 0.1em;
    }
    .boxConceptLink .labelBottom .titSub {
        font-size: 18px;
        letter-spacing: 0.1em;
        margin-top: 10px;
    }
}
@media only screen and (max-width:1300px){
    .boxConceptLink .item .boxImg::after{
        --mask-radius: 80px;
    }
}
@media only screen and (max-width:1024px){
	.boxConceptLink .listConcept{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and (max-width:767px){
    .secWarranty {
        padding: 55px 0 80px;
        margin-bottom: 80px;
        margin-top: 80px;
    }
    .secWarranty::after {
        display: none;
    }
    .secWarranty .titEng {
        font-size: 20px;
        letter-spacing: 0.03em;
        padding-right: 55px;
        top: -65px;
    }
    .secWarranty .titEng::before {
        width: 40px;
        height: 1px;
    }
	.boxConceptLink .listConcept{
		gap: 20px;
        flex-direction: column;
	}
    .boxConceptLink .item {
        width: 100%;
        max-width: unset;
        margin-bottom: 0px;
    }
    .boxConceptLink .labelTop .num {
        border-radius: 13.5px;
        width: 50px;
        height: 27px;
        font-size: 16px;
        letter-spacing: 0.03em;
    }
    .boxConceptLink .labelTop .category {
        font-size: 16px;
        letter-spacing: 0.03em;
    }
    .boxConceptLink .boxTxt {
        padding: 20px 20px 34px;
    }
    .boxConceptLink .labelBottom .titJp {
        font-size: 20px;
        letter-spacing: 0.05em;
    }
    .boxConceptLink .labelBottom .titSub {
        font-size: 13px;
        letter-spacing: 0.05em;
        margin-top: 13px;
    }
    .boxConceptLink .item::after {
        right: 20px;
        bottom: 20px;
        width: 23px;
        height: 23px;
    }
    .boxConceptLink .item::before {
        right: 30px;
        bottom: 28px;
        width: 6px;
        height: 6px;
    }
    .boxConceptLink .item .boxImg::after {
        display: none;
    }
    .boxConceptLink .boxImg {
        padding-top: calc(305 / 335 * 100%);
    }
}

/* btnMore */
.secWarranty .btnMore {
    width: 800px;
    height: 110px;
    border: 1px solid #000;
    padding: 0 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 20px;
    letter-spacing: 0.1em;
    margin: 100px auto 0;
    position: relative;
}
.secWarranty .btnMore::after {
    content: '';
    width: 140px;
    height: 8px;
    position: absolute;
    top: 50%;
    left: 60px;
    transform: translateY(-50%);
}
.secWarranty .btnMore.lazyloaded::after {
    background: url(../img/housing_new/btnMoreArrow_back.png) center left / cover no-repeat;
}
@media only screen and (max-width:767px){
    .secWarranty .btnMore {
        width: 89.335%;
        margin: 0 auto;
        height: 90px;
        padding: 0 18px;
        font-size: 15px;
        line-height: calc(24 / 16);
        letter-spacing: 0;
        margin: 70px auto 0;
        max-width: 400px;
    }
    .secWarranty .btnMore::after {
        width: 50px;
        height: 8px;
        left: 20px;
    }
}
@media only screen and (max-width:320px){
    .secWarranty .btnMore {
        width: 89.335%;
        margin: 0 auto;
        height: 70px;
        padding: 0 18px;
        font-size: 12px;
        line-height: calc(24 / 16);
        letter-spacing: 0;
        margin: 40px auto 0;
        max-width: 400px;
    }
}


/* secMovie */
.secMovie{
    margin-top: 100px;
    text-align: center;
}
.secMovie .boxVideo{
    width: 100%;
    /* text-align: center; */
}
.secMovie .boxVideo video{
    width: 100%;
    max-width: 800px;
    height: auto;
}
.secMovie .boxVideo .txtCaption{
    font-size: 16px;
    margin-top: 20px;
}
@media only screen and (max-width:767px){
    .secMovie{
        margin-top: 50px;
    }
    .secMovie .boxVideo video{
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .secMovie .boxVideo .txtCaption{
        font-size: 12px;
        margin-top: 10px;
    }
}