/* ==========================================================================
   common
========================================================================== */
.inner {max-width: 1980px;}
.title_common {margin-bottom: var(--size20-50);}
.title_common h2 {color: #fff;font-size: clamp(52px, calc(52px + 80 * ((100vw - 375px) / 1545)), 132px);}
.title_common p {position: relative;color: #fff;font-weight: 500;font-size: clamp(12px, calc(12px + 11 * ((100vw - 375px) / 1545)), 23px);}
/*--------------------------------------------------

	Top header

--------------------------------------------------*/
header.topheader {
  position: relative;
  z-index: 50;
  background: #fff;
  padding: clamp(16px, 1.8vw, 35px) clamp(20px, 2.5vw, 48px) 0;
}
header.topheader .logo {width: 55%;transition: 0s;}
header.topheader nav ul.global_nav_list {gap: 3.3vw;}
header.topheader nav ul.global_nav_list> li> a {color: #000;}
header.topheader nav ul.cta_list {
  display: flex;
  gap: 2px;
  position: absolute;
  top: clamp(16px, 1.6vw, 30px);
  right: clamp(16px, 1.6vw, 30px);
  z-index: 10;
  background: linear-gradient(-45deg, #AD7864, #864A2E 30%, #E0BC98 80%, #935943);
}
header.topheader nav ul.cta_list li {border-left-color: #fff;}
header.topheader nav ul.cta_list li a {
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: clamp(65px, 2.9vw, 75px);
  padding: 6px clamp(14px, 1.8vw, 34px);
  color: #fff;
  font-weight: 500;
  font-size: .84vw;
  line-height: 1.4;
  letter-spacing: 0;
}
header.topheader nav ul.cta_list li a:hover {opacity: 0.85;}
header.topheader nav ul.cta_list li a span.navy {display: none !important;}
header.topheader nav ul.cta_list li a span.black {display: flex !important;}
/* MV通過後は下層と同じ黒ヘッダー（.ScrollはJSが付与） */
@media only screen and ( min-width : 1025px ) {
  header.topheader.Scroll {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 0 0 1vw;
    background: #000;
    animation: header-slidein 0.4s ease;
 }
  header.topheader.Scroll .logo {width: 17%;}
  header.topheader.Scroll .logo img {filter: brightness(0) invert(1);}
  header.topheader.Scroll nav ul.global_nav_list {gap: 2vw;}
  header.topheader.Scroll nav ul.global_nav_list> li> a {color: #fff;font-size: calc(.74vw + 1px);}
  header.topheader.Scroll nav ul.cta_list {position: static;gap: 0;margin-left: 2vw;background: none;}
  header.topheader.Scroll nav ul.cta_list li {border-left-color: #707070;}
  header.topheader.Scroll nav ul.cta_list li a {gap: .8em;min-height: 0;padding: 1vw;font-size: .74vw;}
  body:has(header.topheader.Scroll) {padding-top: var(--topheader-h, 0px);}
  @keyframes header-slidein {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0);}
 }
}
@media only screen and ( max-width : 1024px ) {
  header.topheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    height: var(--header-h);
    padding: 0 12px 0 20px;
    transition: background-color 0.3s;
 }
  header.topheader:has(#menu-toggle[aria-expanded="true"]) {background: #000;}
  header.topheader:has(#menu-toggle[aria-expanded="true"]) .logo img {filter: brightness(0) invert(1);}
  header.topheader .logo {width: clamp(150px, 40vw, 200px);}
  header.topheader #menu-toggle span:not(.visually-hidden) {background: #000;}
  header.topheader #menu-toggle[aria-expanded="true"] span:not(.visually-hidden) {background: #fff;}
  header.topheader nav ul.cta_list li a span.navy {display: flex !important;}
  header.topheader nav ul.cta_list li a span.black {display: none !important;}
}
/*--------------------------------------------------

	Main Visual │ メインビジュアル

--------------------------------------------------*/
#mv {position: relative;padding: 8vw 0 4vw;background: #fff url(../img/front/mv/bg.webp) no-repeat top right / 70%;animation: mv-bg-in 1.6s ease-out both, mv-focus 1.1s ease-out both;}
#mv .wrap {margin-bottom: 5%;}
#mv .wrap h1 {margin-bottom: .5em;font-weight: 600;font-size: 2.9vw;line-height: 1.7;text-align: center;}
#mv .wrap h1 .ch {display: inline-block;opacity: 0;animation: ch-settle .9s cubic-bezier(.16,.84,.44,1) both;animation-delay: calc(var(--i, 0) * 26ms);}
#mv .wrap h1 .ch:nth-child(4n) {--rx: 1;--ry: 1;--rr: 1;}
#mv .wrap h1 .ch:nth-child(4n+1) {--rx: -1;--ry: 1;--rr: -1;}
#mv .wrap h1 .ch:nth-child(4n+2) {--rx: 1;--ry: -1;--rr: 1;}
#mv .wrap h1 .ch:nth-child(4n+3) {--rx: -1;--ry: -1;--rr: -1;}
#mv .wrap p {opacity: 0;animation: mv-rise 1.1s cubic-bezier(.16,.84,.44,1) both;font-size: 1vw;letter-spacing: .006em;text-align: center;animation-delay: .55s;}
#mv .scroll {text-align: center;opacity: 0;animation: mv-fade .9s ease both;animation-delay: 1.25s;}
#mv .scroll a {display: inline-flex;flex-direction: column;align-items: center;position: relative;font-size: 1vw;}
#mv .scroll a::after {
  content: '';
  width: 1px;
  height: clamp(60px, 8vw, 150px);
  background: #333;
  animation: scroll-line 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scroll-line {
  0% {transform: scaleY(0);}
  45% {transform: scaleY(1);}
  100% {transform: scaleY(1);opacity: 0;}
}
@keyframes mv-rise {
  from {opacity: 0;transform: translateY(30px);}
  to {opacity: 1;transform: translateY(0);}
}
@keyframes mv-fade {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes mv-bg-in {
  from {background-size: 76%;}
  to {background-size: 70%;}
}
@keyframes mv-focus {
  from {filter: blur(16px);}
  to {filter: blur(0);}
}
@keyframes ch-settle {
  from {opacity: 0;transform: translate(calc(var(--rx, 1) * 12px), calc(var(--ry, 1) * -10px)) rotate(calc(var(--rr, 1) * 8deg));}
  to {opacity: 1;transform: none;}
}
@media (prefers-reduced-motion: reduce) {
  #mv,
  #mv .wrap h1,
  #mv .wrap h1 .ch,
  #mv .wrap p,
  #mv .scroll {opacity: 1;animation: none;transform: none;filter: none;}
}
@media only screen and ( max-width : 1024px ) {
  #mv .wrap {margin-bottom: 21%;}
  #mv .wrap h1 {font-size: 3.45vw;}
  #mv .wrap p {font-size: 1.7vw;}
}
@media only screen and ( max-width : 767px ) {
  #mv {margin-top: 18vw;background-image: url(../img/front/mv/bg-sp.webp);background-position: right bottom;}
  #mv .wrap {margin-bottom: 34%;}
  #mv .wrap h1 {font-size: 6.5vw;}
  #mv .wrap p {font-size: 2.5vw;}
  #mv .scroll a {font-size: 2.2vw;}
}
/*--------------------------------------------------

	Latest Updates │ 新着情報

--------------------------------------------------*/
#latest_updates {padding-bottom: 7%;}
#latest_updates::before {content: '';position: absolute;left: 0;bottom: -1px;width: 100%;height: 150%;background: var(--navy);clip-path: polygon(0 0, 100% 100%, 0 100%);}
#latest_updates .block {position: relative;z-index: 1;width: 95%;margin-left: auto;padding: var(--size60) 0 var(--size60) 20%;background: #F8F8F8;}
#latest_updates .block::before {content: '';position: absolute;top: -1px;left: -1px;width: 100%;height: 100%;background: var(--navy);clip-path: polygon(0 0, 20% 0, 0% 100%);}
#latest_updates .block .head {display: flex;align-items: flex-end;gap: var(--size70);margin: 0 0 var(--size50) 3em;}
#latest_updates .block .head .title_wrap p {font-weight: 500;}
#latest_updates .block .head .title_wrap h2 {font-size: clamp(21px, calc(21px + 40 * ((100vw - 375px) / 1545)), 61px);letter-spacing: 0;}
#latest_updates .block .head .slider_wrap {display: flex;align-items: center;gap: var(--size70);padding-bottom: .8em;}
#latest_updates .block .head .slider_wrap .more {display: flex;gap: 20px;align-items: center;color: var(--navy);font-weight: 700;font-size: var(--font13);letter-spacing: 0;transition: opacity 0.25s;}
#latest_updates .block .head .slider_wrap .more:hover {opacity: 0.6;}
#latest_updates .block .head .slider_wrap .more span {padding-right: 20px;border-right: 1px solid #B2B9C1;}
#latest_updates .block .head .slider_wrap .more img {width: 16px;}
#latest_updates .block .head .slider_wrap .button_content {display: flex;gap: 15px;}
#latest_updates .block .head .slider_wrap .button_content button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 1.8vw, 33px);
  height: clamp(28px, 1.8vw, 33px);
  border: none;
  border-radius: 50%;
  background: #EBEBEB;
  transition: .3s;
  user-select: none;
}
#latest_updates .block .head .slider_wrap .button_content button:disabled {opacity: .35;pointer-events: none;}
#latest_updates .block .head .slider_wrap .button_content button img {width: 30%;}
#latest_updates .block .head .slider_wrap .button_content button:first-child img {transform: scale(-1, 1);}
#latest_updates .block ul.list {display: flex;gap: clamp(14px, 5.6vw, 107px);margin-top: clamp(24px, 2.6vw, 50px);overflow-x: auto;scroll-snap-type: x mandatory;scrollbar-width: none;-webkit-overflow-scrolling: touch;}
#latest_updates .block ul.list::-webkit-scrollbar {display: none;}
#latest_updates .block ul.list li {flex: 0 0 clamp(200px, 16.6vw, 318px);scroll-snap-align: start;position: relative;letter-spacing: .1em;transition: opacity .3s;}
#latest_updates .block ul.list li:hover {opacity: 0.75;}
#latest_updates .block ul.list li figure {margin-bottom: 10px;border-radius: 0;overflow: hidden;aspect-ratio: 318 / 217;background: #fff;}
#latest_updates .block ul.list li figure img {width: 100%;height: 100%;object-fit: cover;}
#latest_updates .block ul.list li dl {display: flex;align-items: center;margin-bottom: 10px;}
#latest_updates .block ul.list li dl dt time {color: var(--blue);font-weight: 700;letter-spacing: .03em;font-size: var(--font15);}
#latest_updates .block ul.list li dl dd {margin-left: .8em;}
#latest_updates .block ul.list li dl dd .cate-pill {
  display: inline-block;
  padding: .35em 1em;
  background: rgba(7, 25, 58, .08);
  color: var(--blue);
  font-weight: 700;
  font-size: var(--font12);
  letter-spacing: .05em;
}
@media only screen and ( max-width : 767px ) {
  #latest_updates .block {width: 100%;padding-left: 7%;}
  #latest_updates .block::before {height: 30%;}
  #latest_updates .block .head {display: block;}
  #latest_updates .block .head .title_wrap {margin-bottom: 10px;}
  #latest_updates .block .head .slider_wrap {padding-bottom: 0;}
}
/*--------------------------------------------------

	Misson │ アヴェントハウスのミッション

--------------------------------------------------*/
#misson {overflow: hidden;}
#misson .misson_band {margin-bottom: -6vw;}
#misson .misson_band .front_wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100vw;
  height: 9.2vw;
  overflow: hidden;
  background: var(--navy);
}
#misson .misson_band .marquee_track {display: flex;width: max-content;will-change: transform;}
#misson .misson_band .front_wrap .marquee_track {animation: misson-marquee-right 24s linear infinite;}
#misson .misson_band .back_wrap .marquee_track {animation: misson-marquee-right 24s linear infinite;}
#misson .misson_band p {
  margin: 0 2vw;
  font-size: 18vw;
  line-height: 1.1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0;
}
#misson .misson_band .back_wrap p {-webkit-text-stroke: 1px #001183;}
@keyframes misson-marquee-left {
  from {transform: translateX(0);}
  to {transform: translateX(-50%);}
}
@keyframes misson-marquee-right {
  from {transform: translateX(-50%);}
  to {transform: translateX(0);}
}
@media (prefers-reduced-motion: reduce) {
  #misson .misson_band .marquee_track {animation: none;}
}
#misson .block {padding: 0 clamp(20px, calc(20px + 50 * ((100vw - 375px) / 1545)), 70px) var(--size70);background: #fff;}
#misson .block .container {position: relative;padding: var(--size20-50);background: url(../img/front/mission/bg.webp) no-repeat center / cover;}
#misson .block .container .title_common {position: absolute;top: var(--size20-50);left: var(--size20-50);}
#misson .block .container .wrap {max-width: 794px;margin: 0 auto;padding: var(--size50) 10px;background: rgba(255, 255, 255, 65%);}
#misson .block .container .wrap h3 {margin-bottom: 20px;font-size: var(--font12);letter-spacing: 0.18em;text-align: center;}
#misson .block .container .wrap h3 span {display: block;margin-top: 5px;font-weight: 700;font-size: var(--font24);line-height: 1.4;text-align: center;}
#misson .block .container .wrap figure {max-width: clamp(128px, calc(50px + 56 * ((100vw - 375px) / 1545)), 184px);margin: 0 auto var(--size30);}
#misson .block .container .wrap .line {max-width: clamp(260px, calc(50px + 262 * ((100vw - 375px) / 1545)), 522px);margin: 0 auto var(--size30);}
#misson .block .container .wrap .content h4 {max-width: clamp(198px, calc(50px + 211 * ((100vw - 375px) / 1545)), 409px);margin: 0 auto var(--size40);}
#misson .block .container .wrap .content p {margin-bottom: var(--size50);font-size: var(--font12);text-align: center;}
#misson .block .container .wrap .content p span {display: block;margin-top: 15px;font-weight: 700;font-size: var(--font22);line-height: 1.7;letter-spacing: .1em;text-align: center;}
#misson .block .container .wrap .content .view {margin: 0 auto;}
@media only screen and ( max-width : 767px ) {
  #misson .block {padding-right: 12px;padding-left: 12px;}
  #misson .block .container {padding: var(--size40) var(--size20);}
  #misson .block .container .title_common {position: initial;}
}
/*--------------------------------------------------

	共通セクション（About / Land / Works / Building）

--------------------------------------------------*/
.common_section {overflow: hidden;padding: var(--size20-150) 0 var(--size150);}
.common_section.bg_navy {background: var(--navy);color: #fff;}
#land_utilization {background: #F2F2F2 url(../img/front/land_utilization/bg.webp) no-repeat center bottom / cover;}
#building_performance {background: #F2F2F2 url(../img/front/building_performance/bg.webp) no-repeat center bottom / cover;}
.common_section .inner {max-width: 1650px;}
.common_section .title_common h2 {position: relative;z-index: 2;color: transparent;line-height: 1.3;}
#building_performance .title_common h2 {font-size: clamp(49px, calc(49px + 70 * ((100vw - 375px) / 1545)), 119px);}
.common_section .title_common h2 .svg-heading {position: absolute;top: 0;left: 0;width: 100%;height: 1.7em;overflow: visible;pointer-events: none;}
#land_utilization .title_common h2 .svg-heading,
#building_performance .title_common h2 .svg-heading {height: 3.3em;}
.common_section .title_common h2 .svg-heading text {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
  stroke-dasharray: var(--dash-len, 1400);
  stroke-dashoffset: var(--dash-len, 1400);
  transition: stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1);
}
.common_section .title_common h2 .svg-heading.is-visible text {stroke-dashoffset: 0;}
.common_section.bg_navy .title_common h2 .svg-heading text {stroke: #fff;}
@media (prefers-reduced-motion: reduce) {
  .common_section .title_common h2 .svg-heading text {stroke-dashoffset: 0;transition: none;}
}
.common_section.bg_gray .title_common p {color: #000;}
.common_section.bg_gray .title_common p::before {background: #000;}
.common_section .container {position: relative;}
.common_section .container .wrap {width: 50%;}
.common_section .container .wrap figure {position: absolute;top: 50%;right: calc(50% - 55vw);z-index: 1;transform: translateY(-50%);width: 60%;}
.common_section .container .wrap .content.fadein {transition-delay: .18s;}
.common_section .container .wrap .content h3 {
  position: relative;
  margin-bottom: var(--size20-40);
  padding: .4em 0;
  font-size: var(--font29);
  font-weight: 500;
  line-height: 1.7;
}
.common_section .container .wrap .content h3::before {
  content: '';
  position: absolute;
  left: clamp(-130px, -6.8vw, -20px);
  bottom: 0;
  z-index: -1;
  width: 210px;
  height: 100%;
  background: url(../img/common/bg-brown.webp) no-repeat bottom left / 100%;
}
.common_section .container .wrap .content h3::after {content: '';position: absolute;bottom: 0;left: 0;z-index: -1;width: 100vw;height: 1px;background: #935943;}
.common_section .container .wrap .content p {max-width: 607px;margin-bottom: var(--size20-50);letter-spacing: .025em;}
#building_performance ul {position: relative;margin-top: var(--size100);background: #fff;}
#building_performance ul li {width: 25%;position: relative;}
#building_performance ul li:not(:last-child)::before {content: '';position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: 1px;height: 40%;background: #B2B9C1;}
#building_performance ul a {
  position: relative;
  display: block;
  padding: var(--size20-50) 10px var(--size60);
  font-size: var(--font24);
  font-weight: 500;
  text-align: center;
  transition: color 0.25s;
}
#building_performance ul a:hover {color: var(--blue);}
#building_performance ul a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 1em;
  height: 1em;
  transform: translateX(-50%);
  background: url(../img/common/arrow/Icon_arrowD-gray.svg) no-repeat center / 100%;
  transition: .3s;
}
#building_performance ul a:hover::after {background-image: url(../img/common/arrow/Icon_arrowD-blue.svg);}
@media only screen and ( max-width : 767px ) {
  #land_utilization {background: #F2F2F2 url(../img/front/land_utilization/bg-sp.webp) no-repeat top center / 100%;}
  .common_section .container .wrap {width: 100%;}
  .common_section .container .wrap figure {position: initial;transform: none;width: 100vw;margin: 0 calc(50% - 50vw) 30px;}
  #building_performance ul li {width: 50%;}
  #building_performance ul li::before {display: none;}
  #building_performance ul li:nth-child(-n+2) {border-bottom: 1px solid #B2B9C1;}
}