@charset 'utf-8';

@import url('../fonts/lightcase.min.css');
@import url('../kokochiie/lightcase.min.css');

:root,
:root *{
	--kokochiie-line-color : #444444;
	--kokochiie-line-color2 : #333333;
	--kokochiie-line-color3 : #bf9d5a;
	--kokochiie-bg-color : #333333;
	--kokochiie-title-color : #bf9d5a;
	--kokochiie-table-color : #ffffff;
	--kokochiie-title-color2 : #e1cfac;
	--kokochiie-scrollbar-color1 : #ffffff;
	--kokochiie-scrollbar-color2 : #bf9d5a;
}

[class*='bg__kokochiie_gray'],
[class*='bg__kokochiie_gray__bf']:before,
[class*='bg__kokochiie_gray__af']:after,
[class*='bg__kokochiie_gray__bf__af']:before,
[class*='bg__kokochiie_gray__af__bf']:before,
[class*='bg__kokochiie_gray__bf__af']:after,
[class*='bg__kokochiie_gray__af__bf']:after{
	background-color: var(--kokochiie-bg-color);
}
.fc__title,
.fc__title *{
	color: var(--kokochiie-title-color);
}
.fc__title2,
.fc__title2 *{
	color: var(--kokochiie-title-color2);
}
@media only screen and (max-width: 767px){
	.lh__21{
		line-height: 1.5em;
	}
}
/* desktop: 1025px以上 */
@media print, screen and (min-width: 1025px){
	.mobile:not(.desktop),
	.tablet:not(.desktop){
		display: none !important;
	}
}
/* タブレット: 768px以上1024px以下 */
@media print, screen and (min-width: 768px) and (max-width: 1024px){
	.desktop:not(.tablet),
	.mobile:not(.tablet){
		display: none !important;
	}
}
/* mobile: 767px以下 */
@media only screen and (max-width: 767px){
	.desktop:not(.mobile),
	.tablet:not(.mobile){
		display: none !important;
	}
}
/* 全画面サイズ共通 */
.desktop.tablet .mobile,
.desktop:not(.tablet):not(.mobile) .tablet,
.desktop:not(.tablet):not(.mobile) .mobile,
.mobile:not(.desktop):not(.tablet) .desktop,
.mobile:not(.desktop):not(.tablet) .tablet,
.tablet:not(.desktop):not(.mobile) .desktop,
.tablet:not(.desktop):not(.mobile) .mobile,
.mobile.tablet .desktop{
	display: none !important;
}


/* ========================================================================= *
 *  nav
/* ========================================================================= */
.fnavi_list li a{
	background-color: #000000;
}
@media only screen and (max-width:767px){
	.fnavi_list li.col2{
		width: calc(30% - 1px);
	}
	.fnavi_list li:not(.pagetop) a{
		color: #ffffff;
		background-color: #000000;
	}
	.fnavi_list li:not(.pagetop) a span {
		color: #ffffff;
	}
}


/* ========================================================================= *
 *  lightcase
/* ========================================================================= */
#lightcase-nav a{
	text-decoration: none;
}
html.lightcase-open #pagetop{
	transform: translate3d(100px, 0, 0);
}
.lightcase-icon-close::before{
	display: none !important;
}
@media print, screen and (min-width:768px){
	#lightcase-content{
		position: relative;
	}
	.lightcase-contentInner{
		max-height: none !important;
		text-align: center;
	}
}
@media only screen and (max-width:767px){
	#lightcase-case{
		right: 0 !important;
		left: 0 !important;
		max-width: 100vw;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}
	#lightcase-content{
		position: relative;
	}
	.lightcase-contentInner{
		overflow: visible;
		box-sizing: border-box;
		width: 100% !important;
		text-align: center;
	}
	html:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap{
		overflow: visible !important;
		max-width: 100% !important;
		margin: 0 auto !important;
	}
	html.lightcase-open #header .menu-wrap,
	html.lightcase-open .header--sns {
		display: none;
	}
	html.lightcase-open .menu-wrap {
		mix-blend-mode: unset;
	}
	html.lightcase-open .menu-trigger span {
	  background-color: #ffffff;
	}
	html.lightcase-open .menu-wrap span.label {
	  color: #ffffff;
	}
}



/* =========================================================
All
========================================================= */
body,
header,
header .header{
	box-sizing: border-box;
	width: 100%;
}
header img,
article img,
footer img{
	max-width: 100%;
	height: auto;
}
#container {
	width: 100%;
	margin: 0px;
	padding: 0px;
	user-select: none;
}
section{
	position: relative;
	z-index: 1;
}
.article{
	position: static;
}
[data-gsap] {
  will-change: transform, opacity;
}

