@charset "UTF-8";

/* fv
-------------------------------*/
.fv { position: fixed; top: 0; left: 0; width: 100%; height: 100svh; z-index: 0; }
.fv__movie { width: 100%; height: 100%; }
.fv__movie video { width: 100%; height: 100%; object-fit: cover; }
.fv__txt-wrap { position: absolute; bottom: 47px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 5px; grid-row-gap: 5px; width: calc(100% - 60px); }
.fv__txt { opacity: 0; }
.fv__txt--1 { grid-area: 1 / 1 / 2 / 2; }
.fv__txt--2 { grid-area: 1 / 2 / 2 / 3; }
.fv__txt--3 { grid-area: 1 / 3 / 2 / 4; }
.fv__txt--4 { grid-area: 1 / 4 / 2 / 5; }
.fv__txt--5 { grid-area: 2 / 1 / 3 / 2; }
.fv__txt--6 { grid-area: 2 / 2 / 3 / 3; }
.fv__txt--7 { grid-area: 2 / 3 / 3 / 4; }
.fv__txt--8 { grid-area: 2 / 4 / 3 / 5; }
.fv__txt--9 { grid-area: 2 / 5 / 3 / 6; }
.fv__txt--10 { grid-area: 2 / 6 / 3 / 7; }
.fv__txt--11 { grid-area: 2 / 7 / 3 / 8; }
.fv__txt._show { opacity: 1; }
@media screen and (max-width: 680px) {
	.fv__scr { display: none; }
}
@media screen and (min-width: 681px) {
	.fv { }
	.fv__txt-wrap { bottom: auto; top: 133px; left: 162px; transform: none; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); grid-column-gap: 3px; grid-row-gap: 3px; width: 186px; }
	/* transform: translateX(-240%);*/
	.fv__txt { width: 60px; height: 60px; }
	.fv__txt--1 { grid-area: 1 / 3 / 2 / 4; }
	.fv__txt--2 { grid-area: 2 / 3 / 3 / 4; }
	.fv__txt--3 { grid-area: 3 / 3 / 4 / 4; }
	.fv__txt--4 { grid-area: 4 / 3 / 5 / 4; }
	.fv__txt--5 { grid-area: 1 / 2 / 2 / 3; }
	.fv__txt--6 { grid-area: 2 / 2 / 3 / 3; }
	.fv__txt--7 { grid-area: 3 / 2 / 4 / 3; }
	.fv__txt--8 { grid-area: 4 / 2 / 5 / 3; }
	.fv__txt--9 { grid-area: 1 / 1 / 2 / 2; }
	.fv__txt--10 { grid-area: 2 / 1 / 3 / 2; }
	.fv__txt--11 { grid-area: 3 / 1 / 4 / 2; }
.fv__scr { position: absolute; left: 112px; bottom: 0; width: 10px; height: 84px; }
.fv__scr:before { position: absolute; top: 47px; left: 50%; display: block; width: 1px; height: 0; background-color: #fff; content: ""; animation: top2bottom 3s 1.2s ease infinite; transform-origin: bottom center; }
}




/* Message
-------------------------------*/
.sec--msg { padding-bottom: 50px; }
.msg__catch { margin-top: 50px; }
.msg__catch img { width: 305px; }

.msg__text-wrap { margin-top: 42px; font-family: YakuHanMP_Noto, "Noto Serif JP", serif; font-size: 1.4rem; font-weight: 200; line-height: 1; }
.msg__text { display: block; }
.msg__text--comma::after { content: "、"; }
.msg__text--period::after { content: "。"; }
.msg__text ._has-comma::after { content: "、"; }
@media screen and (max-width: 374px) {
	.msg__text-wrap { letter-spacing: -0.05em; }
}
@media screen and (max-width: 680px) {
	.msg__text-wrap { margin-right: -30px; }
	.msg__text:not(:first-of-type) { margin-top: 20px; }
	.msg__text br { display: none; }
	
}
@media screen and (min-width: 681px) {
	.sec--msg { padding-bottom: 115px; }
	.msg__catch { margin-top: 72px; text-align: center; }
	.msg__catch img { width: 660px; }
	.msg__text-wrap { position: relative; left: 50%; transform: translateX(-50%); margin-top: 58px; font-size: 1.8rem; font-weight: 600; writing-mode: vertical-rl; }
	.msg__text { position: relative; display: inline-block; letter-spacing: 0.1em; }
	.msg__text:not(:first-of-type) { margin-right: 33px; }
	.msg__text::after { position: absolute; bottom: -8px; right: -8px; }
	.msg__text ._en { text-combine-upright: all; }
	.msg__text ._lslesser { letter-spacing: -0.2em; }
	.msg__text ._has-comma { position: relative; display: inline-block; margin-bottom: 15px; }
	.msg__text ._has-comma::after { position: absolute; bottom: -11px; right: -8px; text-combine-upright: all; }
}


