@charset "UTF-8";

/* ヘッダーを最初に隠しておく */
header.g{opacity: 0; pointer-events: none;}
/* スクロール or ハンバーガー押したら表示 */
header.g.active
{opacity: 1; pointer-events: initial;}
@media screen and (max-width:960px){
.page:has(.trigger_gnav.open) header.g
{opacity: 1; pointer-events: initial;}
}

/* サービスのナビゲーションの色 */
ul.service a.construction:before,
ul.service a.construction:after{color: var(--color-construction);}
ul.service a.housing:before,
ul.service a.housing:after{color: var(--color-housing);}
ul.service a.estate:before,
ul.service a.estate:after{color: var(--color-estate);}
ul.service a.eco:before,
ul.service a.eco:after{color: var(--color-eco);}
ul.service a.community:before,
ul.service a.community:after{color: var(--color-community);}

/* ファーストビュー */
.fv{font-size: min(1vw,20px); position: relative; width: 100%; height: 100vh; margin: -100px auto 0;}

.fv_logo{position: absolute; top: 60px; left: 80px; width: 12%;}

.fv_catch{position: absolute; bottom: calc(12em + 80px); left: 80px;}
.fv_catch img{height: 2em;}

.fv_news{position: absolute; bottom: 80px; left: 80px; width: min(45% - 160px); height: 7.5em; overflow-y: scroll;}
.fv_news ul.news{margin: 0;}

.fv_slider{position: absolute; top: 80px; bottom: 80px; left: 45%; width: 32%;}
.slider1 img{width: 100%; height: calc(100vh - 160px); object-fit: cover;}