body.scroll_on:not(.active) .menu-wrap {
	mix-blend-mode: difference;
}
body.scroll_on:not(.active) .menu-trigger span {
  background-color: #ffffff;
}
body.scroll_on:not(.active) .menu-wrap span.label {
  color: #ffffff;
}
@media print, screen and (min-width: 768px) {
	body:not(.active):not(.scroll_on) .header--sns {
		top: 18px;
	}
}

.wrap {
	padding-top: 0;
  background-color: #ffffff;
	overflow: hidden;
}
@media only screen and (max-width: 767px){
	.wrap {
		padding-top: 0;
	}
}
.main{
  max-width: 1172px;
  padding: 0 1rem;
  width: 100%;
  margin: 0 auto;
  color: #7f5c2c;
}
.main img{
	width: 100%;
	height: auto;
	vertical-align: top;
}
.main *:not([class*="fc__"]) {
  color: #000000;
}
@media print, screen and (max-width: 1172px) and (min-width: 768px) {
	.main{
	}
}
@media only screen and (max-width: 767px){
	.main{
	}
}




@keyframes fuwafuwa {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
@media print, screen and (min-width: 768px) {
	[class*="anime--"] {
	/*  animation-play-state: paused;*/
	  visibility: hidden;
	}
	[class*="anime--"].active {
	  animation-delay: var(--anime-delay);
	  animation-duration: 3s;
	  animation-iteration-count: infinite;
	  animation-timing-function: ease-in-out;
	  animation-play-state: running;
	  visibility: visible;
	}
	.anime--100 { --anime-delay: 0.1s; }
	.anime--200 { --anime-delay: 0.2s; }
	.anime--300 { --anime-delay: 0.3s; }
	.anime--400 { --anime-delay: 0.4s; }
	.anime--500 { --anime-delay: 0.5s; }
	.anime--600 { --anime-delay: 0.6s; }
	.anime--700 { --anime-delay: 0.7s; }
	.anime--800 { --anime-delay: 0.8s; }
	.anime--900 { --anime-delay: 0.9s; }
	.anime--1000 { --anime-delay: 1s; }

	[class*="fuwafuwa"].active {
	  animation-name: fuwafuwa;
	}
}


/* =========================================================
loading
========================================================= */
#loading{
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	transition: opacity 1.2s ease-out;
	opacity: 1;
	background: #fff;
}

.loading__all{
	position: fixed;
	z-index: 1;
	display: flex;
	justify-content: center;
	flex-flow: row nowrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: fadeInGroup 0.6s ease-out 0.3s forwards;
	opacity: 0;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-60%);
}
.loading__all img{
	width: 200px;
	height: auto;
	transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transform: scale(0.3) rotate(-5deg);
	opacity: 0;
}
@media only screen and (max-width:767px){
	.loading__all img{
		width: 150px;
	}
}
@keyframes fadeInGroup{
	to{
		opacity: 1;
	}
}

#loading.fade-out{
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
}


/* =========================================================
scroll_header
========================================================= */
body .header .scroll_header {
  transform: translateY(0);
}
body .header .scroll_header::before {
  opacity: 1;
}
body:not(.active) .header .scroll_header {
  transform: translateY(-100px);
}
body:not(.active) .header .scroll_header::before {
  opacity: 0;
}

/* =========================================================
YouTube背景・固定設定
========================================================= */
#youtube_play_btn {
  display: none;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.6);
  border:none;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  transition: opacity 0.3s;
}
#youtube_play_btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}
#youtube_play_btn.is-playing::before {
  border-style: double;
  border-width: 0 0 0 16px;
  height: 16px;
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 767px) {
  #youtube_play_btn {
    display: block;
  }
}

/* =========================================================
各セクションの背景設定（固定動画をスクロールで隠すため）
========================================================= */
#kokochiie_top:not(.bg__kokochiie_gray),
#kokochiie_concept:not(.bg__kokochiie_gray),
#kokochiie_listing:not(.bg__kokochiie_gray),
#kokochiie_performance:not(.bg__kokochiie_gray),
#kokochiie_modelhouse:not(.bg__kokochiie_gray),
#kokochiie_commitment:not(.bg__kokochiie_gray),
#footer {
  background-color: var(--kokochiie-table-color, #ffffff);
  position: relative;
  z-index: 1;
}

/* =========================================================
kokochiie_slide
========================================================= */
#kokochiie_slide {
  position: relative;
  z-index: 0;
}
#kokochiie_slide_video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 56.25vw;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#kokochiie_slide_video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.05);
  width: 100vw;
  height: 56.25vw;
  border: none;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}
