/* Last Updated: 2024-12-01
Author: zeal
Theme Name: okuto_housing
*/
body{
background: #fff;
}
#container.renovation{ background: #ecece0; }
#container.works,.single-works #container{
background: #fff url(images/common/bg_check.jpg);
}
#container.event, .single-event #container{
background: #fff url(images/common/bg_check.jpg);
}
#container.post, .archive #container, .single #container{
background: #fff url(images/common/bg_check.jpg);
}
#container.plan, #container.faq, #container.request, #container.contact, #container.privacy, #container.site_map{ background: #fbfbf1; }
#container.blog{ background: #d1dde9; }
#container.voice,#container.company{
background-image: repeating-linear-gradient(0deg, #f2f2f2 0px 1px, transparent 1px 10px),
repeating-linear-gradient(90deg, #f2f2f2 0px 1px, transparent 1px 10px);
background-size: 10px 10px;
}
#container.land{
background-image: url(images/common/bg_check.jpg);
}
article{
background: #fff;
}
.block{
display: block;
}
.text_water{
color:#2b96be;
}
.text_pick_beige{
color: #f2f0df;
}
.hover_zoom img {
transition: all ease-in-out .3s;
}
a:hover .hover_zoom img{
transform: translate3d(-50%, -50%, 0) scale(1.05);
transition: .4s;
}
.bg_dark{
background: #3b3c3e;
}
.menu_btn::after{
content: "MENU";
font-family: Arial, monospace;
font-weight: 500;
font-size: clamp(10px,1.5vw,14px);
}
.head_logo{
width: 20%;
max-width:151px;
}
.head_logo img {
max-width: 151px;
filter: invert(100%) sepia(96%) saturate(16%) hue-rotate(256deg) brightness(104%) contrast(106%);
}
.head_frame{
padding-top: 2.5%;
width: 92%;
}
.head_frame a{
color: #fff;
}
header.white .head_nav_list ul a {
color: #000;
}
header.white .menu_btn{
background: none;
}
header.white .head_logo img {
filter: none;
}
header.ni_white{
background: none;
height: 160px;
border-bottom: 1px solid #000;
}
header.ni_white .head_nav_list ul a {
color: #000;
}
header.ni_white .head_logo img {
filter: grayscale(100%) brightness(0%);
}
.header_frame{
height: 100%;
}
.head_nav_list ul a{
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(1.2rem,1vw,1.5rem);
}
.menu_btn{
max-width: 100px;
background: none;
border: 1px solid rgb(255, 255, 255);
color: rgb(255, 255, 255);
/*filter: invert(100%) grayscale(100%) contrast(100);*/
transition: all 0.4s;
}
/*
header.ni_white .menu_btn{
border: 1px solid rgb(0, 0, 0);
color: rgb(0, 0, 0);
}
header.ni_white .menu_btn span{
background-color: #000;
}
header.ni_white .menu_btn::after{
color: #000;
}
*/
.menu_btn span{
mix-blend-mode:difference;
transition: all 0.4s;
}
.menu_btn.add_blend{
mix-blend-mode:difference;
transition: all 0.4s;
}
.menu_btn.add_blend span{
mix-blend-mode:difference;
transition: all 0.4s;
}
.drawer{
background: #061c49;
}
.drawer nav{
max-width: 1040px;
}
.head_nav_list ul a:after{
background: none;
}
.head_nav_list ul a:hover{
opacity: 0.8;
}
.nav_copy > span:nth-of-type(1){
color: #fff;
}
.nav_link_box{
color: #fff;
justify-content: space-between;
}
.nav_link_box:hover{
opacity: 0.8;
}
.nav_num{
color: #fff;
}
.nav_hover .nav_arrow, a:hover .nav_arrow{
transform: translateX(0);
transition: all 0.4s;
}
.nav_hover:hover .nav_arrow, a:hover .nav_arrow{
transform: translateX(10px);
transition: all 0.4s;
}
.text_gray_blue{
color: #828faa;
}
a:hover.op60{
opacity: 0.6;
}
.btn_kadomaru_arr{
width: 100%;
max-width: 260px;
box-sizing: border-box;
border-radius: 30px;
border:2px solid #fff;
padding:1.8rem 1.8rem;
display: flex;
justify-content: space-between;
}
.nav_last_content{
display: flex;
justify-content: space-between;
gap: 4%;
}
@media screen and (max-width: 1200px) {
.head_nav_list ul a{
padding: 1rem 0.8rem;
}
.menu_btn{
right: 1.2%;
}
}/*END*/
@media screen and (max-width: 599px) {
.head_logo img{
max-width: 100px;
}
.menu_btn{
top:10px;
right: 10px;
}
.drawer li{
padding-top: 0;
padding-bottom: 0;
}
.nav_last_content{
flex-wrap: wrap;
gap: 2rem 0.5rem;
justify-content: center;
}
.nav_last_content .box{
}
.menu_btn span:nth-child(1){
top: 30%;
}
.menu_btn span:nth-child(2){
opacity: 0;
}
.menu_btn span:nth-child(3){
top: 45%;
}
.menu_btn::after{
top:auto;
bottom: 25%;
}
.open .menu_btn span:nth-child(1){
transform: rotate(-45deg);
top: 48%;
}
.open .menu_btn span:nth-child(2){
opacity: 0;
}
.open .menu_btn span:nth-child(3){
transform: rotate(45deg);
top: 48%;
}
}/*END*/
/* 繝｡繝九Η繝ｼ繧帝幕縺上→縺阪↓ body 縺ｮ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧貞●豁｢ */
body.open {
overflow: hidden;
}
/* top mv 繧｢繝九Γ */
.top_mv_swiper_box{
overflow: hidden;
height: 100svh;
}
.top_mv_frame{
margin: 0 auto;
}
.mv_sw_inner{
/*width: 64%;*/ width: 80%;
/*max-width: 1160px;*/ max-width: 1400px;
padding-inline: 20px;
margin-inline: auto;
box-sizing: border-box;
padding-top:220px;
padding-bottom: 80px;
}
.top_mv_swiper_frame{
width: 100%;
position: relative;
height: max-content;
}
.mv_frame_swiper.flex{
display: flex;
justify-content: space-between;
}
.mv_frame_swiper.flex .item{
width: 46.5%;
}
.mv_frame_swiper.flex .item._right{
margin-top:-13%;
}
.mv_sw_bg01{
background-color: #7fb5d0;
}
.mv_sw_bg02{
background-color: #53b3b6;
}
.mv_sw_bg03{
background-color: #373a40;
}
.mv_sw_tit{
width: 38%;
max-width: 100%;
position: absolute;
/*top:54.5%;*//* top:63.2%;*/ top:52.4%;
right: -4%;
transform: translate(-50%, 0%);
text-align: right;
}
@media screen and (min-width: 1920px) {
.mv_sw_tit{
width: 30%;
right: 3%;
}
}/*END*/
@media screen and (min-width: 2800px) {
.mv_sw_tit{
width: 38%;
max-width:680px;
position: absolute;
right: 20%;
transform: translate(-50%, 0);
text-align: right;
}
}/*END*/
.mvsw_by{
color: #fff;
writing-mode: vertical-rl;
width: 20px;
position: absolute;
top:50%;
left: 1%;
transform: translate(0, -50%);
z-index: 1;
opacity: 0.7;
font-size: clamp(1.1rem, 1.4vw, 1.5rem);
font-weight: bold;
}
.sw_pa_frame{
max-width: 1160px;
padding-inline: 20px;
margin-inline: auto;
box-sizing: border-box;
position: relative;
}
@media screen and (max-width: 1600px) {
.mv_sw_inner{
width: 75%;
max-width: 1160px;
}
.mv_sw_tit{
width: 40%;
}
}/*END*/
@media screen and (max-width: 1200px) {
.mv_sw_inner{
padding-inline: 3%;
}
.sw_pa_frame{
padding-inline: 3%;
}
.mv_sw_inner{
width: 80%;
}
}/*END*/
@media screen and (max-width: 980px) {
.mv_sw_tit {
width: 55%;
right: -25%;
}
.mv_sw_inner{
width: 100%;
padding-top: 20%;
}
}/*END*/
@media screen and (max-width: 599px) {
.top_mv_swiper_box{
height: auto;
}
.top_mv_img_frame._right{
display: none;
}
.mv_frame_swiper.flex .item{
width: 100%;
}
.mv_sw_inner{
padding-top: 100px;
padding-bottom: 120px;
}
.mv_frame_swiper.flex .item {
width: 72%;
margin-inline: auto;
}
.mv_sw_tit{
width: 81%;
transform: translate(-50%, -50%);
top: 75%;
right: auto;
left: 50%;
}
.mvsw_by{
font-weight: normal;
}
}/*END*/
.top_mv_text_right_box{
width: 34.5%;
max-width: 372px;
padding-top: 7%;
}
@media screen and (max-width: 821px) {
.top_mv_text_right_box{
width: 90%;
max-width: 450px;
margin-inline: auto;
display: flex;
flex-direction: column-reverse;
row-gap: 20px;
}
}/*END*/
.top_mv_ttl{
font-size: clamp(45px,9.375vw,85px);
position: absolute;
left: 0;
top: 0;
line-height: 1;
}
@media screen and (max-width: 599px) {
.top_mv_ttl{
left: 3%;
top: -1%;
}
}/*END*/
/* swiper縺ｮ荳ｸ */
.swiper-pagination-bullet{
background: #fff;
opacity: 0.2;
border-radius: 0;
width: 10px;
height: 10px;
}
.top_mv_swiper_frame .swiper-pagination-bullet-active{
background: #fff;
opacity: 1;
}
.top_mv_swiper_frame .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
margin: 0 10px;
}
.top_mv_swiper_frame .swiper-pagination{
width: 80%;
min-width: 140px;
/*max-width: 1160px;*/ max-width: 1400px;
padding-inline: 20px;
box-sizing: border-box;
text-align: left;
/*top: 95%;*/ bottom: 3%;
left: 50%;
transform: translate(-50%, 0%);
}
@media screen and (max-width: 1600px) {
.top_mv_swiper_frame .swiper-pagination{
width: 100%;
max-width: 1160px;
}
}/*END*/
@media screen and (max-width: 980px) {
.top_mv_swiper_frame .swiper-pagination{
padding-inline: 3%;
bottom: 2.5%;
}
}/*END*/
@media screen and (max-width: 599px) {
.top_mv_swiper_frame .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
margin: 0 5px;
width: 6px;
height: 6px;
}
.top_mv_swiper_frame .swiper-pagination{
left: 3%;
transform: translate(0, 0%);
}
}/*END*/
.swiper-pagination-fraction{
width: 8%;
min-width: 140px;
position: absolute;
z-index: 2;
left: auto;
right: 13%;
top: 94%;
transform: translate(-50%, 0%);
text-align: center;
height: fit-content;
font-size: 1.8rem;
color: #fff;
}
/* swiper縺ｮ遏｢蜊ｰ */
.top_mv_swiper_frame .swiper-button-prev,.top_mv_swiper_frame .swiper-button-next{
position: static;
color: #000;
margin-top: 0;
}
.top_mv_swiper_frame .swiper-button-prev:after,.top_mv_swiper_frame .swiper-button-next:after{
font-size: 2rem;
color: #fff;
}
.mvsw.swiper_arrow{
width: 8%;
min-width: 140px;
display: flex;
justify-content: space-between;
position: absolute;
top: 93%;
right: 13%;
transform: translate(-50%, 0%);
z-index: 2;
}
@media screen and (max-width: 1600px) {
.mvsw.swiper_arrow{
right: 2%;
}
.swiper-pagination-fraction{
right: 2%;
}
}/*END*/
@media screen and (max-width: 599px) {
.mvsw.swiper_arrow{
min-width: 120px;
top: 93%;
right: 5%;
transform: translate(0, 0%);
}
.swiper-pagination-fraction{
right: 3%;
top: 95%;
font-size: 1.4rem;
transform: translate(0, 0%);
}
.top_mv_swiper_frame .swiper-button-prev:after,.top_mv_swiper_frame .swiper-button-next:after{
font-size: 1.6rem;
opacity: 0.75;
}
}/*END*/
.top_mv_text_box{
position: absolute;
bottom: 5%;
left: 5%;
}
@media screen and (max-width: 599px) {
.top_mv_text_box{
bottom: 0%;
left: 0%;
}
}
.top_mv_text01,
.top_mv_text02,
.top_mv_text03{
width: max-content;
box-sizing: border-box;
background-color: #fff;
padding: 0.5rem 1.5rem;
line-height: 1.5;
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
@media screen and (max-width: 599px) {
.top_mv_text01,
.top_mv_text02,
.top_mv_text03{
padding: 0.2rem 1rem;
}
}
.top_mv_swiper_frame .swiper-slide-active .top_mv_text01,
.top_mv_swiper_frame .swiper-slide-active .top_mv_text02,
.top_mv_swiper_frame .swiper-slide-active .top_mv_text03{
-webkit-clip-path: inset(0);
clip-path: inset(0);
transition: clip-path 0.8s ease-in-out , background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.top_mv_swiper_frame .swiper-slide > a:hover .top_mv_text01,
.top_mv_swiper_frame .swiper-slide > a:hover .top_mv_text02,
.top_mv_swiper_frame .swiper-slide > a:hover .top_mv_text03{
background-color: #000;
color: #fff;
}
.top_mv_img_frame img{
transition: 0.4s ease-in-out;
}
.top_mv_swiper_frame .swiper-slide > a:hover .top_mv_img_frame img{
scale: 1.05;
}
.top_mv_img_frame{
box-sizing: border-box;
border-radius: 10px;
overflow: hidden;
}
.top_mv_text01{
border-radius: 5px 5px 0 0;
border-top: #000 solid 1px;;
border-left: #000 solid 1px;
border-right: #000 solid 1px;
font-size: 1.2rem;
text-transform: uppercase;
font-family: var(--text_mon);
}
.top_mv_text02{
border-radius: 0 5px 5px 0;
border: #000 solid 1px;
font-weight: bold;
font-size: 2.2rem;
}
@media screen and (max-width: 599px) {
.top_mv_text02{
font-size: 1.6rem;
}
}/*END*/
.top_mv_text03{
border-radius: 0 0 5px 5px;
border-bottom: #000 solid 1px;;
border-left: #000 solid 1px;
border-right: #000 solid 1px;
font-size: 1.4rem;
}
.top_mv_main_text{
font-size: clamp(28px,4vw,43px);
line-height: 1.8;
margin-bottom: 20px;
letter-spacing: 3px;
}
.top_mv_main_text span{
opacity: 0;
translate: 0 5px;
display: inline-block;
}
.top_mv_main_text span:first-of-type{
transition: opacity 0.2s ease-in-out 0.3s, translate 0.3s ease-in-out 0.3s;
}
.top_mv_main_text span:last-of-type{
transition: opacity 0.2s ease-in-out 0.4s, translate 0.3s ease-in-out 0.4s;
}
.top_mv_main_text.mv_start span{
opacity: 1;
translate: 0 0px;
}
@media screen and (max-width: 821px) {
.top_mv_main_text{
line-height: 1.4;
margin-bottom: 10px;
}
}
.top_mv_sub_text01,
.top_mv_sub_text02{
opacity: 0;
filter: blur(15px);
}
.top_mv_sub_text01{
transition: opacity 0.2s ease-in-out 0.5s,filter 0.3s ease-in-out 0.5s;
}
.top_mv_sub_text02{
transition: opacity 0.2s ease-in-out 0.8s,filter 0.3s ease-in-out 0.8s;
}
.top_mv_sub_text01.mv_start,
.top_mv_sub_text02.mv_start{
opacity: 1;
filter: blur(0px);
}
.top_mv_sub_text_deco{
line-height: 2;
font-size: 1.2rem;
}
@media screen and (max-width: 599px) {
.top_mv_sub_text_deco{
line-height: 1.5;
font-size: 1rem;
}
}
@media screen and (max-width: 821px) {
.top_mv_info_box{
display: flex;
align-items: flex-end;
}
.top_mv_info_box .m_b40{
margin-bottom: inherit;
}
}
@media screen and (max-height: 980px) and (min-width: 800px) {
/*
.top_mv_swiper_box {
height: auto;
}
*/
.mv_frame_swiper.flex .item {
/*width: 36%;*/
}
.mv_sw_inner{
/*padding-top:8%;*/ padding-top: 100px;
/*max-width: 920px;*/ max-width: 1200px;
}
.mv_frame_swiper.flex {
display: flex;
justify-content: center;
gap: 6%;
}
/*
.mv_sw_tit{
width: 30%;
top: 52%;
right: 10%;
max-width: 658px;
}
*/
.top_mv_swiper_frame .swiper-pagination{
width: 75%;
max-width:1200px;
}
.mv_frame_swiper.flex .item._right {
margin-top: -6%;
}
}/*END*/
/*繧ｳ繝ｳ繝�Φ繝�繝ｬ繧､繧｢繧ｦ繝�*/
.content_fl_box{
display: flex;
gap: 3.5%;
}
.content_fl_box.between{
justify-content: space-between;
}
.content_fl_box.reverse{
flex-direction: row-reverse;
}
.content_fl_box.end{
justify-content: flex-end;
}
.content_fl_box.j_center{
justify-content: center;
}
.i_center{
align-items: center;
}
.i_end{
align-items: end;
}
.content_fl_box50{
display: flex;
}
.content_fl_box.nogap{
gap: 0;
}
.fl_right{
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
.box20{width: 20%; }
.box25{width: 25%; }
.box30{width: 30%; }
.box35{width: 35%; }
.box40{width: 40%; }
.box43{width: 41%; }
.box45{width: 45%; }
.box47{width: 48.1%; }
.box50{width: 50%; }
.box55{width: 55%; }
.box60{width: 60%; }
.box65{width: 65%; }
.box70{width: 70%; }
.box75{width: 75%; }
.box80{width: 80%; }
.sp_block{
display: none;
}
.pc_block{
display: block;
}
@media screen and (max-width: 1350px){
.inner_frame1350{
padding-right: 3.5%;
padding-left: 3.5%;
}
}/*END*/
@media screen and (max-width: 768px){
.inner_frame{
padding-right: 3.5%;
padding-left: 3.5%;
}
}/*END*/
@media screen and (max-width: 599px){
.sp_order00{ order: 0; }
.sp_order01{ order: 1; }
.sp_order02{ order: 2; }
.sp_order03{ order: 3; }
.sp_order04{ order: 4; }
.sp_order05{ order: 5; }
.content_fl_box{
flex-wrap: wrap;
}
.box80,.box70,.box65,.box60,.box40,.box50,.box55,.box25,.box75,.box47,.box45,.box43,.box35,.box30,.box20{
width: 100%;
margin-bottom: 30px;
}
.content_fl_box50{
flex-wrap: wrap;
}
.content_fl_box.nowrap{
flex-wrap: nowrap;
}
.content_fl_box.nowrap > div{
margin-bottom: 0;
}
.content_fl_box > div.sp_order02{
margin-bottom: 0;
}
.sp_content_fl_box{
display: flex;
gap:2%;
}
.sp_palt{
font-feature-settings: "palt";
}
.sp_block{
display: block;
}
.pc_block{
display: none !important;
}
}/*END*/
.ttl_scroll_anime_frame span{
display: inline-block;
}
.ttl_scroll_anime_frame .ttl_scroll_anime01,
.ttl_scroll_anime_frame .ttl_scroll_anime02,
.ttl_scroll_anime_frame .ttl_scroll_anime03{
opacity: 0;
translate: 0 10px;
}
.ttl_scroll_anime_frame.show .ttl_scroll_anime01,
.ttl_scroll_anime_frame.show .ttl_scroll_anime02,
.ttl_scroll_anime_frame.show .ttl_scroll_anime03{
opacity: 1;
translate: 0 0px;
}
.ttl_scroll_anime01{
transition: opacity 0.2s ease-in-out 0.3s, translate 0.3s ease-in-out 0.3s;
}
.ttl_scroll_anime02{
transition: opacity 0.2s ease-in-out 0.4s, translate 0.3s ease-in-out 0.4s;
}
.ttl_scroll_anime03{
transition: opacity 0.2s ease-in-out 0.5s, translate 0.3s ease-in-out 0.5s;
}
.img_scroll_anime01{
opacity: 0;
translate: 0 10px;
}
.img_scroll_anime01.show{
opacity: 1;
translate: 0 0px;
}
.img_scroll_anime01{
transition: opacity 0.2s ease-in-out 0.3s, translate 0.3s ease-in-out 0.3s;
}
.anime_fade_up{
opacity: 0;
}
.anime_fade_up.show{
opacity: 0;
animation-name: anime_fade_up; /* 繧ｭ繝ｼ繝輔Ξ繝ｼ繝�縺ｮ蜷榊燕 */
animation-duration: 1.2s; /* 縺九°繧区凾髢� */
animation-timing-function: ease-out; /* 騾溷ｺｦ */
animation-fill-mode: forwards; /* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ蜑榊ｾ後�繝励Ο繝代ユ繧｣縺ｮ迥ｶ諷� */
animation-delay:0.2s;
}
@keyframes anime_fade_up {
from {
opacity: 0;
transform: translateY(10%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bubble_fade_up{
opacity: 0;
}
.bubble_fade_up.show{
opacity: 0;
animation-name: bubble_fade_up; /* 繧ｭ繝ｼ繝輔Ξ繝ｼ繝�縺ｮ蜷榊燕 */
animation-duration: 0.4s; /* 縺九°繧区凾髢� */
animation-timing-function: ease-out; /* 騾溷ｺｦ */
animation-fill-mode: forwards; /* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ蜑榊ｾ後�繝励Ο繝代ユ繧｣縺ｮ迥ｶ諷� */
animation-delay:0.2s;
}
@keyframes bubble_fade_up {
from {
opacity: 0;
transform: translateY(10%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.anime_box_fade_btm{
clip-path: inset(100% 0 0 0);
}
.anime_box_fade_btm.show{
animation-delay: 0.3s;
animation-name: anime_box_fade_btm;
animation-duration: 1.8s;
animation-fill-mode: forwards;
clip-path: inset(100% 0 0 0);/*(荳� 蜿ｳ 荳� 蟾ｦ)*/
}
@keyframes anime_box_fade_btm {
0% {
clip-path: inset(100% 0 0 0);
}
100% {
clip-path: inset(0);
}
}
.anime_box_fade_left{
clip-path: inset(0 100% 0 0);
}
.anime_box_fade_left.show{
animation-delay: 0.3s;
animation-name: anime_box_fade_left;
animation-duration: 1.8s;
animation-fill-mode: forwards;
clip-path: inset(0 100% 0 0);/*(荳� 蜿ｳ 荳� 蟾ｦ)*/
}
@keyframes anime_box_fade_left {
0% {
clip-path: inset(0 100% 0 0);
}
100% {
clip-path: inset(0);
}
}
.show.delay01{ animation-delay: 0.4s; }
.show.delay02{ animation-delay: 0.8s; }
.show.delay03{ animation-delay: 1.2s; }
.show.delay04{ animation-delay: 1.6s; }
.show.delay05{ animation-delay: 2.0s; }
.show.delay06{ animation-delay: 2.4s; }
.show.delay07{ animation-delay: 2.8s; }
.hover_float{
transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
a:hover .hover_float{
transform: translateY(-5px);
}
/* 繝懊ち繝ｳ縲view more */
.nigo_btn {
width: 100%;
max-width: 260px;
appearance: none;
background: #2b96be;
border-radius: 3rem;
box-sizing: border-box;
color: #fff;
display: inline-flex;
overflow: hidden;
text-decoration: none;
transition: .2s;
z-index: 1;
}
.nigo_btn, .nigo_btn > a {
position: relative;
}
.nigo_btn > a::before {
animation: nigo_btn_init .3s forwards;
background: #3b3c3e;
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
transition: .2s;
z-index: 0;
}
@keyframes nigo_btn_init {
0% {
transform: translateX(0);
}
100% {
transform: translateX(101%);
}
}
.nigo_btn > a {
align-items: center;
display: flex;
height: 6rem;
justify-content: center;
width: 100%;
color: #fff;
}
.nigo_btn > a span {
position: relative;
transition: .3s;
z-index: 2;
}
.nigo_btn > a span.text__02 {
opacity: 0;
position: absolute;
/*margin-top: -2px;*/
}
.nigo_btn > a svg {
content: "";
height: 1.2rem;
position: absolute;
right: 2.3rem;
top: calc(50% - .6rem);
width: 1.2rem;
z-index: 1;
}
.nigo_btn > a:hover::before {
animation: nigo_btn_hover .3s forwards;
transition: .3s;
}
@keyframes nigo_btn_hover {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.nigo_btn > a:hover .text__01 {
opacity: 0;
}
.nigo_btn > a:hover .text__02 {
opacity: 1;
/*margin-top: -2px;*/
}
.nigo_btn > a:hover svg {
animation: nigo_btn_arrow .5s;
}
@keyframes nigo_btn_arrow {
50% {
opacity: 0;
transform: translateX(50%);
}
51% {
opacity: 0;
transform: translateX(-50%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@media screen and (max-width: 599px){
.nigo_btn > a {
height: 4.5rem;
/*width: 180px;*/ width: 100%;
}
.nigo_btn{
width: 92%;
}
.nigo_btn > a svg{
right: 1.5rem;
}
}/*END*/
.nigo_btn.cc_set > a::before{
background: #6ac649;
}
.nigo_btn.black{
background: #000;
}
.nigo_btn.black > a:before{
background: #2b96be;
}
.nigo_btn.cc_style{
background: none;
border:2px solid #fff;
color: #fff;
}
.nigo_btn.cc_style > a {
color: #fff;
justify-content: start;
padding-left: 8%;
}
.nigo_btn.cc_style > a:hover{
color: #fff;
}
/*cat*/
.cat {
display: inline-block;
border: 1px solid #000;
padding: 0.2em 0.6em;
text-align: center;
font-size: clamp(1.1rem,1.4vw,1.4rem);
font-weight: normal;
margin-right: 5px;
margin-top: 0;
transition: all 0.3s;
}
.cat.okuto_event_open {
background: #000;
color:#fff;
border: 1px solid #000;
}
.cat.okuto_event_close {
background: #fff;
color:#000;
border: 1px solid #000;
letter-spacing: 0 !important;
}
.cat.okuto_event_close a{
color: #000;
}
/*list*/
.fl_list_three{
display: flex;
flex-wrap: wrap;
gap:4.4%;
}
.fl_list_three li,.fl_list_three > div{
width: 30.3%;
position: relative;
margin-bottom: 30px;
}
.fl_list_three.p_p_list{
gap:40px 2%;
}
.fl_list_three.p_p_list li{
width: 32%;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.fl_list_three.p_p_list li p{
width: 100%;
}
@media screen and (max-width: 599px){
.fl_list_three{
flex-wrap: wrap;
}
.fl_list_three li,.fl_list_three > div{
width: 100%;
}
.fl_list_three.p_p_list li{
width: 48%;
margin-bottom: 0;
}
.fl_list_three.p_p_list{
gap: 30px 2%;
}
.fl_list_three.p_p_list li p{
line-height: 1.5;
}
}/*END*/
.photo_frame_square{
border:none;
}
.photo_frame_square.pf_works_wide{
aspect-ratio: 360 / 250;
border-radius: 5px;
border:none;
}
.bg_style_texture_beige{
background: url(images/top/bg_style_texture_beige.jpg);
position: relative;
}
.bg_style_texture_beige:before{
content: '';
width: 100%;
height: 35px;
background: #fff;
position: absolute;
top:0;
left: 0;
}
.bg_style_texture_wh{
background: url(images/top/bg_style_texture_beige.jpg);
position: relative;
}
.bg_housing_styles{
position: relative;
}
.bg_housing_styles:before{
content: '';
background: url(images/top/bg_housing_styles.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 75%;
max-height: 668px;
position: absolute;
top:0;
left: 0;
}
.respon_concept_photo_img{
width: 55vw;
max-width: 870px;
}
.bg_model_house{
background: url(images/top/bg_model_house.jpg);
background-size: cover;
position: relative;
}
.pickup_aqua_item{
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 5px;
border:2px solid #2b96be;
padding: 25px 25px 30px 25px;
background: none;
transition: all 0.3s;
}
.pickup_aqua_item:hover{
transition: all 0.3s;
background: #2b96be;
}
.top_pickup_ttl_c{
position: relative;
top:-40px;
}
.pick_aqua_list_three{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap:3%;
}
.pick_aqua_list_three > li{
width: 27.8%;
position: relative;
margin-bottom: 30px;
}
.nigo_news_list li{
width: 100%;
padding: 25px 8px;
box-sizing: border-box;
border-bottom: 1px solid #bab8a9;
}
.respon_news_photo_img{
width: 50vw;
max-width: 660px;
}
.nigo_news_list a:hover{
opacity: 0.6;
}
.social_blue_area{
background: #2b96be;
padding: 80px 0;
}
a.social_blue_area_item{
display: block;
}
a.social_blue_area_item:hover{
opacity: 0.8;
}
.speech_bubble_f{
display: inline-block;
position: relative;
}
.speech_bubble_tex{
width: 96%;
box-sizing: border-box;
position: absolute;
transform: translate(-50%,-50%);
top:43%;
left:50%;
text-align: center;
}
.bg_foot_black{
background: #26272a;
color: #fff;
}
.bg_foot_black a{
color: #fff;
}
.foot_area_kacomaru{
background: #2b96be;
color: #fff;
border-radius: 15px;
padding: 4px 15px;
text-align: center;
}
.fl_foot_area{
display: flex;
align-items: center;
justify-content: center;
gap:2%;
margin-inline: auto;
}
.box420{
width: 35.3%;
}
.foot_cc_set_item{
display: block;
box-sizing: border-box;
border-radius: 5px;
padding: 40px 25px 30px 25px;
text-align: center;
background: #3b3c3f;
color: #fff;
transition: all 0.3s;
}
.foot_cc_set_item a,.foot_cc_set_item p{
color: #fff;
}
.hv_tel_ico{
}
a:hover .hv_tel_ico img{
transform: rotate(-10deg) scale(1.1);
}
.foot_frame p{
color: #fff;
}
.foot_logo2025 img{
width: calc(370px / 2);
max-width: 185px;
}
.foot_frame {
display: flex;
justify-content: center;
gap: 3%;
}
.foot_info{
width: 40%;
}
.foot_nav_block{
width: 55%;
}
.foot_nav ul a{
padding: 1.3rem 0;
}
.foot_tel_tex{
font-size:3rem;
}
@media screen and (max-width: 880px){
.bg_housing_styles:before{
background-size: 120%;
background-position: center top;
width: 100%;
height: 75%;
max-height: 900px;
}
.respon_concept_photo_img {
width: 75vw;
}
.box420 {
width: 50%;
}
}/*END*/
@media screen and (max-width: 599px){
.pick_aqua_list_three{
flex-wrap: wrap;
}
.pick_aqua_list_three > li{
width: 100%;
}
.bg_housing_styles::before {
background-size: 250%;
}
.respon_concept_photo_img {
width: 100%;
}
.respon_concept_photo_img{
width: 100%;
}
.respon_news_photo_img{
width: 100%;
}
.social_blue_area{
padding: 35px 0 10px 0;
}
.fl_foot_area{
flex-wrap: wrap;
}
.top_pickup_ttl_c{
top: -30px;
}
.box420 {
width: 100%;
}
.foot_frame{
flex-wrap: wrap;
}
.foot_info {
width: 100%;
margin-bottom: 20px;
}
.foot_nav_block {
width: 100%;
}
}/*END*/
/* 荳句ｱ､繝壹�繧ｸ */
.ct_text_24{ font-size:clamp(1.4rem,2.75vw,2.4rem); }
.ct_text_100{ font-size:clamp(3.2rem,8.4vw,10rem) }
.page_ttl_p_b120{
padding-bottom: 120px;
}
.page_c_copy_t40{
padding-top:40px;
}
.cc_main_photo_img{
width: 100%;
}
.view_blur_anime img{
vertical-align: middle;
filter: blur(10px);
opacity: 0;
transition: all .8s ease-in-out .6s;
}
.view_blur_anime.show img{
filter: blur(0px);
opacity: 1;
}
.concept_photo_why_img{
width: 48vw;
max-width: 600px;
float: right;
}
.concept_photo_custom_img{
width: 50vw;
max-width: 650px;
}
.bg_concept_contact_photo{
background: url(images/concept/bg_concept_contact_photo.jpg);
background-size: cover;
position: relative;
}
.cc_btn_area{
display: flex;
justify-content: center;
gap:1.4%;
}
.cc_btn_area > div{
width: 30%;
max-width: 262px;
}
.bg_style_texture_cs{
background: url(images/style/housing_styles_bg01.jpg);
background-position: center top;
padding:100px 0;
}
.bg_style_texture_bs{
background: url(images/style/housing_styles_bg02.jpg);
background-position: center top;
padding:100px 0;
}
.respon_works_photo_img_l{
width: 50vw;
max-width: 660px;
float: right;
}
.works_archive_btn_view{
background: #aed4d5;
color: #000;
}
.works_archive_btn_life{
background: #bbbbbc;
color: #000;
}
.works_archive_btn_view:hover{
background: #aed4d5;
opacity: 0.8;
}
.works_archive_btn_life:hover{
background: #bbbbbc;
opacity: 0.8;
}
@media screen and (max-width: 1060px){
.page_ttl_p_b120{
padding-bottom: 90px;
}
.page_c_copy_t40{
padding-top:35px;
}
}/*END*/
@media screen and (max-width: 880px){
header.ni_white {
height: 130px;
}
.bg_style_texture_cs{
padding:60px 0;
}
.bg_style_texture_bs{
padding:60px 0;
}
}/*END*/
@media screen and (max-width: 599px){
header.ni_white {
height:80px;
}
.pan_nav,.pan_nav li a{
font-size: 1.0rem;
}
.page_ttl_p_b120{
padding-bottom: 25px;
}
.page_c_copy_t40{
padding-top:0;
}
.cc_main_photo_img{
width: 120%;
margin-left: -10%;
}
.concept_photo_why_img {
width: 100%;
float: none;
}
.concept_photo_custom_img {
width: 100%;
}
.respon_works_photo_img_l{
width: 100%;
float: none;
}
.cc_btn_area{
flex-wrap: wrap;
}
.cc_btn_area > div{
width: 100%;
margin-bottom: 15px;
}
.bg_style_texture_cs{
padding:30px 0;
}
.bg_style_texture_bs{
padding:30px 0;
}
.works_archive_btn{
gap: 5px;
}
.works_archive_btn a .spls{
letter-spacing: -1px;
}
.works_archive_btn a{
height: 80px;
}
}/*END*/
/* sitemap */
.sitemap_list{
max-width: 600px;
margin-inline: auto;
}
.sitemap_list li{
background-image : linear-gradient(to right, #aaaaaa 8px, transparent 8px);
background-size: 10px 1px;
background-repeat: repeat-x;
background-position: left bottom;
}
.sitemap_ja,
.sitemap_en{
display: inline-block;
}
.sitemap_en{
font-weight: bold;
width: 25%;
font-size: clamp(18px, 2vw, 2rem) !important;
}
.sitemap_list_link{
display: flex;
column-gap: 5%;
padding: 2.5rem 0;
}
.sitemap_ja{
font-size: clamp(18px, 2vw, 2.2rem);
}
.sitemap_list li:nth-of-type(odd) .sitemap_en{
color: #4299e2;
}
.sitemap_list li:nth-of-type(even) .sitemap_en{
color: #c01b1b;
}
@media screen and (max-width: 599px) {
.sitemap_list_link{
display: flex;
column-gap: 0%;
padding: 2.5rem 0;
}
.sitemap_ja{
width: 60%;
}
.sitemap_en{
font-weight: bold;
width: 45%;
}
}/*END*/
/*----------------------------------------
Archive_Detail
----------------------------------------*/
.okuto_event::after,.works::after,.news::after {
content: '';
height: 100%;
width: 15px;
background: none;
top: 0;
left: 0;
position: fixed;
}
.news::after {
background: none;
}