@charset "utf-8";

.mv{
    width: 100vw;
    height: 80svh;
	height: 80vh;
/*    background: url(../img/top/mv.jpg);		/**/
/*    background-size: cover;		/**/
/*    background-position: center;		/**/
	position: relative;
	margin-bottom: 0;
}
.mv_cover{
    position: absolute;
    width: 100%;
    height: 90%;
    bottom: 0;
    left: 0;
    mix-blend-mode: multiply;
    opacity: 0.9;
    z-index: 1;
}
.mv_logo{
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 600px;
    z-index: 100;
}
.mv_scroll{
    width: 100px;
    position: absolute;
    bottom: 10px;
    right: 1.8%;
    transform: translateX(-50%);
    z-index: 101;
	mix-blend-mode: lighten;
	z-index: 200;

}
.mv_scroll img{
    animation: fluffy 2.5s infinite;
}
.mv_scroll2{
    width: 100px;
    position: absolute;
    bottom: 10px;
    right: 10.8%;
    transform: translateX(-50%);
    z-index: 101;
	mix-blend-mode: lighten;
	z-index: 200;

}
.mv_scroll2 img{
    animation: fluffy 2.5s infinite;
}
@keyframes fluffy {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.mv_nav{
    position: absolute;
    right: 2.1%;
    top: 40%;
    text-align: right;
    z-index: 103;
}
.mv_nav ul li:not(:last-child){
    margin-bottom: 20px;
}
.mv_nav ul li {
	display: block;
	width: 180px;
	height: auto;
}
.mv_nav ul li .en1{
    font-size: 56px;
    color: #c5b199;
    display: block;
}
.mv_nav ul li .ja{
    font-size: 14px;
    color: #dec393;
    display: block;
}
.mv_ttl{
    max-width: 400px;
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 114;
	display: block;
}
.mv_ttl img {
	display: block;
	height: 120px;
	width: auto;
}

.bg_blue{
    background: #073143;
    color: #fff;
}
.bg_gray{
    background: #6e7175;
    color: #c5b199;
}
.bg_beige{
    background: #f7eddb;
    color: #4d4d4d;
}
.bg_white{
    background: #fff;
    color: #4d4d4d;
}
.bg_brown{
    background: #332c29;
    color: #c5b199;
}

.bg_blue,
.bg_white,
.bg_gray{
    padding: 120px 0;
}


@media screen and (max-width: 768px) {
	.bg_blue,
	.bg_white,
	.bg_gray{
		padding: 0px 0 50px !important;
	}
	.bg_blue {
		padding: 60px 0 50px !important;
	}
}





















#kodate_mansion {
	padding-bottom: 0px;
}
.kodate_mansion_inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: auto auto;
}
.kodate_mansion_inner .item {
	width: 50%;
	padding: 60px 30px;
}
.kodate_mansion_inner h3 {
	text-align: center;
	background-color: #0A2D4C;
	color: #fff;
	padding: 20px 10px;
	font-size: x-large;
}



#kodate_mansion .secttl_en,
#sales .secttl_en {
    /* padding: 20px 0; */
    margin: 0;
    color: #fff;
}
#kodate_mansion .secttl_ja,
#sales .secttl_ja {
    margin: 0;
    color: #fff;
}



#closed .secttl_ja{
    padding: 60px 0 0;
}

.secttl_en{
    font-weight: 100;
    font-style: italic;
    font-size: 42px;
    /* margin-bottom: 0.3em; */
}
.secsubttl_en{
    font-weight: 100;
    font-style: italic;
    font-size: 18px;
}
.secttl_ja{
    font-size: 32px;
    margin-bottom: 0.3em;
}
.seclead{
    font-size: 16px;
    text-align: justify;
    line-height: 1.8;
/*
    margin-top: 1em;
*/
	margin-top: 40px;
}
.about_mv{
    max-width: 1000px;
    margin: 40px auto;
}

.arrow1 {
    fill: #c5b199;
}

#kodate_mansion .arrow2 ,
#sales .arrow2 {
    stroke: #4d4d4d;
}
#kodate_mansion .arrow1 ,
#sales .arrow1 {
    fill: #4d4d4d;
}

.arrow2 {
    fill: none;
    stroke: #c5b199;
    stroke-miterlimit: 10;
    stroke-width: .64863px;
}


.more_info2 ,
.more_info{
    position: relative;
    display: block;
    width: 100%;
    transition: 0.5s;
    max-width: 1000px;
    margin: 0 auto;
}
.more_info2:hover ,
.more_info:hover{
    opacity: 0.6;
}
.more_info_arrow{
    max-width: 70px;
    margin: 0 auto;
}
.more_info_text{
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}
.more_info_text span{
    display: block;
}
.more_info_text span.ja{
    font-size: 36px;
}
.more_info_text span.en2{
/*
    font-style: italic;
*/
    margin-bottom: 0.2em;
    font-size: 26px;
}
.sales_ttl{
    font-size: 24px;
    margin-bottom: 10px;
}
.sales_dtl{
    display: flex;
	flex-direction: column;
/*
    justify-content: space-between;
*/
    font-weight: 100;
    margin-bottom: 10px;
}
.sales_dtl p{
    font-size: 20px;
}