#kokochiie_slide:before {
	content:"";
	padding-top: 56.25%;
	display: block;
	width: 100%;
}
#kokochiie_slide .kokochiie_slide--logo {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: calc((568 / (1400 + var(--sc__width))) * 100 * 1vw);
}
#kokochiie_slide .kokochiie_slide--logo span {
	display: block;
	width: 100%;
}
#kokochiie_slide .kokochiie_slide--logo img {
	width: 100%;
	/*filter: drop-shadow(-4px -4px 5px rgba(0, 0, 0, 0.5));*/
}
@media only screen and (max-width: 767px){
	#kokochiie_slide:before {
		padding-top: 75%;
	}
	#kokochiie_slide_video{
		height: 75vw;
	}
	#kokochiie_slide_video iframe {
    min-height: 75vw;
    height:75vw;
    min-width: 133.33vw;
  }
	#kokochiie_slide .kokochiie_slide--logo {
		width: calc((568 / (767 + var(--sc__width))) * 100 * 1vw);
	}
}

/* =========================================================
kokochiie_modelhouse_banner
========================================================= */
.kokochiie_modelhouse_banner {
}
.kokochiie_modelhouse_banner__a {
  border : 5px solid var(--kokochiie-line-color3);
  width: 100%;
  max-width: 810px;
  margin: 0 auto;
  display: block;
	opacity:1 !important;
}
.kokochiie_modelhouse_banner__box1 {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  align-items: stretch;
  width: 100%;
}
.kokochiie_modelhouse_banner__img {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-image: url(../../images/kokochiie/bnr_modelhouse_pc.jpg);
	width: 358px;
}
.kokochiie_modelhouse_banner__img:before {
	display: block;
	width: 100%;
	padding-top: 36.3%;
	content: '';
}
.kokochiie_modelhouse_banner__img img {
	position: absolute;
	top:50%;
	left: 50%;
	width: 137px;
	filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.7));
	transform: translateX(-50%) translateY(-50%);
	z-index: 1;
}
.kokochiie_modelhouse_banner__txt {
	width: calc(100% - 358px);
	padding: 16px 5px 17px 23px;
}
.kokochiie_modelhouse_banner__txt--h3 {
	letter-spacing: 0;
}
.kokochiie_modelhouse_banner__txt--p {
	margin-top: 11px;
	letter-spacing: 0;
}
.kokochiie_modelhouse_banner__box2 {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
  background-color: var(--kokochiie-line-color3);
  padding: 9px 11px 10px;
}
.kokochiie_modelhouse_banner__line {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	background-image: url(../../images/kokochiie/bnr_line.svg);
	width: 82px;
	height: 19px;
	display: block;
	margin-top: 4px;
}
.kokochiie_modelhouse_banner__txt2 {
	display: block;
	letter-spacing: -0.05em;
}
@media print, screen and (max-width: 842px) and (min-width: 768px) {
	.kokochiie_modelhouse_banner__txt2{
		font-size: calc((25 / (842 + var(--sc__width))) * 100 * 1vw);
	}
}
@media only screen and (max-width: 767px){
	.kokochiie_modelhouse_banner__a {
	  border : 3px solid var(--kokochiie-line-color3);
	  max-width: 100%;
	}
	.kokochiie_modelhouse_banner__box1 {
		justify-content: flex-start;
		flex-flow: row nowrap;
		align-items: stretch;
	}
	.kokochiie_modelhouse_banner__img {
		width: 50%;
		background-image: url(../../images/kokochiie/bnr_modelhouse_sp.jpg);
	}
	.kokochiie_modelhouse_banner__img:before {
		padding-top: 45%;
	}
	.kokochiie_modelhouse_banner__img img {
		width: calc((137 / (375 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_modelhouse_banner__txt {
		width: 50%;
		padding: 15px 15px 15px 15px;
	}
	.kokochiie_modelhouse_banner__txt--p {
		margin-top: 11px;
		line-height: 1.5em;
	}
	.kokochiie_modelhouse_banner__box2 {
	  padding: 4px 3px 5px;
	}
	.kokochiie_modelhouse_banner__line {
		width: calc((40 / (375 + var(--sc__width))) * 100 * 1vw);
		background-size: cover;
	}
	.kokochiie_modelhouse_banner__txt2 {
		text-align: center;
	  letter-spacing: 0.03em;
	  padding: 0 10px;
	}
}




/* =========================================================
kokochiie_top
========================================================= */
#kokochiie_top {
}
.kokochiie_top__main{
	padding-top: 120px;
	padding-bottom: 289px;
}
@media only screen and (max-width: 767px){
	.kokochiie_top__main{
		padding-top: 60px;
		padding-bottom: 60px;
	}
}
.kokochiie_top__banner {
	margin: 0 auto;
}
.kokochiie_top {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  align-items: flex-start;
	max-width: 1140px;
	margin: 118px auto 0;
}
.kokochiie_top__msg {
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 33px;
	margin: 106px auto 0 130px;
}
.kokochiie_top__msg--line {
	width: 60px;
	height: 1px;
	background-color: var(--kokochiie-line-color);
	margin-top: 24px;
}
.kokochiie_top__msg--title {
	letter-spacing: 0.1em;
}
.kokochiie_top__img {
	width: 400px;
}
.kokochiie_top__img img {
	width: 100%;
	height: auto;
}
@media print, screen and (max-width: 1180px) and (min-width: 768px) {
	.kokochiie_top__msg {
	  margin-right: calc((258 / (1180 + var(--sc__width))) * 100 * 1vw);
	  margin-left: auto;
	}
}
@media print, screen and (max-width: 1005px) and (min-width: 768px) {
	.kokochiie_top__msg {
	  margin-right: auto;
	  margin-left: 0;
	}
}
@media only screen and (max-width: 767px){
	.kokochiie_top {
	  justify-content: flex-start;
	  flex-flow: column nowrap;
		max-width: 100%;
		margin: 60px auto 0;
	}
	.kokochiie_top__msg {
	  gap: 20px;
		margin: 0 auto 0 0;
	}
	.kokochiie_top__msg--line {
		width: 40px;
		margin-top: 16px;
	}
	.kokochiie_top__img {
		margin-left: auto;
		margin-right: 0;
		margin-top: 30px;
		width: calc(100% - 40px - 20px);
	}
}



/* =========================================================
kokochiie_concept
========================================================= */
#kokochiie_concept {
}
.kokochiie_concept__main {
  display: flex;
  justify-content: flex-start;
  flex-flow: column nowrap;
  align-items: flex-start;
  gap: 120px;
  position: relative;
  top: -120px;
  margin: 0 auto;
}
.kokochiie_concept{
  display: flex;
  justify-content: flex-end;
  flex-flow: row nowrap;
  align-items: flex-start;
	width: 100%;
	gap: 0 30px;
}
.kokochiie_concept__left {
  display: flex;
  justify-content: flex-end;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 31px;
  width: 360px;
}
.kokochiie_concept__right {
	max-width: 720px;
	width: calc(100% - 30px - 365px);
}
.kokochiie_concept__no {
	width: 61px;
	min-width: 61px;
	margin-top: 7px;
}
.kokochiie_concept__no img {
	width: 100%;
	height: auto;
}
.kokochiie_concept__txt{
}
.kokochiie_concept__txt h3 {
	letter-spacing: 0.05em;
}
.kokochiie_concept__txt p {
	margin-top: 13px;
}
.kokochiie_concept__img {
	width: 100%;
}
.kokochiie_concept__img img {
	width: 100%;
	height: auto;
}
@media only screen and (max-width: 767px){
	#kokochiie_concept {
	}
	.kokochiie_concept__main {
	  gap: 60px;
	  top: 0px;
	  padding-top: 60px;
	  padding-bottom: 60px;
	}
	.kokochiie_concept{
		gap: 40px;
	}
	.kokochiie_concept__left {
	  justify-content: flex-start;
	  gap: 30px;
		width: 100%;
	}
	.kokochiie_concept__right {
		max-width: 100%;
		width: 100%;
	}
	.kokochiie_concept__no {
		width: 50px;
		min-width: 50px;
	}
	.kokochiie_concept__txt{
		width: calc(100% - 50px - 30px);
	}
}

/* =========================================================
kokochiie_concept_01
========================================================= */
.kokochiie_concept_01 {
	justify-content: flex-end;
}
.kokochiie_concept_01__left {
	margin-top: 231px;
}
.kokochiie_concept_01__right {
}
@media only screen and (max-width: 767px){
	.kokochiie_concept_01 {
		justify-content: flex-end;
		flex-flow: column-reverse nowrap;
	}
	.kokochiie_concept_01__left {
		margin-top: 0px;
	}
}


/* =========================================================
kokochiie_concept_02
========================================================= */
.kokochiie_concept_02 {
  flex-flow: row-reverse nowrap;
  justify-content: space-between;
}
.kokochiie_concept_02__left {
	margin-top: 117px;
	justify-content: flex-start;
}
.kokochiie_concept_02__right {
}
@media only screen and (max-width: 767px){
	.kokochiie_concept_02 {
		justify-content: flex-end;
		flex-flow: column-reverse nowrap;
	}
	.kokochiie_concept_02__left {
		margin-top: 0px;
	}
}


/* =========================================================
kokochiie_concept_03
========================================================= */
.kokochiie_concept_03 {
	justify-content: space-between;
}
.kokochiie_concept_03__left {
	margin-top: 101px;
}
.kokochiie_concept_03__right {
}
@media only screen and (max-width: 767px){
	.kokochiie_concept_03 {
		justify-content: flex-end;
		flex-flow: column-reverse nowrap;
	}
	.kokochiie_concept_03__left {
		margin-top: 0px;
	}
}


/* =========================================================
kokochiie_concept_04
========================================================= */
.kokochiie_concept_04 {
  flex-flow: row-reverse nowrap;
  justify-content: space-between;
}
.kokochiie_concept_04__left {
	margin-top: 117px;
	justify-content: flex-start;
}
.kokochiie_concept_04__right {
}
@media only screen and (max-width: 767px){
	.kokochiie_concept_04 {
		justify-content: flex-end;
		flex-flow: column-reverse nowrap;
	}
	.kokochiie_concept_04__left {
		margin-top: 0px;
	}
}


/* =========================================================
kokochiie_listing
========================================================= */
#kokochiie_listing {
	padding-bottom: 120px;
}
.kokochiie_listing__bg {
	position: relative;
}
.kokochiie_listing__bg:before {
	content:"";
	display: block;
	width: 100%;
	padding-top: 47.1%;
	background-color: transparent;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-image: url(../../images/kokochiie/listing_bg.jpg);
}
.kokochiie_listing__main {
	padding-top: 112px;
}
.kokochiie_listing__txt {
	text-align: center;
}
.kokochiie_listing__txt--h3 {
	letter-spacing: 0.1em;
}
.kokochiie_listing__txt--p {
	letter-spacing: 0.1em;
	margin-top: 18px;
}
.kokochiie_listing__info {
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
  align-items: flex-start;
  margin-top: 113px;
  gap: 0 71px;
}
.kokochiie_listing__floorplan {
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 0 57px;
  max-width: calc(100% - 71px - 240px);
}
.kokochiie_listing__floorplan--1f {
  display: flex;
  justify-content: flex-start;
  flex-flow: row-reverse nowrap;
  align-items: flex-start;
  gap: 0 19px;
}
.kokochiie_listing__floorplan__1f--no {
	width: 37px;
	margin-top: 4px;
}
.kokochiie_listing__floorplan__1f--no img {
	width: 100%;
	height: auto;
}
.kokochiie_listing__floorplan__1f--svg {
	width: 281px;
	margin-top: 0;
}
.kokochiie_listing__floorplan__1f--svg img {
	width: 100%;
	height: auto;
}
.kokochiie_listing__floorplan--2f {
  display: flex;
  justify-content: flex-start;
  flex-flow: row-reverse nowrap;
  align-items: flex-start;
  gap: 0 17px;
}
.kokochiie_listing__floorplan__2f--no {
	width: 40px;
	margin-top: 4px;
}
.kokochiie_listing__floorplan__2f--no img {
	width: 100%;
	height: auto;
}
.kokochiie_listing__floorplan__2f--svg {
	width: 257px;
	margin-top: 23px;
}
.kokochiie_listing__floorplan__2f--svg img {
	width: 100%;
	height: auto;
}
.kokochiie_listing__table {
	width: 240px;
}
.kokochiie_listing__table .tbl_listing {
	width: 100%;
	border-color: var(--kokochiie-table-color);
}
.kokochiie_listing__table .tbl_listing tr {
	border-color: var(--kokochiie-table-color);
}
.kokochiie_listing__table .tbl_listing tr th {
	color: var(--kokochiie-table-color);
	padding: 9px 0 12px 7px;
	width: 36.6%;
}
.kokochiie_listing__table .tbl_listing tr td {
	color: var(--kokochiie-table-color);
	padding: 9px 0 12px 0px;
	width: 63.4%;
}
@media print, screen and (max-width: 1040px) and (min-width: 768px) {
	.kokochiie_listing__info {
	  gap: 0 calc((60 / (1040 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_listing__floorplan {
	  gap: 0 calc((57 / (1040 + var(--sc__width))) * 100 * 1vw);
	  max-width: none;
	}
	.kokochiie_listing__floorplan--1f {
	  gap: 0 calc((19 / (1040 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_listing__floorplan__1f--no {
		width: calc((37 / (1040 + var(--sc__width))) * 100 * 1vw);
		margin-top: calc((4 / (1040 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_listing__floorplan__1f--svg {
		width: calc((281 / (1040 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_listing__floorplan--2f {
	  gap: 0 calc((17 / (1040 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_listing__floorplan__2f--no {
		width: calc((40 / (1040 + var(--sc__width))) * 100 * 1vw);
		margin-top: calc((4 / (1040 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_listing__floorplan__2f--svg {
		width: calc((257 / (1040 + var(--sc__width))) * 100 * 1vw);
		margin-top: calc((23 / (1040 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_listing__table {
		width: 100%;
	}
	.kokochiie_listing__table .tbl_listing tr th {
		color: var(--kokochiie-table-color);
		width: 45%;
	}
	.kokochiie_listing__table .tbl_listing tr td {
		color: var(--kokochiie-table-color);
		width: 55%;
	}
}
@media only screen and (max-width: 767px){
	#kokochiie_listing {
		padding-bottom: 60px;
	}
	.kokochiie_listing__txt--h3 {
		line-height: 1.4em;
	}
	.kokochiie_listing__bg:before {
		padding-top: 55%;
	}
	.kokochiie_listing__main {
		padding-top: 60px;
	}
	.kokochiie_listing__info {
	  justify-content: flex-start;
	  flex-flow: column nowrap;
	  align-items: flex-start;
	  margin-top: 55px;
	  gap: 0 60px;
	}
	.kokochiie_listing__floorplan {
	  justify-content: space-between;
	  flex-flow: row nowrap;
	  align-items: flex-start;
	  gap: 0;
	  max-width: 100%;
	  width: 100%;
	}
	.kokochiie_listing__floorplan--1f {
	  gap: 0 calc((10 / (375 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_listing__floorplan__1f--no {
		width: calc((24 / (375 + var(--sc__width))) * 100 * 1vw);
		margin-top: 0;
	}
	.kokochiie_listing__floorplan__1f--svg {
		width: calc((130 / (375 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_listing__floorplan--2f {
	  gap: 0 calc((10 / (375 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_listing__floorplan__2f--no {
		width: calc((24 / (375 + var(--sc__width))) * 100 * 1vw);
		margin-top: 0;
	}
	.kokochiie_listing__floorplan__2f--svg {
		width: calc((130 / (375 + var(--sc__width))) * 100 * 1vw);
		margin-top: 0;
	}
	.kokochiie_listing__table {
		margin-top: 60px;
		width: 100%;
	}
}


/* =========================================================
kokochiie_listing__slide
========================================================= */
.kokochiie_listing__slide {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.kokochiie_listing__slide__left {
}
.kokochiie_listing__slide__left--no {
	position: relative;
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 20px;
}
.kokochiie_listing__slide__left--no img {
	width: 100%;
	height: auto;
}
.kokochiie_listing__slide__left--arrow{
	display: block;
	width: 17px;
}
.kokochiie_listing__slide__left--arrow:before {
	content:"";
	display: block;
	width: 100%;
	padding-top: 64.7%;
	background-color: transparent;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center bottom;
}
.kokochiie_listing__slide__right{
}
@media only screen and (max-width: 767px){
	.kokochiie_listing__slide__right{
		margin-top: 20px;
	}
	.kokochiie_listing__slide__right .splide ,
	.kokochiie_listing__slide__right .splide .splide__track {
		width: 100%;
	}
	.kokochiie_listing__slide__right .splide .splide__track {
		max-width: 100%;
		width: 100%;
		display: block;
		overflow-x:scroll;
		overflow-y:hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: var(--kokochiie-scrollbar-color1) var(--kokochiie-scrollbar-color2);
	}
	.kokochiie_listing__slide__right .splide .splide__list {
	  display: flex !important;
	  justify-content: flex-start;
	  flex-flow: row nowrap;
	  align-items: flex-start;
	  gap: 20px;
	  padding: 0;
	  margin: 0 20px !important;
	  min-width: fit-content;
	  width: fit-content;
	}
	.kokochiie_listing__slide__right .splide .splide__slide {
		width: 300px;
		min-width: 300px;
	}
}


/* =========================================================
kokochiie_listing__slide--1f
========================================================= */
.kokochiie_listing__slide--1f {
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
  align-items: flex-start;
	margin-top: 120px;
}
.kokochiie_listing__slide__left__1f {
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
  align-items: center;
	gap:0 14px;
	margin: 0 0 0 calc(((100vw - (var(--sc__width) * 1px)) - 1140px) / 2);
	min-width: 120px;
	width: 120px;
}
.kokochiie_listing__slide__left__1f--no {
	width: 45px;
}
.kokochiie_listing__slide__left__1f--arrow:before {
	background-image: url(../../images/kokochiie/i_arrow_r.svg);
}
.kokochiie_listing__slide__right__1f {
	width: calc(100% - 120px);
}
@media print, screen and (max-width: 1180px) and (min-width: 768px) {
	.kokochiie_listing__slide__left__1f {
		margin: 0 0 0 20px;
	}
	.kokochiie_listing__slide__right__1f {
		width: calc(100% - 120px - 20px);
	}
}
@media only screen and (max-width: 767px){
	.kokochiie_listing__slide--1f {
	  flex-flow: column nowrap;
		margin-top: 60px;
	}
	.kokochiie_listing__slide__right__1f {
		width: 100%;
	}
	.kokochiie_listing__slide__left__1f {
		display: flex;
		justify-content: flex-start;
		flex-flow: column nowrap;
		align-items: center;
		gap: 10px;
		margin: 0 0 0 1rem;
		min-width: 0;
		width: auto;
	}
	.kokochiie_listing__slide__left__1f--arrow {
		transform: rotate(90deg);
	}
}


/* =========================================================
kokochiie_listing__slide--2f
========================================================= */
.kokochiie_listing__slide--2f {
  display: flex;
  justify-content: flex-start;
  flex-flow: row-reverse nowrap;
  align-items: flex-start;
	margin-top: 60px;
}
.kokochiie_listing__slide__left__2f {
  display: flex;
	justify-content: flex-start;
  flex-flow: row-reverse nowrap;
  align-items: center;
	gap:0 9px;
	margin: 0 calc(((100vw - (var(--sc__width) * 1px)) - 1140px) / 2) 0 0;
	min-width: 120px;
	width: 120px;
}
.kokochiie_listing__slide__left__2f--no {
	width: 50px;
}
.kokochiie_listing__slide__left__2f--arrow:before {
	background-image: url(../../images/kokochiie/i_arrow_l.svg);
}
.kokochiie_listing__slide__right__2f {
	width: calc(100% - 120px);
}
@media print, screen and (max-width: 1180px) and (min-width: 768px) {
	.kokochiie_listing__slide__left__2f {
		margin: 0 20px 0 0;
	}
	.kokochiie_listing__slide__right__2f {
		width: calc(100% - 120px - 20px);
	}
}
@media only screen and (max-width: 767px){
	.kokochiie_listing__slide--2f {
	  flex-flow: column nowrap;
		margin-top: 60px;
	}
	.kokochiie_listing__slide__right__2f {
		width: 100%;
	}
	.kokochiie_listing__slide__left__2f {
		display: flex;
		justify-content: flex-start;
		flex-flow: column nowrap;
		align-items: center;
		gap: 10px;
		margin: 0 0 0 1rem;
		min-width: 0;
		width: auto;
	}
	.kokochiie_listing__slide__left__2f--arrow{
		transform: rotate(275deg);
	}
}


/* =========================================================
kokochiie_performance
========================================================= */
#kokochiie_performance {
}
.kokochiie_performance__main {
	padding-top: 100px;
	padding-bottom: 120px;
}
@media only screen and (max-width: 767px){
	.kokochiie_performance__main {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}
.kokochiie_performance__top {
}
.kokochiie_performance__top__title {
  display: flex;
  justify-content: flex-start;
  flex-flow: column nowrap;
  align-items: center;
  gap : -20px;
}
.kokochiie_performance__top__title--en {
	display: block;
	letter-spacing: 0.02em;
}
.kokochiie_performance__top__title--jp {
	display: block;
	letter-spacing: 0.7em;
	margin-top: -26px;
	text-indent: 0.7em;
}
@media only screen and (max-width: 767px){
	.kokochiie_performance__top__title {
	  gap : -10px;
	}
	.kokochiie_performance__top__title--jp {
		margin-top: -16px;
	}
}
.kokochiie_performance {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  align-items: stretch;
  margin-top: 117px;
}
.kokochiie_performance__info{
	width: 340px;
	padding: 52px 8px 50px 20px;
	position: relative;
}
.kokochiie_performance__txt {
}
.kokochiie_performance__txt--title {
	margin-bottom: 17px;
	position: relative;
}
.kokochiie_performance__title {
	display: block;
	letter-spacing: -0.02em;
}
.kokochiie_performance__no{
	display: block;
	width: 82px;
	margin: 0;
	user-select: none;
	opacity: 0.5;
	position: absolute;
	right: 12px;
	top: -16px;
}
.kokochiie_performance__no img {
	width: 100%;
	height: auto;
}
.kokochiie_performance__img {
	margin: 30px auto 0 0;
	max-width: 300px;
	width: 100%;
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
  align-items: flex-start;
}
.kokochiie_performance__img img {
	height: auto;
}
.kokochiie_performance__list {
	margin: 30px auto 0 0;
	max-width: 300px;
	width: 100%;
}
.kokochiie_performance__list--ul {
	border-top : 1px solid var(--kokochiie-line-color2);
}
.kokochiie_performance__list--ul li {
	border-bottom : 1px solid var(--kokochiie-line-color2);
	padding: 8px 9px 11px 9px;
	letter-spacing: 0;
}
.kokochiie_performance__brackets{
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	user-select: none;
}
.kokochiie_performance__brackets li{
	position: absolute;
	display: block;
	width: 21px;
	user-select: none;
}
.kokochiie_performance__brackets li:before{
	display: block;
	width: 100%;
	padding-top: 100%;
	content: '';
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
}
.kokochiie_performance__brackets .brackets_TL {
	top: 0;
	left: 0;
}
.kokochiie_performance__brackets .brackets_TL:before {
	background-image: url(../../images/kokochiie/brackets_TL.svg);
}
.kokochiie_performance__brackets .brackets_TR {
	top: 0;
	right: 0;
}
.kokochiie_performance__brackets .brackets_TR:before {
	background-image: url(../../images/kokochiie/brackets_TR.svg);
}
.kokochiie_performance__brackets .brackets_BR {
	bottom: 0;
	right: 0;
}
.kokochiie_performance__brackets .brackets_BR:before {
	background-image: url(../../images/kokochiie/brackets_BR.svg);
}
.kokochiie_performance__brackets .brackets_BL {
	bottom: 0;
	left: 0;
}
.kokochiie_performance__brackets .brackets_BL:before {
	background-image: url(../../images/kokochiie/brackets_BL.svg);
}
@media print, screen and (max-width: 1180px) and (min-width: 768px) {
	.kokochiie_performance__no{
		width: calc((82 / (1180 + var(--sc__width))) * 100 * 1vw);
		right: calc((12 / (1180 + var(--sc__width))) * 100 * 1vw);
		top: calc((-16 / (1180 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_performance__info{
		width: 29.8%;
		padding-top: calc((52 / (1180 + var(--sc__width))) * 100 * 1vw);
	}
	.kokochiie_performance__title{
		font-size: calc((26 / (1180 + var(--sc__width))) * 100 * 1vw);
	}
}
@media only screen and (max-width: 767px){
	.kokochiie_performance {
	  justify-content: flex-start;
	  flex-flow: column nowrap;
	  align-items: flex-start;
	  margin-top: 60px;
	  gap: 60px;
	}
	.kokochiie_performance__info{
		width: 100%;
		padding: 30px 20px 30px 20px;
	}
	kokochiie_performance__img {
	  margin: 30px auto 0;
	}
	.kokochiie_performance__list{
		width: 100%;
	  margin: 30px auto 0;
	}
	.kokochiie_performance__no{
		width: 60px;
		right: 20px;
		top: -10px;
	}
}

/* =========================================================
kokochiie_performance_01
========================================================= */
.kokochiie_performance_01 {
}
.kokochiie_performance_01__img img {
	width: 172px;
}


/* =========================================================
kokochiie_performance_02
========================================================= */
.kokochiie_performance_02 {
}
.kokochiie_performance_02__img img {
	width: 232px;
}


/* =========================================================
kokochiie_performance_03
========================================================= */
.kokochiie_performance_03 {
}
.kokochiie_performance_03__img img {
	width: 100%;
}



/* =========================================================
kokochiie_modelhouse
========================================================= */
#kokochiie_modelhouse {
}
.kokochiie_modelhouse__bg {
}
.kokochiie_modelhouse__main {
	padding-top: 100px;
	padding-bottom: 120px;
}
@media only screen and (max-width: 767px){
	.kokochiie_modelhouse__main {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}
.kokochiie_modelhouse__txt {
	text-align: center;
}
.kokochiie_modelhouse__txt--h3 {
	letter-spacing: 0.15em;
}
.kokochiie_modelhouse__txt--p {
	letter-spacing: 0.15em;
	margin-top: 18px;
}
.kokochiie_modelhouse__point {
  max-width: 1080px;
  width: 100%;
  margin: 58px auto 0;
}
.kokochiie_modelhouse__point--ul {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  align-items: stretch;
  width: 100%;
  gap: 30px 2.75%;
}
.kokochiie_modelhouse__point--ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  border : 4px solid var(--kokochiie-line-color3);
	width: 31.5%;
	padding: 5px 5px 5px;
	letter-spacing: 0.03em;
}
.kokochiie_modelhouse__msg {
	text-align: center;
	margin-top: 52px;
}
.kokochiie_modelhouse__msg--p {
	letter-spacing: 0.12em;
}
.kokochiie_modelhouse__banner{
	margin-top: 79px;
}
@media print, screen and (max-width: 1180px) and (min-width: 768px) {
	.kokochiie_modelhouse__point--ul li {
		font-size: calc((26 / (1180 + var(--sc__width))) * 100 * 1vw);
	}
}
@media only screen and (max-width: 767px){
	.kokochiie_modelhouse__txt--h3 {
		line-height: 1.4em;
	}
	.kokochiie_modelhouse__point--ul {
	  justify-content: flex-start;
	  flex-flow: column nowrap;
	  align-items: flex-start;
	  width: 100%;
	  gap: 20px 0;
	}
	.kokochiie_modelhouse__point--ul li {
	  border : 3px solid var(--kokochiie-line-color3);
		width: 100%;
		padding: 5px 5px 5px;
	}
	.kokochiie_modelhouse__banner{
		margin-top: 60px;
	}
}



/* =========================================================
kokochiie_commitment
========================================================= */
#kokochiie_commitment {
}
.kokochiie_commitment__main{
	display: flex;
	justify-content: center;
	flex-flow: column nowrap;
	align-items: center;
	gap: 40px 0;
	padding-top: 108px;
	padding-bottom: 60px;
	text-align: center;
}
.kokochiie_commitment--p {
	letter-spacing: 0.12em;
}
@media only screen and (max-width: 767px){
	.kokochiie_commitment--p {
		line-height: 1.7em;
	}
	.kokochiie_commitment__main{
		padding-top: 60px;
		padding-bottom: 30px;
	}
}