@charset "UTF-8";
/* CSS Document */
header{
	top: auto;
	bottom: 0;
	position: absolute;
}
header.h_fixed {
    position: fixed;
    top: 0;
    bottom: auto;
}
.h_logo{
	opacity: 0;
}
.h_fixed .h_logo{
	opacity: 1;
}
.sec_fv{    height: calc(100vh - 80px);
    width: 100vw;
/*	background-image: url("../image/common/bg_sec_ttl.jpg"),url("../image/top/img_fv_01.jpg");*/
	background-repeat: repeat,no-repeat;
	background-position: center;
	background-size: auto,cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.fv_logo {
    position: absolute;
    z-index: 10;
    top: 3vw;
    left: 3vw;
    width: 120px;
}
.maincopy {
    color: #fff;
    font-size: 1.56em;
    height: 1.56em;
    letter-spacing: 3px;
    text-shadow: 0 0 3px rgb(0 0 0 / 50%);
	padding: 0 2%;
	text-align: center;
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#video {
  left: 0;
  min-height: 100%;
  min-height: 100vh;
  min-width: 100%;
  min-width: 100vw;
  position: absolute;
  top: 0;
  z-index: 1;
}

section{
	width: 100%;
    padding: 100px 0;
}

.side_comment {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    letter-spacing: 5px;
    position: fixed;
    top: 15vh;
    left: 4vw;
    z-index: -1;
}
.h_fixed ~ .side_comment{
    z-index: 1;

}

.link_more a {
    color: #000;
    border-bottom: 1px solid;
    width: 250px;
    display: block;
    padding: 0.5em 0;
    font-size: 0.875em;
    letter-spacing: 1.5px;
	position: relative;
}
.link_more a::after{
	content: "";
	display: block;
	width: 25px;
	height: 10px;
	position: absolute;
	right: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
	background: url(../image/common/link_more_arrow.png) no-repeat center / contain;
}
.link_more a:hover::after{
	right: 0;
}
.link_more.white a{
    color: #fff;
}
.link_more.white  a::after{
	background-image: url(../image/common/link_more_arrow_w.png);
}
.index_flex {
	display: flex;
    justify-content: space-between;
    margin-left: 14vw;
    position: relative;
}

.index_ttl_flex {
    display: flex;
}
.h2_ttl{
    display: flex;
    font-size: 1em;
    margin-right: 50px;
}
@media (min-width:861px){
	.h2_ttl{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
	}
.sec_gallery .index_ttl_flex {
    width: 26%;
}
}
.h2_ttl_en{
	color: #2d3259;
    font-size: 190%;
    letter-spacing: 3px;
}
.h2_ttl_jp{
	color: #333333;
    font-size: 125%;
    margin-top: 2em;
}

.index_flex .index_inr_flex {
    width: 28.5vw;
}
.h3_ttl_wrap{
    margin-bottom: 40px;
}
.h3_ttl{
    font-size: 1.1875em;
    font-weight: 400;
    letter-spacing: 1.5px;
    line-height: 140%;
    margin-bottom: 10px;
}
.index_inr_flex .txt{
    margin-bottom: 60px;
}
.index_flex .flex_img {
    width: 37vw;
    margin-right: 6vw;
}

.flex_sdgs {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.flex_sdgs li{
margin: 10px;
}

section.sec_company::before {
    content: "Renovation brings new creativity to the region";
    font-size: 12.375em;
    color: #f0f1f3;
    position: absolute;
    bottom: 100px;
    z-index: -1;
    display: block;
    right: calc(100vw - 23.3em);
  	animation: loop 50s -25s linear infinite;
}
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

.flex_service {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.flex_service .box_service {
    width: 49%;
    margin-bottom: 50px;
}
.box_service.move{	
    transform: translateX(35%);
}
.box_service.move:nth-of-type(2n){	
    transform: translateX(10%);
}
.box_service.moved:nth-of-type(n){
    transform: translateX(0);
}
.box_service .img{
	display: block;
	margin-bottom: 10px;
    transition: all ease 200ms;
}
.box_service a:hover img{
	transform-origin: center;
/*	transform: scale(1.05);*/
    transform: translate(-10px,-10px);
	box-shadow: 10px 10px 0 0 #2d3259;
}
.box_service .name{
	color: #000;
    font-size: 1.4em;
    margin-left: 0.5em;
    line-height: 140%;
}
.box_service .name .en {
    font-size: 72.5%;
    display: block;
}
.sec_service::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 74%;
    height: 100%;
    top: -40%;
    bottom: 0;
    margin: auto;
    right: 0;
    background: url(../image/top/bg_gray.png) repeat-y center / 100%;
}

.sec_estate .index_inr_flex {
    position: absolute;
	left: calc(2em + 100px);
    width: 35vw;
}
.sec_estate .h3_ttl {
    font-size: 1.2em;
    line-height: 180%;
    letter-spacing: 0.2px;
}
.sec_gallery {
    background: #2d3259;
    margin-left: 10vw;
    color: #fff;
}
.sec_gallery .index_flex {
    margin-left: 50px;
}
.sec_gallery .h2_ttl_en,
.sec_gallery .h2_ttl_jp{
    color: #fff;
    font-weight: 400;
    line-height: 180%;
    margin-top: 0;
    margin-bottom: 0.5em;
}
.sec_gallery .h2_ttl_jp{
	margin-bottom: 50px;
}
.sec_gallery .link_more{
	margin-top: 80px;
}
.sec_gallery .index_ttl_flex .txt_wrap {
    width: 27vw;
}
.gal_link {
    position: relative;
    display: block;
    margin: 0 20% 0 0;
}

.jp_map{
    width: 55vw;
    margin-right: 8vw;
}

.sec_estate::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -2;
    width: 80%;
    height: 200%;
    top: -50%;
    bottom: 0;
    margin: auto;
    right: 0;
    background: url(../image/top/bg_gray.png) repeat-y center / 100%;
}
.sec_sdgs .index_inr_flex {
    margin-left: 2.5vw;
    padding-left: 2.5vw;
    width: 31.5vw;
}
.sec_sdgs::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -2;
    width: 77.5%;
    height: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    background: url(../image/top/bg_sdgs.png) repeat-y center / 100%;
}