.access_info {
	margin-top: 20px;
	border-top: 1px #073143 solid;
	padding-top: 15px;
	font-size: 15px;
}

.sales_item{
    padding: 0px 0 0;
}
.sales_info{
    max-width: 550px;
    margin: 20px auto 20px;
	font-size: 24px;
}
.sales_area {
	margin-bottom: 20px;
}
.sales_area .mid{
    font-size: 0.8em;
}
.sales_area .small{
    font-size: 1em;
}
.sales_price {
    font-size: 1.6em;
}
.sales_price .big{
    font-size: 1.6em;
}
.sales_price .small{
    font-size: 1em;
}
.sales_dtl_box{
    border: solid 0.7px #666666;
    text-align: center;
    font-size: 20px;
    padding: 0.8em 1em;
}
.sales_dtl_box:not(:last-child){
    margin-bottom: 10px;
}
.sales_mv{
    max-width: 1000px;
    margin: 0 auto 30px;
}
.sales_mv img {
	object-fit: contain;
	height: 360px;
	width: 100%;
}


#kodate_mansion .more_info,
#sales .more_info{
    background: #b5ada1;
    padding: 20px;
}
#kodate_mansion .more_info2,
#sales .more_info2{
    background: #CFD8DC;
    padding: 20px;
}
#kodate_mansion .bg_white .more_info,
#sales .bg_white .more_info{
    background: #bcbab9;
}
#closed .more_info{
    background: #000000;
    padding: 20px;
}
.sales_ttl_box{
    background: #332c29;
}
.bg_white .sales_ttl_box{
    background: #0a2d4c;
}
.sec_ttl_flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.responsive .more_info2 ,
.responsive .more_info ,
.responsive .sales_mv {
    max-width: 700px;
    margin: 0 auto;
}

@media screen and (max-width: 1000px) {
    .mv_nav ul li .en1 {
        font-size: 42px;
    }
    .mv_nav ul li .ja {
        font-size: 10px;
    }
}

@media screen and (max-width: 768px) {
    .mv_nav{
        display: none;
    }
    .secttl_en {
        font-size: 32px;
    }
    #about .bg_gray {
        padding: 40px 0 0;
    }
    .seclead {
        font-size: 14px;
    }
    .more_info {
		width: 94%;
    }
    .more_info_text span.ja {
        font-size: 16px;
    }
    .more_info_text span.en2 {
        font-size: 1em;
    }
    .about_mv {
        margin: 40px auto 0;
    }
    .more_info2 ,
    .more_info{
        padding: 20px;
    }
    .sales_item {
        padding: 0px 0 0;
    }
    #sales .secttl_en {
        /* padding: 40px 0 0; */
    }

	.sales_mv img {
		object-fit: contain;
		object-fit: cover;
		height: 220px;
		width: 100%;
	}



	.sales_ttl {
        font-size: 20px;
    }
    .sales_dtl p {
        font-size: 40px;
    }
    .sales_dtl_box {
        font-size: 16px;
    }
    .more_info_arrow {
        max-width: 50px;
    }
    .secttl_ja {
        font-size: 28px;
    }
    .secsubttl_en {
        font-size: 14px;
    }
    .mv_logo {
        /* left: 45%; */
/*
        top: unset;
        bottom: 5%;
*/
        width: 75%;
    }
    .mv_scroll{
/*
        display: none;
*/
		width: 60px;
		position: absolute;
		bottom: 80px;
		right: 1.5%;
		transform: translateX(-50%);
		z-index: 101;
		mix-blend-mode: lighten;
		z-index: 200;
	}

	#kodate_mansion {
		padding-bottom: 0px;
	}
	.kodate_mansion_inner {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		margin: auto auto;
	}
	.kodate_mansion_inner .item {
		width: 100%;
		padding: 30px 20px;
		margin: auto;
	}
	.kodate_mansion_inner h3 {
		padding: 15px 10px;
		font-size: large;
	}
	
}

