@charset "utf-8";
.bg01 { background-color: rgba(109, 121, 120, .7);}
.circle_light {
    position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	pointer-events: none;
	transition-delay: 1.25s;
	transition-duration: 1.75s, 2.75s;
}
.circle_light img { opacity: 0.9; }
.sec_design {
    padding-top: clamp(70px, 9.8214vw, 165px);
    overflow: hidden;
}
.notes {
    font-size: 1rem;
    letter-spacing: 0.1em;
}
.block_head {
	position: relative;
	z-index: 0;
    margin: 0 auto clamp(40px, 3.869vw, 65px);
}
.block_head .circle_light {
	width: 25.6%;
    width: clamp(120px,17.85714vw,300px);
	left: 0;
	top: 0;
    transform: translate(-20%,-20%);
}
.block_head.revert .circle_light {
	right: 0;
	left: auto;
	transform: translate(20%,-20%);
}
.block_head .block_wrap {
    display: flex;
    gap: 0;
    position: relative;
    margin: auto;
}
.block_head .cont {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 31.6%;
}
.block_head .cont .ttl_jp {
    font-size: clamp(1.7rem,1.30952381vw,2.2rem);
    margin: auto 0 20px;
    padding-right: 80px;
}
.block_head .cont .box {
	background: #3a4246;
	text-align: center;
	transition: all 0.25s linear;
	z-index: 2;
	position: relative;
	-webkit-mask-image: url(../imgs/mask.png);
	mask-image: url(../imgs/mask.png);
	mask-repeat: no-repeat;
	mask-size: auto 100%;
	padding: 40px 15px;
	margin-bottom: 30px;
    mask-position: left top;
    aspect-ratio: 368/256;
    width: clamp(220px,36.9vw,368px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.block_head.revert .cont .box {
    -webkit-mask-image: url(../imgs/mask_rev.png);
	mask-image: url(../imgs/mask_rev.png);
    mask-position: right top;
}
.block_head .cont .pos_link {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
}
.block_head .cont .ttl {
	color: #d8d3cb;
	font-size: clamp(1.5rem,1.547619vw,2.6rem);
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.4;
}
.block_head .cont .ttl .sm {
    font-size: 61.5%;
    letter-spacing: 0.05em;
}
.block_head .cont .ttl::before {
    content: "";
    background: url(../../common/imgs/icon_line.png) no-repeat center center/contain;
    width: 8px;
    height: 28px;
    margin: auto;
    display: block;
    margin: clamp(3px, 0.5952vw, 15px) auto clamp(3px, 0.5952vw, 15px);
}
.block_head .cont .ttl_sub {
    font-size: clamp(1.2rem, 1.3095vw,2.2rem);
    line-height: 2;
    letter-spacing: 0.15em;
    color: #fff;
}
.block_head .cont .txt {
	font-size: clamp(1.2rem,0.833333vw,1.4rem);
	line-height: 2.2;
	margin-top: 10px;
	color: #f0f0f0;
	padding-right: 35.5%;
	margin-bottom: auto;
	letter-spacing: 0.05em;
}
.block_head .img {
	position: relative;
	z-index: 0;
	flex: 1;
	margin-top: 140px;
}
.block_head .img .pos_rel .pic_cap {
    padding-right: 10px;
    padding-left: 10px;
}
.block_head .img .pos_rel img {
    height: 100%;
    object-fit: cover;
}
.block_head .img .mv {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.25s linear;
	overflow: hidden;
}
.block_head .img .mv img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.block_head.revert .block_wrap { flex-direction: row-reverse;}
.block_head.revert .cont .box {
    margin-right: 0;
}
.block_head.revert .cont .ttl_jp,
.block_head.revert .cont .txt { 
    padding-left: 40px;
    padding-right: 0;
}
@media screen and (max-width: 1024px) {
    .block_head .circle_light01 {
        width: 38%;
    }
    .block_head .circle_light04 {
	    width: 35.2%;
    }
}

@media screen and (max-width: 767px) {
    .block_head .block_wrap { flex-wrap: wrap;}
    .block_head .cont {
        width: 100% !important;
        order: 1;
        margin-top: 0;
    }
    .block_head.revert .cont .ttl_jp,
    .block_head .cont .ttl_jp {
        padding-right: 0;
        padding-left: 0;
        margin-bottom: 20px;
    }
    .block_head .img {
        width: 100%;
        margin: 0 !important;
        order: 1;
        flex: unset;
        padding-left: 5.5%;
        margin-top: 35px !important;
        margin-bottom: 20px !important;
    }
    .block_head.revert .img {
        padding-left: 0;
        padding-right: 0;
    }
	.block_head .cont .ttl_sub { line-height: 1.8;}
	.block_head .cont .ttl {
        letter-spacing: 0.1em;
    }
	.block_head .cont .txt { 
        line-height: 1.7;
        padding: 0!important;
        margin: 0;
        margin-top: 15px !important;
    }
    .block_head.revert .cont .box {
        margin-left: auto;
    }
}
.line_black { z-index: 0; }
.line_left {
	transform: translateX(-75%);
}
.line_right {
	transform: translateX(75%);
}
@media screen and (max-width: 1200px) {
    .line_left,
    .line_right {
        transform: translateX(0%);
    }
}
.sec_approach .block_head .cont {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: row;
    justify-self: flex-start;
    gap: clamp(30px,3.5714vw,60px);
}
.sec_approach .block_head .cont .box {
    margin: 0;
}
.sec_approach .block_head .cont .box02 { flex: 1; }
.sec_approach .block_head .cont .ttl_jp,
.sec_approach .block_head .cont .txt {
    padding: 0;
}

.sec_facade {
    padding-bottom: clamp(40px,13.0952vw,220px);
}
.sec_facade .block_head { margin: 0; }
.sec_facade .block_head .cont {
	display: block;
	position: relative;
	z-index: 1;
    width: auto;
}
.sec_facade .block_head .img { margin-top: 0; }
.sec_facade .block_head .img figure {
	width: 170%;
	margin-left: -18%;
}
.sec_facade .block_head.revert .cont .ttl_jp,
.sec_facade .block_head.revert .cont .txt {
	padding-left: 0;
	padding-right: 0;
    margin-top: 30px;
}
@media screen and (max-width: 1366px) {
    .sec_facade .block_head .img figure {
        width: 140%;
        margin-left: 0;
    }
}
@media screen and (max-width: 767px) {
    .sec_facade .block_head .img figure {
        width: 100vw;
        margin-left: -15px;
    }
    .sec_facade .block_head.revert .img { padding: 0; }
    .sec_facade .block_head .cont {
        order: 1;
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .sec_approach .block_head .cont {
        align-items: flex-start;
        flex-direction: column;
    }
}

.sec_corridor {
    padding-bottom: clamp(60px,6.547619vw,110px);
}
.sec_corridor .block_head {
    margin-bottom: clamp(60px,9.22619vw,155px);
    padding-left: 70px;
}
.sec_corridor .block_head .cont { width: auto; }
.sec_corridor .block_head .cont .txt { margin-bottom: 0; }
.notes {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
    .sec_corridor .block_head {
        padding-left: 0;
    }
}
@media screen and (max-width: 767px) {
    .sec_corridor .block_head {
        margin-bottom: 0;
    }
}