.slider1_thumb{width: 5em; position: absolute !important; right: 0; bottom: -0.5em; transform: translateX(calc(100% + 1em));}
.slider1_thumb img{width: 100%; height: auto; aspect-ratio:1/1; object-fit: cover;}
.slider1_thumb .slick-slide{border: none; padding: 0.5em; position: relative; cursor: pointer; opacity: 0.6; filter: saturate(0%) contrast(120%); transition: 0.2s opacity ,0.2s filter;}
.slider1_thumb .slick-slide:not(.slick-current):hover{opacity: 1; filter: saturate(100%) contrast(100%);}
.slider1_thumb .slick-current{opacity: 1; filter: saturate(100%) contrast(100%);}
.slider1_thumb .slick-current:before{content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 100; top: 0; left:0; border: 2px solid #000;}

.fv_nav{position: absolute; top: 120px; right: 80px; display: flex; flex-direction: column; align-items: flex-end;}
.fv_nav ul{line-height: 1.4;}
.fv_nav ul+ul{margin-top: 2em;}
.fv_nav ul>li>a{color: #000; text-decoration: none; font-weight: bold; display: flex; align-items: center; justify-content: flex-end; position: relative; padding: 0 1.5em 0 0; min-height: 2em;}
.fv_nav ul>li>a:hover{background: #f5f5f5;}
.fv_nav ul>li>a:after{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f178"; position:absolute; top:50%; right:0; transform: translateY(-50%);}

.fv_nav ul.service{font-size: 110%;}
.fv_nav ul.service>li>a{min-height: 2.5em;}
.fv_nav ul.service>li>a:after{content: "\f0a9";}

.fv_scroll{position: absolute; bottom: 40px; right: 45px; writing-mode: vertical-rl; padding: 0 0 2em 0; font-size: 90%;}
.fv_scroll:before{content: ""; display: block; width: 2px; height: 100%; background: #000; position: absolute; left: 0; bottom: 0;}
.fv_scroll:after{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f107"; position:absolute; bottom:-0.4em; left:1px; transform: translateX(-50%);}

/* 極端に縦幅が狭くなったら */
@media screen and (min-width:961px) and (min-aspect-ratio:2/1){
.fv{height: auto; aspect-ratio:2/1;}
.slider1 img{height: calc(50vw - 160px);}
}

@media screen and (max-width:960px){
.fv{font-size: 100%; height: auto; margin: -80px auto 0; display: flex; flex-direction: column;}

.fv_logo{order:1; position:relative; top: auto; left: auto; margin: 3.5em auto 3em; width: min(30%,200px);}

.fv_catch{order:2; position:relative; bottom: auto; left: auto; text-align: center; padding: 0 0 0 0.7em; margin: 0 auto 3em;}
.fv_catch img{height: 1.3em;}

.fv_news{order:6; position:relative; bottom: auto; left: auto; width: 100%; margin: 0 auto 3em; height: auto; overflow-y: auto;}

.fv_slider{order:3; position:relative; top: auto; bottom: auto; left: auto; width: 70%; margin: 0 auto 3em;}
.slider1{}
.slider1 img{width: 100%; height: auto; aspect-ratio:3/4;}

.slider1_thumb{position: relative !important; right: auto; bottom: auto; width: min(100%,300px); transform: none; margin:1em auto;}

.fv_nav{order:4; position:relative; top: auto; right: auto; width: 70%; margin: 0 auto 3em;}
.fv_nav nav{width: 100%;}
.fv_nav ul.service{font-size: 120%;}

.fv_scroll{order:5; position: absolute; bottom: auto; top: 60vh; right: 3vw; font-size: 80%;}
}

/* セカンドビュー */
.sv{background: #f5f5f5; font-size: min(1vw,20px); margin: auto;}
.sv .slider-text{display: flex; flex-direction: row-reverse;}
.slider2_wrap{width: 55%;}
.slider2 img{width: 100%; height: 100vh; min-height: 45vw; object-fit: cover;}
.sv .slider-text .text{flex: 1; padding: 40px 20px 40px 80px; display: flex; align-items: center;}
@media screen and (max-width:960px){
.sv{font-size: 100%;}
.sv .slider-text{flex-direction: column;}
.slider2_wrap{width: 100%;}
.slider2 img{width: 100%; height: auto; min-height: initial; aspect-ratio:1/1;}
.sv .slider-text .text{padding:2em 20px;}
.sv .heading_wrap .jpn{font-feature-settings: "palt"; letter-spacing: 0.1em; line-height: 1.6;}
}

/* 事業案内 */
section.service{font-size: min(1vw,20px); margin-top: 0; padding-top: 12em; overflow: hidden;}
.image-text.service{row-gap:2em; column-gap: 0; margin: auto;}
.image-text.service>.image{width: 55%; padding: 0 80px 0 0;}
.image-text.service>.text{ padding: 40px 80px 40px 80px;}

section.service ul.service{font-size: 110%; margin: 2em auto 0; line-height: 1.4;}
section.service ul.service>li>a{color: #000; text-decoration: none; font-weight: bold; display: flex; align-items: center; justify-content: flex-start; position: relative; padding: 0 0 0 1.5em; min-height: 2.5em;}
section.service ul.service>li>a:before{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f0a9"; position:absolute; top:50%; left:0; transform: translateY(-50%);}
section.service ul.service>li>a:hover{background: #f5f5f5;}
@media screen and (max-width:960px){
section.service{font-size: 100%; padding-top: min(30vw,8em);}
.image-text.service>.image{width: 100%; padding: 0;}
.image-text.service>.text{ padding: 0 20px;}
section.service ul.service{font-size: 120%; width: 80%;}
}

/* くるくる回る背景と事業案内のシンボルを添えたナビゲーション */
.service_circle_wrap{width: 82%; height: auto; aspect-ratio:1/1; position: relative; margin: auto;}
.image_circle{width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.image_circle2{width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.image_circle img{display: inline-block; border-radius: 100%; animation: image_circle_spin 40s linear infinite;}
@keyframes image_circle_spin {
  100% {transform: rotate(360deg);}
}

ul.service_circle>li{width: 18em; height: auto; aspect-ratio:1/1; position: absolute;}

ul.service_circle>li.blue{top: 50%; left: 50%; transform: translate(-50%,-50%);}
ul.service_circle>li.yellow{top: 1%; left: 50%; transform: translate(-50%,-50%);}
ul.service_circle>li.green{top: 74.5%; right: 7.5%; transform: translate(50%,-50%);}
ul.service_circle>li.pink{top: 74.5%; left: 7.5%; transform: translate(-50%,-50%);}

ul.service_circle>li>a{display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #000; width: 100%; height: 100%; padding: 1em 0 0; background: #fff; border-radius: 100%; }
ul.service_circle>li>a:after{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f0a9";}
ul.service_circle>li>a:hover{background: #f5f5f5;}

ul.service_circle .image{width: min(50%,160px);}
ul.service_circle .text{margin: 1em auto;}

ul.service_circle .eng{font-family: "af" , sans-serif; font-size: 80%; font-weight: 500; line-height: 1; margin: 0 0 0.5em;}
ul.service_circle .heading{font-size: 150%; margin: 0; line-height: 1.2;}
ul.service_circle .heading.small{font-size: 130%;}
ul.service_circle .heading.space{letter-spacing: 0.3em; padding-left: 0.3em;}

@media screen and (max-width:960px){
.service_circle_wrap{font-size: min(2.6vw,80%); width: min(100%,32em);}

ul.service_circle>li{width: 14em;}

ul.service_circle>li>a{display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #000; width: 100%; height: 100%; padding: 1em 0 0; background: #fff; border-radius: 100%; }
ul.service_circle>li>a:after{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f0a9";}
ul.service_circle>li>a:hover{background: #f5f5f5;}

ul.service_circle .image{width: min(30%,100px);}
ul.service_circle .text{margin: 0.5em auto;}
}

/*ピックアップカルーセル*/
.pickup_slider{margin: 3em auto;}
.pickup_slider .slick-list{padding: 0 58px;}
.pickup_slider .slick-track{display: flex;}
.pickup_slider .slick-slide{height: auto;}
.pickup_item{container-type: inline-size; width: 100%; height: 100%; text-decoration: none; display: flex; flex-direction: column; gap:1em; background: rgba(255,255,255,0); padding: 1em; color:#000; transition: 0.2s background;}
.pickup_item:hover{background: rgba(255,255,255,1);}
.pickup_item .image{width: 100%; position: relative;}
.pickup_item .image>img{width: 100%; height: auto; aspect-ratio:3/2; object-fit: cover; border-radius: 0.5em;}
.pickup_item .text{font-size: min(4.5cqw,18px); flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap:0.5em;}
.pickup_item .meta{font-size: 80%;}
.pickup_item .title{margin: 0; line-height: 1.4; font-weight: bold;}
@media screen and (max-width:960px){
.pickup_slider{margin: 2em auto 1em;}
.pickup_slider .slick-list{padding: 0 46px;}
}
@media screen and (max-width:480px){
.pickup_item .text{font-size: 80%;}
}

/* Instagram */
.heading.instagram img{width: min(50%,320px);}
.instagram_posts{display: flex; gap:40px; flex-wrap: wrap; margin: 3em auto 4em; padding: 0 40px;}
.instagram_posts>*{width: calc((100% - 200px) / 6);}
.instagram_post img{width: 100%; aspect-ratio:108/135; object-fit: contain;}
@media screen and (max-width:1400px){
.instagram_posts{width: 70%;}
.instagram_posts>*{width: calc((100% - 80px) / 3);}
}
@media screen and (max-width:960px){
.instagram_posts{width: 100%; gap:20px; margin: 2em auto 3em; padding: 0 20px;}
.instagram_posts>*{width: calc((100% - 40px) / 3);}
}
@media screen and (max-width:960px) and (orientation:portrait){
.instagram_posts>*{width: calc((100% - 20px) / 2);}
}

/* 会社案内 */
.company_nav_wrap{font-size: 100%; margin: 3em auto 1em;}
.company_nav_wrap .heading.underline:has(a){padding-bottom: 0;}
.company_nav_wrap .heading>a{position: relative; display: flex; align-items: center; min-height: 2.5em; color: #000; text-decoration: none; font-weight: bold; padding: 0 0 0 1.5em;}
.company_nav_wrap .heading>a:hover{background: #f5f5f5;}
.company_nav_wrap .heading>a:before{ font-family: "Font Awesome 6 Free"; font-weight: 600; content: "\f0a9"; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.company_nav_wrap ul.arrow_nav{font-size: 110%;}