footer {
    margin-top: 100px;
}

@media (max-width:1345px){
.index_flex .flex_img {
    margin-right: 0;
}
}

@media (max-width:1260px){
footer {
    padding-left: 10vw;
}
}

@media (max-width:900px){
	.index_flex {
    flex-wrap: wrap;
}
.index_flex .flex_img {
  width: 100%;
}
}

@media (max-width:860px){
footer {
    margin-top: 60px;
}
section {
    padding: 75px 0;
}
	.h2_ttl{
    	align-items: center;
    	margin-bottom: 1.5em;
	}
	.h2_ttl_jp {
		margin-top: 0;
		margin-left: 1em;
	}
.index_ttl_flex {
    flex-wrap: wrap;
}

	.index_flex .index_inr_flex {
    width: 96%;
    margin-bottom: 30px;
}
.sec_estate .index_inr_flex {
    position: static;
}
.sec_sdgs .index_inr_flex {
    padding: 0;
    margin-left: 0;
}
.sec_sdgs::before {
    width: 100%;
}

	.h3_ttl_wrap .en_ttl{
		font-size: 85%;
    line-height: 140%;
	}
.h3_ttl {
    font-size: 1.3em;
    letter-spacing: 4px;
    line-height: 180%;
}
.jp_map {
    width: 90%;
    margin: 0 auto;
}
}
@media (max-width:640px){
.side_comment {
    font-size: 70%;
    left: 2vw;
}
.h2_ttl {
    display: block;
}
.h2_ttl_en {
    font-size: 150%;
}
.h2_ttl_jp {
    margin: 10px 0 0;
    font-size: 100%;
}
.index_flex .flex_img {
    width: 100%;
}
.flex_service .box_service {
    width: 100%;
    margin-bottom: 30px;
}

.box_service .img{
	margin-bottom: 5px;
}
.box_service .name {
    font-size: 1em;
}
}