@media screen and (max-width: 650px) {
    .mv_ttl {
        width: 60%;
    }
    .secttl_en {
        font-size: 28px;
    }
    .seclead {
        font-size: 12px;
    }
    #about .bg_gray {
        padding: 20px 0 0;
    }
    .about_mv {
        margin: 20px auto 0;
    }
	.more_info {
		margin-top: 20px;
	}
    .more_info_text span.ja {
        font-size: 20px;
    }
    .more_info_text span.en2 {
        font-size: 14px;
    }
    .more_info_arrow {
        max-width: 31px;
		margin: 0 0 0 auto;
    }
    #sales .secttl_en {
        /* padding: 20px 0 0; */
    }
    .sales_ttl {
        font-size: 20px;
        margin-bottom: 0.5em;
    }
    .sales_dtl p {
        font-size: 24px;
        letter-spacing: 0;
    }
    .sales_dtl_box {
        font-size: 14px;
    }

	.sales_price {
		font-size: 1.3em;
	}
	.sales_price .big{
		font-size: 1.3em;
	}
	.sales_price .small{
		font-size: 1em;
	}



	#kodate_mansion .more_info2 ,
    #kodate_mansion .more_info ,
    #sales .more_info2 ,
    #sales .more_info {
        padding: 15px 20px;
    }
    #closed .secttl_ja {
        padding: 40px 0 0;
    }
    .secttl_ja {
        font-size: 20px;
    }
    .secsubttl_en {
        font-size: 12px;
    }
    #closed .more_info_text span.en2{
        font-size: 10px;
        letter-spacing: 0.05em;
    }
    .mv_cover {
        height: 80%;
        opacity: 1;
    }
}



.button_area {
	padding: 60px 0;
	margin: auto auto;
	width: 30%;
	text-align: center;
}

.button_area2 {
	padding: 30px 0;
	margin: auto auto;
	width: 70%;
	text-align: center;
}

.button {
	display: block;
	position: relative;
	background: #b5ada1;
	padding: 1.5rem;
	border-radius: .3rem;
	color: #4d4d4d;
	text-align: center;
	text-decoration: none;
	letter-spacing: .15rem;
	transition: .5s;
}

.button:before {
	content: "";
	position: absolute;
	top: 46%;
	right: 12px;
	width: 10px;
	height: 2px;
	background: #332c29;
	transform: rotate(45deg);
}

.button:after {
	content: "";
	position: absolute;
	top: 54%;
	right: 12px;
	width: 10px;
	height: 2px;
	background: #332c29;
	transform: rotate(-45deg);
}

.button:hover {
	background-color: #332c29;
	color: #fff;
}
.button:hover:before {
	background: #fff;
}
.button:hover:after {
	background: #fff;
}

.button2 {
	display: block;
	position: relative;
	background: #bcbab9;
	padding: 1.5rem;
	border-radius: .3rem;
	color: #4d4d4d;
	text-align: center;
	text-decoration: none;
	letter-spacing: .15rem;
	transition: .5s;
}

.button2:before {
	content: "";
	position: absolute;
	top: 46%;
	right: 12px;
	width: 10px;
	height: 2px;
	background: #332c29;
	transform: rotate(45deg);
}

.button2:after {
	content: "";
	position: absolute;
	top: 54%;
	right: 12px;
	width: 10px;
	height: 2px;
	background: #332c29;
	transform: rotate(-45deg);
}

.button2:hover {
	background-color: #332c29;
	color: #fff;
}
.button2:hover:before {
	background: #fff;
}
.button2:hover:after {
	background: #fff;
}

@media screen and (max-width: 768px) {
	.button_area2 ,
	.button_area {
		margin: 20px auto;
		width: 80%;
		text-align: center;
	}
}





/********************/


#footerFloatingMenu {
	display: block;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9999;
	text-align: center;
	padding: 5px;
	border-top: 1px #e0e0e0 solid;
	background: #0a2d4c;
	font-size: 12px;
}
  
  #footerFloatingMenu .fix_menu {
	display: flex;
	justify-content: space-between;
	line-height: 1.2;
  }
  
  
  #footerFloatingMenu .fix_menu .inq {
	width: 49%;
	background: #00838F;
	text-align: center;
	display: block;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px #fff solid;
  }
  
  #footerFloatingMenu .fix_menu .phone {
	width: 49%;
	background: #031c32;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px #fff solid;
  }
  
  #footerFloatingMenu .fix_menu .inq a,
  #footerFloatingMenu .fix_menu .phone a {
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	display: block;
	padding: 5px 0 8px;
	text-align: center;
  }
  #footerFloatingMenu .fix_menu .inq a span,
  #footerFloatingMenu .fix_menu .phone a span {
	display: block;
	margin-bottom: 0px;
	font-size: 10px;
	letter-spacing: -0.03em;
  }
  
  
  #footerFloatingMenu .fix_menu .inq a span i,
  #footerFloatingMenu .fix_menu .phone a span i {
	font-size: 3rem;
  }
  

  #footerFloatingMenu img {
	max-width: 99%;
  }
  
  @media (min-width: 768px) {
	/* xs */
	#footerFloatingMenu {
	  display: none !important;
	}
  }
  @media (max-width: 767px) {
	footer {
		margin-bottom: 50px;
	}
  }