/* Philosophy of Architects
-------------------------------*/
.sec--poa {  }
.poa-wrap { margin-top: 70px; }
.poa { position: relative; }
.poa__bg { position: absolute; top: 0; display: block; width: 100vw; height: 100%; z-index: 0; }

.poa--1 .poa__bg { top: -25px; }
.poa__img,
.poa__inner { position: relative; z-index: 50; }
.poa__num,
.poa__ttl,
.poa__txt { z-index: 10; }
.poa__num { position: relative; margin-bottom: 25px; }
.poa__num::before { position: absolute; bottom: -14px; left: -30px; right: -15px; display: block; width: calc(100% + 45px); height: 1px; background: #28a5ff; content: ""; }
.poa__num img { width: auto; height: 89px; }
.poa__ttl {  }
.poa__ttl img { width: auto; height: 93px; }
.poa__txt { position: relative; margin-top: 23px; font-family: YakuHanMP_Noto, "Noto Serif JP", serif; font-size: 1.5rem; font-weight: 600; line-height: 1.8667; }
.poa__btn-wrap { margin-top: 40px; }
@media screen and (max-width: 680px) {
	.poa { padding-bottom: 55px; }
	.poa__bg { left: 50%; transform: translateX(-50%); }
	.poa__bg img { width: 100%; height: 100%; object-fit: cover; }
	.poa__inner { margin-top: -30px; }
	.poa__img { position: relative; }
	.poa:nth-of-type(odd) .poa__img { margin-left: -30px; margin-right: -15px; }
	.poa:nth-of-type(even) .poa__img { margin-left: -15px; margin-right: -30px; }
	.poa__btn-wrap { text-align: center; }
}
@media screen and (min-width: 681px) {
	.sec--poa { padding-bottom: 110px; }
	.poa-wrap { margin-top: 144px; }
	.poa { position: relative; padding-top: 26px; }
	.poa:not(:first-of-type) { margin-top: 206px; }
	.poa:nth-of-type(odd) { padding-left: 595px; }
	.poa:nth-of-type(even) { padding-right: 595px; }
	.poa__bg { top: 50%; transform: translateY(-50%); width: 565px; height: 960px; }
	.poa__bg img { width: 565px; }
	.poa--1 .poa__bg { top: 50%; right: -100px !important; }
	.poa:nth-of-type(odd) .poa__bg { right: -100px; }
	.poa:nth-of-type(even) .poa__bg { left: -100px; }
	
	.poa__img { position: absolute; bottom: 0; width: 635px; z-index: 100; }
	.poa:nth-of-type(odd) .poa__img { left: -100px; }
	.poa:nth-of-type(even) .poa__img { right: -100px; }
	.poa__num { margin-bottom: 32px; }
	.poa__num::before { bottom: 0; left: 50%; transform: translateX(-50%); right: auto; width: 100vw; }
	.poa__num img { height: 122px; }
	.poa__ttl img { height: 102px; }
	.poa__txt { font-size: 1.4rem; line-height: 1.92857; }
	.poa__btn { max-width: 148px; }
	
	.poa--2 .poa__inner { padding-left: 115px; }
	.poa--2 .poa__num { margin-left: -15px; }
}
@media screen and (min-width: 1201px) {
	.poa__bg { width: 50vw; }
	.poa:nth-of-type(odd) .poa__bg { right: 50% !important; transform: translate(100%, -50%); }
	.poa:nth-of-type(even) .poa__bg { left: 50% !important; transform: translate(-100%, -50%); }
	.poa__bg img { min-width: 899px; width: 100%; }
	.poa__img { height: 540px; }
	.poa__img img { width: 100%; height: 100%; object-fit: cover; }
	.poa:nth-of-type(odd) .poa__img { left: auto; right: 465px; width: calc(50% + 50vw - 465px); }
	.poa:nth-of-type(even) .poa__img { right: auto; left: 465px; width: calc(50% + 50vw - 465px); }
}


/* About
-------------------------------*/
.sec--about { position: relative; padding-bottom: 294px; z-index: 10; }
.sec--about .l-wrapper { position: relative; }
.about-cmnttl-sub img { height: 15px !important; }
.about-subttl { margin-top: 37px; }
.about-subttl img {  width: 311px;}
.about-catch-wrap { margin-top: 25px; }
.about-catch { }
.about-catch img { width: 232px; }
.about-txt { font-family: YakuHanMP_Noto, "Noto Serif JP", serif; font-size: 1.4rem; font-weight: 600; line-height: 1.92857; letter-spacing: 0.11em; }
.about-img--2,
.about-img--3 { position: absolute; }
@media screen and (max-width: 680px) {
	.sec--about { padding-top: 70px; }
	.about-cmnttl-sub { margin-top: 20px !important; }
	.about-subttl,
	.about-catch-wrap,
	.about-catch { text-align: center; }
	.about-catch { position: relative; display: inline-block; }
	.about-catch__deco { position: absolute; top: 50%; transform: translateY(-46%); display: block; width: 7px; height: calc(100% + 14px); }
	.about-catch__deco::before,
	.about-catch__deco::after { position: absolute; display: block; width: 100%; height: 1px; background: #14145a; content: ""; }
	.about-catch__deco::before { top: 0; }
	.about-catch__deco::after { bottom: 0; }
	.about-catch__deco--left { left: -15px; border-left: 1px solid #14145a; }
	.about-catch__deco--left::before,
	.about-catch__deco--left::after { left: 0; }
	.about-catch__deco--right { right: -15px; border-right: 1px solid #14145a; }
	.about-catch__deco--right::before,
	.about-catch__deco--right::after { right: 0; }
	
	.about-img--1 { position: relative; margin: 34px -30px 36px; }
	.about-img--2,
	.about-img--3 { z-index: 50; }
	.about-img--2 { bottom: -140px; right: 68.2%; width: calc(50% + 50vw - 215px); height: 180px; }
	.about-img--3 { bottom: -238px; left: 43%; width: calc(50% + 50vw - 135px); height: 200px; }
	.about-img--2 img,
	.about-img--3 img { width: 100%; height: 100%; object-fit: cover; }
	.about-btn-wrap { margin-top: 43px; text-align: right; }
}
@media screen and (min-width: 681px) {
	.sec--about .l-wrapper { padding-left: 50px; }
	.about-cmnttl-wrap { text-align: left; }
	.about-cmnttl-main img { height: 57px !important;}
	.about-cmnttl-sub img { height: 19px !important; }
	.about-subttl { margin-top: 56px; }
	.about-subttl img {  width: 523px;}
	.about-catch-wrap { margin-top: 36px; }
	.about-catch img { width: 543px; }
	.about-img--1 { position: absolute; top: 96px; right: -100px; }
	.about-img--1 img { width: 434px; }
	.about-img--2 { top: 612px; right: 177px; }
	.about-img--2 img { width: 248px; }
	.about-img--3 { top: 357px; left: -100px;}
	.about-img--3 img { width: 278px; }
	.about-txt { margin-top: 53px; margin-left: 196px; }
	.about-btn-wrap { margin-top: 31px; margin-left: 196px; }
	.about-btn { max-width: 148px; }
}




/* Builders
-------------------------------*/
.sec--builders { height: 150px; background: url("../img/home/bg_builders_sp.jpg") no-repeat 50% 100%/cover; }/* padding-top: 30px; padding-bottom: 30px;*/
.builders-link { display: block; max-width: 460px; margin: 0 auto; }
.builders-link__thumb { position: relative; display: block; background: #fff; overflow: hidden; }
.builders-link__thumb__img { transition: .4s ease; }
.builders-link__ttl-wrap { position: relative; border-bottom: 1px solid #14145a; margin-top: 16px; padding-bottom: 8px; }
.builders-link__ttl { display: flex; align-items: baseline; font-family: YakuHanMP_Noto, "Noto Serif JP", serif; font-size: 1.7rem; font-weight: 600; line-height: 1; letter-spacing: 0.11em; }
.builders-link__ttl__main,
.builders-link__ttl__sub { font-weight: 600; }
.builders-link__ttl__sub { margin-left: 5px; font-size: 60%; }
.builders-link__icon { position: absolute; right: 0; top: 50%; transform: translateY(-58%); display: flex; justify-content: center; align-items: center; width: 23px; height: 23px; background: #14145a; border-radius: 50%; }
.builders-link__icon::before { width: 7px; height: 6px; background: url("../common/img/icon_arrow_irr.png") no-repeat center/contain; content: ""; }
@media screen and (max-width: 680px) {
	
}
@media screen and (min-width: 681px) {
	.sec--builders { height: 300px; background-image: url("../img/home/bg_builders_pc.jpg"); }/*	 padding-top: 102px; padding-bottom: 96px;	*/
	.builders-link__ttl-wrap { margin-top: 31px; padding-bottom: 11px; }
	.builders-link__ttl { font-size: 2.5rem; font-weight: 600; }
	.builders-link__ttl__sub { margin-left: 15px; }
	.builders-link__icon { transform: translateY(-68%); width: 34px; height: 34px; }
	.builders-link__icon::before { width: 10px; height: 8px; }
	.builders-link__thumb:hover .builders-link__thumb__img { transform: scale(1.05); opacity: 0.8; }
}
@media screen and (min-width: 1401px) {
	.sec--builders { background-image: url("../img/home/bg_builders_lpc.jpg"); }
}


/* Bar Animation
-------------------------------*/
.bar-wrap {}
.bar-wrap--1 { position: absolute; top: -25px; left: -30px; z-index: 100; }
.bar-wrap--1 img { height: 50px; }
.bar-wrap--2 { position: absolute; right: -30px; bottom: 70px; }
.bar-wrap--2 img { height: 50px; }
.bar-wrap--3 { position: absolute; bottom: 0; right: 0; }
.bar-wrap--3 img { width: 50px; min-height: 470px; }
.bar-wrap--4 { position: absolute; top: -25px; left: -30px; z-index: 100; }
.bar-wrap--4 img { height: 50px; }
.bar-wrap--5 { position: absolute; right: -30px; bottom: 75px; }
.bar-wrap--5 img { height: 50px; }
@media screen and (max-width: 680px) {
	
}
@media screen and (min-width: 681px) {
	.bar-wrap--1,
	.bar-wrap--4 { display: none; }
	.bar-wrap--2 { right: -100px; }
	.bar-wrap--2 img { height: 100px; }
	.bar-wrap--3 { right: auto; left: -50px;}
	.bar-wrap--3 img { width: 100px; min-height: 540px; }
	.bar-wrap--5 { bottom: 0; right: -100px; }
	.bar-wrap--5 img { height: 100px; }
}
@media screen and (min-width: 1201px) {
	.bar-wrap--2 { right: auto; left: 263px; width: calc(50% + 50vw - 560px); }
	.bar-wrap--5 { right: auto; left: 235px; width: calc(50% + 50vw - 532px); }
}

/* Animation
-------------------------------*/
@keyframes top2bottom {
  0% { height: 0; top: 47px; transform: translateX(-50%); }
  40% { height: 36px; top: 47px; transform: translateX(-50%); }
  60% { height: 36px; top: 47px; transform: translateX(-50%); }
  100% { height: 36px; top: 47px; transform: translateX(-50%) scale(1, 0); }
}