/*slider*/

.sec_gallery .slider_wrap{
    width: 69vw;
    position: relative;
}
.sec_gallery .index_flex{
	justify-content: flex-start;
    flex-wrap: wrap;
}
.slider.ttl_slider {
	width: 100%;
}
.gal_link{
    position: relative;
    display: block;
    overflow: unset;
}
.gal_link .image img{
}
.name_icon {
    color: #fff;
    position: absolute;
    border: 1px solid;
    text-align: center;
    width: 170px;
    height: 170px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    border-radius: 50%;
    right: -30px;
    bottom: 20%;
}
.name_icon .name,
.name_icon .name_en{
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.name_icon .name_en{
	font-size: 80%;
}
.gal_link .ttl_wrap .ttl {
    color: #fff;
}
.gal_link .ttl_wrap {
    margin-top: 1.5em;
}
.gal_link .txt_en {
    font-size: 81.25%;
}
.slick-slide{
	opacity: 0;
	transition: all ease 300ms;
}
.slick-current,
.slick-current + .slick-slide{
	opacity: 1;
}
.slick-current + .slick-slide {
    transform-origin: center left;
    transform: scale(0.6);
}
.slick-current + .slick-slide .name_icon,
.slick-current + .slick-slide .ttl_wrap{
	display: none;
}
.slick-list.draggable {
    padding-left: 5% !important;
}

#slide_arrows {
    position: absolute;
    /*left: 45vw;*/
    /*left: 48vw;*/
    left: 70%;
    bottom: 0;
}


@media screen and (min-width:1300px) and (max-width:1600px){
#slide_arrows {
    position: absolute;
    /*left: 45vw;*/
    /*left: 48vw;*/
    left: 69%;
    bottom: 0;
}
}
@media screen and (min-width:1160px) and (max-width:1290px){
#slide_arrows {
    position: absolute;
    /*left: 45vw;*/
    /*left: 48vw;*/
    left: 68%;
    bottom: 0;
}
}
@media screen and (min-width:861px) and (max-width:1159px){
#slide_arrows {
    position: absolute;
    /*left: 45vw;*/
    /*left: 48vw;*/
    left: 67%;
    bottom: 0;
}
}
#slide_arrows button {
    text-indent: -9999px;
    background: none;
    box-shadow: none;
    border: 2px solid #fff;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    margin: 0 10px;
	cursor: pointer;
}
#slide_arrows button.slick-next {
    border-bottom: 0;
    border-left: 0;
}
#slide_arrows button.slick-prev {
    border-top: 0;
    border-right: 0;
}
@media (max-width:860px){
.sec_gallery .index_ttl_flex,
.sec_gallery .index_ttl_flex .txt_wrap {
    width: 100%;
    margin-bottom: 20px;
}
.sec_gallery .h2_ttl_jp {
    margin-left: 0;
    margin-bottom: 15px;
}
.sec_gallery .index_flex{
    width: 83.7%;
}
.index_ttl_flex .txt_wrap {
    margin-right: 5%;
}
.sec_gallery .link_more {
    margin-top: 20px;
}
.sec_gallery .slider_wrap {
    width: 100%;
}
.slider.ttl_slider {
    margin-top: 0;
}
#slide_arrows{
    left: auto;
    right: 21%;
}
}
@media (max-width:640px){
.sec_gallery .index_ttl_flex, .sec_gallery .index_ttl_flex .txt_wrap {
    width: 92%;
	}
.name_icon {
    width: 120px;
    height: 120px;
    font-size: 73%;
    line-height: 140%;
}
.slick-list.draggable {
    padding-left: 0 !important;
}
.slick-current + .slick-slide {
    transform: scale(0.7);
}
#slide_arrows {
/*    right: auto;
    left: calc(75vw - 80px);*/
        right: 20%;
    bottom: -40px;
}
}


@media screen and (max-width:1216px) {
	.br_estate{display: none !important;}
}