@charset "UTF-8";

/*--------------------
背景動画
--------------------*/
/* 背景動画 */
#intro-video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1000;
}

/* 動画終了後、非表示にするアニメーションも加えてOK */
.hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s ease;
	display: none;
}

#skip-button {
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	position: fixed;
	z-index: 1001;
	background: #000;
	color: #fff;
	cursor: pointer;
	border-radius: 4px;
	opacity: 0.7;
	transition: opacity 1s;
	display: flex;
	align-items: center;
}
#skip-button::before{
	display: block;
	content: '';
	background: url(../img/index/skip-before.svg) no-repeat;
	background-size: contain;
}
#skip-button::after{
	display: block;
	content: '';
	background: url(../img/index/skip-after.svg) no-repeat;
	background-size: contain;
}
#skip-button:hover {
	opacity: 1;
}
#loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1002;
	color: white;
	font-weight: bold;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 8px;
	text-align: center;
}

/* 音量 */
#volume-button {
	position: fixed;
	z-index: 1002;
	background: #000;
	color: #fff;
	cursor: pointer;
	border-radius: 8px;
	opacity: 0.7;
	transition: opacity 1s;
	display: flex;
	align-items: center;
}
#volume-button:hover{
	opacity: 1;
}
#volume-button img{
	height: auto;
}
.icon--on {
	display: none;
}
#volume-text {
	color: #fff;
	display: inline-block;
	font-weight: 600;
	line-height: 1;
}


/* PC */
@media screen and (min-width:768px) {
	#main-contents{
		display: none;
	}
	#skip-button {
		bottom: 20px;
		right: 20px;
		font-size: 28px;
		letter-spacing: 0.1rem;
	}
	#skip-button::before{
		width: 26px;
		height: 26px;
		margin-right: 10px;
	}
	#skip-button::after{
		width: 12px;
		height: 13px;
		margin-left: 7px;
	}
	#loading {
		font-size: 24px;
		padding: 20px 40px;
	}
	/* 音量 */
	#volume-button {
		top: 20px;
		right: 20px;
		padding: 8px 16px;
		width: 120px;
		height: 50px;
	}
	#volume-button img{
		width: 40px;
		margin-right: 10px;
	}
	#volume-text {
		font-size: 20px;
	}
	/* フェード共通設定 */
	.fade-out {
		animation: fadeOut 1s forwards;
	}
	.fade-in {
		animation: fadeIn 1s forwards;
	}
	@keyframes fadeOut {
		from { opacity: 1; }
		to { opacity: 0; }
	}
	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}
/* SP */
@media screen and (max-width:767px) {
	#intro-video{
		object-fit: contain;
		background: rgba(0, 0, 0, 0.8);
	}
	#skip-button {
		bottom: 4vw;
		right: 4vw;
		font-size: 4.8vw;
		padding: 2.67vw 4vw;
		letter-spacing: 0.1rem;
	}
	#skip-button::before{
		width: 5.87vw;
		height: 5.87vw;
		margin-right: 2.67vw;
	}
	#skip-button::after{
		width: 3.2vw;
		height: 3.2vw;
		margin-left: 2.67vw;
	}
	#loading {
		font-size: 4.8vw;
		padding: 4vw 8vw;
	}
	/* 音量 */
	#volume-button {
		top: 4vw;
		right: 4vw;
		padding: 1.33vw 3.2vw;
		width: 26.67vw;
		height: 12vw;
	}
	#volume-button img{
		width: 8vw;
		margin-right: 2.67vw;
	}
	#volume-text {
		font-size: 4.8vw;
	}
	/* フェード共通設定 */
	.fade-out {
		animation: fadeOut 1s forwards;
	}
	@keyframes fadeOut {
		from { opacity: 1; }
		to { opacity: 0; }
	}

}

/*ホバーアニメーション*/
.img-switch {
	position: relative;
	display: inline-block;
}

.img-switch img {
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 0.3s ease;
}

.img-switch img:nth-child(1) {
	opacity: 1;
	/* _off画像（常時表示） */
	z-index: 1;
}

.img-switch img:nth-child(2) {
	opacity: 0;
	/* _on画像（非表示） */
	z-index: 2;
}


.anime-arrow-scroll img{
	opacity: 0;
	transform: translateX(-50px); /* 初期状態もセット */
	transition: opacity 1s ease-out, transform 1s ease-out;
}
.anime-arrow-scroll.active img {
	opacity: 1;
	transform: translateX(0);
}

/*------------------------
トップイメージ
------------------------*/

/* PC */
@media screen and (min-width:768px) {
	header .logo-wrap .txt .lead,
	header .logo-wrap .txt .flex-box .sub{
		color: #fff;
	}

	.top-bg{
		background: #fff url(../img/index/topimg.jpg) no-repeat center;
		background-size: cover;
		min-height: 770px;
	}
	#topimg .inner{
		width: 1200px;
		margin: 0 auto;
	}
	#topimg .text-wrap{
		width: 510px;
		margin: 60px 0 0 auto;
	}
	#topimg h1{
		height: auto;
		margin: 0 -45px 15px auto;
		transition: all .3s ease 0s;
	}
	#topimg .jp{
		width: 388px;
		margin-bottom: 30px;
	}
	#topimg .textarea{
		font-size: 16px;
		line-height: 2.125;
		letter-spacing: .14em;
	}
}

@media screen and (min-width: 768px) and (max-width: 1310px) {
	#topimg h1{
		margin: 0 0px 15px auto;
	}
}
/* SP */
@media screen and (max-width:767px) {
	#topimg{
		background: #fff url(../img/index/sp_topimg.jpg) no-repeat center;
		background-size: cover;
		min-height: 161.6vw;
	}
	#topimg .inner{
		margin: 0 10.67vw;
	}
	#topimg .text-wrap{
		padding-top: 2.67vw;
	}
	#topimg h1{
		width: 100%;
		height: auto;
		margin-bottom: 4vw;
	}
	#topimg .jp{
		width: 58.93vw;
		margin-bottom: 4vw;
	}
	#topimg .textarea{
		font-size: 3.2vw;
		line-height: 1.917;
	}
}

/*------------------------
リンク
------------------------*/
main{
	background: rgba(105, 100, 105, .1);
}
#link .inner {
	display: flex;
	align-items: center;
	justify-content: center;
}
#link .box a {
	position: relative;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: #fff;
}
#link .box.individual a::before{
	background: url(../img/index/btn_individual.svg) no-repeat;
	background-size: contain;
}
#link .box.corporate a::before{
	background: url(../img/index/btn_corporate.svg) no-repeat;
	background-size: contain;
}
#link .box.afterservice a::before{
	background: url(../img/index/btn_afterservice.svg) no-repeat;
	background-size: contain;
}
#link .box .txt {
	z-index: 1;
	text-align: center;
	letter-spacing: .1em;
	line-height: 1.615;
	font-weight: normal;
}
#link .box.individual a .txt{
	color: var(--blue);
}
#link .box.corporate a .txt{
	color: var(--green);
}
#link .box.afterservice a .txt{
	color: var(--pink);
}
#link .box a::before{
	content: "";
	position: absolute;
	z-index: 0;
	transition: transform 0.6s ease;
}
#link .box a::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	}
#link .box .en {
	z-index: 1;
	font-weight: bold;
	line-height: 1;
	color: var(--gray);
}
#link .box.individual a::after{
	border-color: transparent var(--blue) transparent transparent;
}
#link .box.corporate a::after{
	border-color: transparent transparent transparent var(--green);
}
#link .box.afterservice a::after{
	border-color: transparent transparent transparent var(--pink);
}
/* PC */
@media screen and (min-width:768px) {
	#link .inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 70px;
    padding: 35px 0 80px;
  }
	#link .group {
    display: flex;
    flex-direction: row;
    gap: 70px;
  }
  #link .afterservice-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left: 40px;
  }
  #link .box {
    width: 235px;
    margin: 0;
  }
	#link .box a {
		width: 235px;
		height: 235px;
		margin: 0 40px;
	}
	#link .box.individual a:hover{
		background: var(--blue);
	}
	#link .box.corporate a:hover{
		background: var(--green);
	}
	#link .box.afterservice a:hover{
		background: var(--pink);
	}
	#link .box a::before{
		width: 260px;
		height: 260px;
	}
	#link .box a:hover::before {
		transform: rotate(90deg);
	}
	#link .box.individual a::after{
		border-width: 6.5px 10px 6.5px 0px;
		right: -30px;
	}
	#link .box.corporate a::after{
		border-width: 6.5px 0px 6.5px 10px;
		left: -30px;
	}
	#link .box.afterservice a::after{
		border-width: 0px 0px 0px 0px;
		left: -30px;
	}

	#link .box .txt {
		font-size: 26px;
		margin-bottom: 12px;
	}
	#link .box a:hover .txt{
		color: #fff;
	}
	#link .box .en {
		font-size: 14px;
	}
	#link .box a:hover .en{
		color: var(--black);
	}
}

/* SP */
@media screen and (max-width:767px) {
	#link .inner {
		padding: 8vw;
		justify-content: space-between;
	}
	#link .box a {
		width: 35.73vw;
		height: 35.73vw;
	}
	#link .box a::before{
		width: 38.67vw;
		height: 38.67vw;
	}
	#link .box.individual a::after{
		border-width: 1.33vw 2.13vw 1.33vw 0px;
		right: -5.33vw;
	}
	#link .box.corporate a::after{
		border-width: 1.33vw 0px 1.33vw 2.13vw;
		left: -5.33vw;
	}
	#link .box.afterservice a::after{
		border-width: 1.33vw 0px 1.33vw 2.13vw;
		left: -5.33vw;
	}
	#link .box .txt {
		font-size: 4vw;
		margin-bottom: 1.6vw;
	}
	#link .box .en {
		font-size: 2.13vw;
	}
}

/*------------------------
Information
------------------------*/
	#info h2 {
		text-align: center;
		line-height: 1;
	}
	#info ul li a {
		font-weight: 500;
	}
	#info .t-link a{
		text-align: end;
		font-weight: 600;
		color: var(--blue);
	}
	#info .t-link a::before{
		content: "» ";
		display: inline-block;
		color: var(--black);
	}
/* PC */
@media screen and (min-width:768px) {
	#info .inner{
		padding: 0 0 100px;
		width: 800px;
		margin: 0 auto;
	}
	#info h2 {
		font-size: 20px;
		margin-bottom: 25px;
	}
	#info ul li a {
		display: flex;
		align-items: baseline;
		font-size: 16px;
		margin-bottom: 8px;
		position: relative;
	}
	#info ul li a::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		height: 1px;
		width: 100%;
		background-color: currentColor;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s ease;
	}
	#info ul li a:hover::after {
		transform: scaleX(1);
	}
	#info ul li a:hover{
		color: var(--blue);
	}
	#info ul li a .day {
		min-width: 170px;
	}
	#info .t-link a{
		font-size: 16px;
	}
	#info .t-link a:hover{
		text-decoration: underline;
	}
	#info .t-link a::before{
		margin-right: 6px;
	}
}

/* SP */
@media screen and (max-width:767px) {
	#info .inner{
		padding: 0 10.67vw 5.33vw;
	}
	#info h2 {
		font-size: 3.2vw;
		margin-bottom: 5.33vw;
	}
	#info ul li a {
		font-size: 3.2vw;
		margin-bottom: 1.33vw;
		position: relative;
		line-height: 1.75;
		letter-spacing: 0.12em;
	}
	#info ul li .day{
		line-height: 1.4;
	}
	#info ul li .ttl{
		padding-left: 3.33vw;
	}
	#info .t-link a{
		font-size: 3.2vw;
		text-decoration: underline;
	}
	#info .t-link a::before{
		margin-right: 1.33vw;
	}
}


/*------------------------
メニュー
------------------------*/
	#link-menu .ttl-wrap h2{
		color: var(--gray);
		line-height: 1;
	}
	#link-menu .box a{
		background: #fff;
		display: flex;
		align-items: stretch;
		position: relative;
		overflow: hidden;
	}
	#link-menu .box .txt-wrap{
		flex: 1;
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
	}
	/* 画像 */
	#link-menu .box .image{
		height: 100%;
		position: relative;
	}
	#link-menu .box .image img{
		object-fit: cover;
	}
	/* やじるし */
	#link-menu .box .anime-arrow-scroll{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		height: auto;
		z-index: 4;
	}
	#link-menu .box .arrow-default,
	#link-menu .box .arrow-hover{
		position: absolute;
		bottom: 0;
		left: 0;
		transition: opacity 0.4s ease, transform 0.4s ease;
	}
	#link-menu .box .arrow-default {
		opacity: 1;
		z-index: 1;
	}

/* PC */
@media screen and (min-width:768px) {
	#link-menu .inner{
		padding-bottom: 300px;
	}
	#link-menu .wrapper {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(9, 340px);
		gap: 0;
	}
	/* グリットレイアウト */
	#link-menu .box.individual { grid-area: 1 / 1 / 2 / 3; }
	#link-menu .ttl-wrap.service { grid-area: 1 / 3 / 2 / 4; }
	#link-menu .none.row02{ grid-area: 2 / 1 / 3 / 2; }
	#link-menu .box.corporate{ grid-area: 2 / 2 / 3 / 4; }
	#link-menu .box.afterservice{ grid-area: 2 / 2 / 3 / 4; }
	#link-menu .ttl-wrap.showroom { grid-area: 3 / 1 / 4 / 2; }
	#link-menu .box.rent { grid-area: 3 / 2 / 5 / 3; }
	#link-menu .none.row03 { grid-area: 3 / 3 / 4 / 4; }
	#link-menu .box.residence { grid-area: 4 / 1 / 6 / 2; }
	#link-menu .ttl-wrap.works { grid-area: 4 / 3 / 5 / 4; }
	#link-menu .box.model-house { grid-area: 5 / 2 / 6 / 4; }
	#link-menu .box.interview { grid-area: 6 / 1 / 7 / 3; }
	#link-menu .none.row06 { grid-area: 6 / 3 / 7 / 4; }
	#link-menu .ttl-wrap.recruit3 { grid-area: 7 / 1 / 8 / 2; }
	#link-menu .box.flow { grid-area: 7 / 2 / 8 / 4; }
	#link-menu .box.partner { grid-area: 8 / 1 / 10 / 2; }
	#link-menu .ttl-wrap.company { grid-area: 8 / 2 / 9 / 3; }
	#link-menu .ttl-wrap.planning { grid-area: 8 / 3 / 9 / 4; }
	#link-menu .box.about { grid-area: 9 / 2 / 10 / 4; }

	/* リンクボックス */
	#link-menu .box a{
		height: 320px;
	}
	/* ===== 左386px：不透明の塗りつぶしレイヤー ===== */
	#link-menu .box a::before {
		content: "";
		position: absolute;
		top: 0;
		left: -100%; /* 左からスライド */
		width: 386px;
		height: 100%;
		background-color: #88694F;
		z-index: 3;
		transition: left 0.2s ease;
		pointer-events: none;
	}

	/* ===== 残り部分：乗算レイヤー ===== */
	#link-menu .box a::after {
		content: "";
		position: absolute;
		top: 0;
		left: -100%; /* 同時にスライドさせる */
		width: 100%;
		height: 100%;
		background-color: #88694F;
		mix-blend-mode: multiply;
		z-index: 2;
		transition: left 0.6s ease;
		pointer-events: none;
	}

	/* ===== Hoverで一緒にスライドイン ===== */
	#link-menu .box a:hover::before,
	#link-menu .box a:hover::after {
		left: 0;
	}

	#link-menu .box .txt-wrap{
		padding-left: 90px;
		justify-content: center;
	}
	#link-menu .box .txt-wrap h3{
		font-size: 28px;
		line-height: 1.4;
		font-weight: 600;
		margin-bottom: 22px;
		letter-spacing: .1em;
	}
	#link-menu .box .txt-wrap .txt{
		line-height: 2;
		letter-spacing: .2em;
	}

	/* 画像 */
	#link-menu .box .image{
		width: 400px;
	}
	#link-menu .box .image .image-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transform: translateX(-20px);
		transition: opacity 0.4s ease, transform 0.4s ease;
		pointer-events: none;
		z-index: 5;
	}
	#link-menu .box a:hover .image-overlay {
		opacity: 1;
		transform: translateY(0);
	}
	#link-menu .box .image .image-overlay .en{
		font-size: 24px;
		font-weight: bold;
		letter-spacing: .08em;
		line-height: 1.583;
		margin-bottom: 10px;
	}
	#link-menu .box .image .image-overlay .en-txt{
		font-size: 12px;
		letter-spacing: .08em;
	}

	/* やじるし */
	#link-menu .box .anime-arrow-scroll{
		width: 150px;
	}
	#link-menu .box .arrow-hover {
		opacity: 0;
		transform: translateX(-50px); /* 左にオフセット */
		z-index: 2;
	}

	/* タイトル */
	#link-menu .ttl-wrap{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	#link-menu .ttl-wrap h2{
		font-size: 30px;
		margin-bottom: 6px;
	}
	#link-menu .ttl-wrap .sub{
		font-size: 10px;
	}

}

/* SP */
@media screen and (max-width:767px) {
	#link-menu .inner{
		padding: 0 6.67vw 10.67vw;
	}
	#link-menu .wrapper {
		display: flex;
		flex-direction: column;
	}
	/* グリットレイアウト */
	#link-menu .box.individual { order: 2; }
	#link-menu .ttl-wrap.service { order: 1; }
	#link-menu .none.row02{ display: none; }
	#link-menu .box.corporate{ order: 3; }
	#link-menu .box.afterservice{ order: 3; }
	#link-menu .ttl-wrap.showroom { order: 5; }
	#link-menu .box.rent { order: 4; }
	#link-menu .none.row03 { display: none; }
	#link-menu .box.residence { order: 6; }
	#link-menu .ttl-wrap.works { order: 7; }
	#link-menu .box.model-house { order: 8; }
	#link-menu .box.interview { order: 9; }
	#link-menu .none.row06 { display: none; }
	#link-menu .ttl-wrap.recruit { order: 14; }
	#link-menu .box.flow { order: 11; }
	#link-menu .box.partner { order: 15; }
	#link-menu .ttl-wrap.company { order: 12; }
	#link-menu .ttl-wrap.planning { order: 10; }
	#link-menu .box.about { order: 13; }

	/* リンクボックス */
	#link-menu .box a{
		height: 34.13vw;
		margin-bottom: 1.33vw;
	}
	#link-menu .box .txt-wrap{
		padding: 0 3vw 5.33vw 5.33vw;
		justify-content: end;
	}
	#link-menu .box .txt-wrap h3{
		font-size: 3.73vw;
		line-height: 1.5;
		font-weight: 600;
		margin-bottom: 2.67vw;
		letter-spacing: .11em;
	}
	#link-menu .box .txt-wrap .txt{
		line-height: 1.7;
		letter-spacing: .2em;
		font-size: 2.67vw;
	}

	/* 画像 */
	#link-menu .box .image{
		width: 44.53vw;
	}
	#link-menu .box .image .image-overlay {
		display: none;
	}
	#link-menu .box .image .image-overlay .en-txt{
		font-size: 12px;
		letter-spacing: .08em;
	}

	/* やじるし */
	#link-menu .box .anime-arrow-scroll{
		width: 16vw;
	}
	#link-menu .box .arrow-hover{
		display: none;
	}

	/* タイトル */
	#link-menu .ttl-wrap{
		text-align: center;
		margin: 8vw 0 2.67vw;
	}
	#link-menu .ttl-wrap h2{
		font-size: 6.4vw;
		margin-bottom: 1.33vw;
	}
	#link-menu .ttl-wrap .sub{
		font-size: 3.2vw;
		line-height: 1;
	}
}


/*------------------------
メニュー 個別調整
------------------------*/
/* 非公開対応 */
#link-menu .box.rent a{
	pointer-events: none;
}
#link-menu .box.rent a .coming{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	font-weight: 500;
	color: #fff;
	z-index: 100;
}
/* PC */
@media screen and (min-width:768px) {

	/* 非公開対応 */
	#link-menu .box.rent a::after{
		bottom: 0 !important;
		left: 0 !important;
	}
	#link-menu .box.rent a .coming{
		font-size: 30px;
	}
	/* 縦 */
	#link-menu .box.tate a{
		flex-direction: column-reverse;
		height: 100%;
	}
	#link-menu .box.tate a::before{
		width: 100%;
		height: 320px;
		bottom: -100%;
		top: auto;
		transition: bottom 0.2s ease;
	}
	#link-menu .box.tate a::after{
		bottom: -100%;
		left: 0;
		top: auto;
		transition: bottom 0.6s ease;
	}
	#link-menu .box.tate a:hover:before,
	#link-menu .box.tate a:hover:after{
		bottom: 0;
	}
	#link-menu .box.tate .image{
		height: 320px;
		width: auto;
	}
	#link-menu .box.tate .anime-arrow-scroll{
		transform: rotate(-90deg);
		top: -90px;
		right: 305px;
		left: auto;
	}

	/* 賃貸住宅 */
	#link-menu .box.rent a::before{
		background-color: #978C86;
	}
	#link-menu .box.rent a::after{
		background-color: #978C86;
	}

	/* 住まいのショールーム */
	#link-menu .box.residence a{
		width: 380px;
		background: #696469;
		color: #fff;
	}
	#link-menu .box.residence a::before{
		background-color: #231815;
	}
	#link-menu .box.residence a::after{
		background-color: #231815;
	}

	/* 街なかモデルハウス */
	#link-menu .box.model-house a{
		margin-top: 20px;
		flex-direction: row-reverse;
		background: #A5A2A5;
		color: #fff;
	}
	#link-menu .box.model-house a::before{
		background-color: #4A566F;
		left: auto;
		right: -100%;
		transition: right 0.2s ease;
		width: 400px;
	}
	#link-menu .box.model-house a::after{
		background-color: #4A566F;
		left: auto;
		right: -100%;
		transition: right 0.6s ease;
	}
	#link-menu .box.model-house a:hover::before,
	#link-menu .box.model-house a:hover:after{
		right: 0;
	}
	#link-menu .box.model-house .anime-arrow-scroll{
		transform: rotateY(180deg);
	}
	#link-menu .box.model-house .image .image-overlay{
		transform: translateX(20px);
	}
	#link-menu .box.model-house a:hover .image .image-overlay{
		transform: translateX(0);
	}


	/* 社員の熱き想い */
	#link-menu .box.interview a{
		margin-top: 20px;
		flex-direction: row-reverse;
		background: #A5A2A5;
		color: #fff;
		height: 300px;
	}
	#link-menu .box.interview a::before{
		background-color: #4A566F;
		left: auto;
		right: -100%;
		transition: right 0.2s ease;
		width: 400px;
	}
	#link-menu .box.interview a::after{
		background-color: #4A566F;
		left: auto;
		right: -100%;
		transition: right 0.6s ease;
	}
	#link-menu .box.interview a:hover::before,
	#link-menu .box.interview a:hover:after{
		right: 0;
	}
	#link-menu .box.interview .anime-arrow-scroll{
		transform: rotateY(180deg);
	}
	#link-menu .box.interview .image .image-overlay{
		transform: translateX(20px);
	}
	#link-menu .box.interview a:hover .image .image-overlay{
		transform: translateX(0);
	}

	/* 家づくりの流れ */
	#link-menu .box.flow a::before{
		background-color: #8B5769;
	}
	#link-menu .box.flow a::after{
		background-color: #8B5769;
	}

	/* 未来を築くパートナーへ */
	#link-menu .box.partner a{
		width: 380px;
	}
	#link-menu .box.partner a::before{
		background-color: #8B5769;
	}
	#link-menu .box.partner a::after{
		background-color: #8B5769;
	}

	/* イトーピアホームついて */
	#link-menu .box.about a{
		margin-top: 20px;
		flex-direction: row-reverse;
		background: #696469;
		color: #fff;
	}
	#link-menu .box.about a::before{
		background-color: #231815;
		left: auto;
		right: -100%;
		transition: right 0.2s ease;
	}
	#link-menu .box.about a::after{
		background-color: #231815;
		left: auto;
		right: -100%;
		transition: right 0.6s ease;
	}
	#link-menu .box.about a:hover:after,
	#link-menu .box.about a:hover::before{
		right: 0;
	}
	#link-menu .box.about .anime-arrow-scroll{
		transform: rotateY(180deg);
	}
	#link-menu .box.about .image .image-overlay{
		transform: translateX(20px);
	}
	#link-menu .box.about a:hover .image .image-overlay{
		transform: translateX(0);
	}

}

/* SP */
@media screen and (max-width:767px) {
	/* 非公開対応 */
	#link-menu .box.rent a::after {
		background-color: #978C86;
	}
	#link-menu .box.rent a::after{
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		mix-blend-mode: multiply;
	}
	#link-menu .box.rent a .coming{
		font-size: 5.33vw;
	}

	/* 住まいのショールーム */
	#link-menu .box.residence a{
		background: #696469;
		color: #fff;
		flex-direction: row-reverse;
	}
	#link-menu .box.residence .txt-wrap {
		padding: 0 6.67vw 3.33vw 4vw;
	}
	#link-menu .box.residence h3,
	#link-menu .box.residence .txt-wrap .txt{
		text-align: right;
	}
	#link-menu .box.residence .anime-arrow-scroll{
		transform: rotateY(180deg);
	}

	/* 街なかモデルハウス */
	#link-menu .box.model-house a{
		background: #A5A2A5;
		color: #fff;
	}
	#link-menu .box.model-house .txt-wrap{
		padding: 0 4vw 3.33vw 6.67vw;
	}


	/* 社員の熱き想い */
	#link-menu .box.interview a{
		background: #A5A2A5;
		color: #fff;
	}
	#link-menu .box.interview .txt-wrap .txt{
		letter-spacing: 0.08em;
	}

	/* 家づくりの流れ */
	#link-menu .box.flow a{
		flex-direction: row-reverse;
	}
	#link-menu .box.flow .txt-wrap{
		padding: 0 4.67vw 3.33vw 4vw;
	}
	#link-menu .box.flow h3,
	#link-menu .box.flow .txt-wrap .txt{
		text-align: right;
	}
	#link-menu .box.flow .txt-wrap .txt{
		letter-spacing: .14em;
	}
	#link-menu .box.flow .anime-arrow-scroll{
		transform: rotateY(180deg);
	}

	/* 未来を築くパートナーへ */
	#link-menu .box.partner a{
		flex-direction: row-reverse;
	}
	#link-menu .box.partner .txt-wrap{
		padding: 0 6.67vw 3.33vw 4vw;
	}
	#link-menu .box.partner h3,
	#link-menu .box.partner .txt-wrap .txt{
		text-align: right;
	}
	#link-menu .box.partner .anime-arrow-scroll{
		transform: rotateY(180deg);
	}
	#link-menu .box.partner .txt-wrap .txt{
		letter-spacing: .14em;
	}

	/* イトーピアホームついて */
	#link-menu .box.about a{
		background: #696469;
		color: #fff;
	}
	#link-menu .box.about .txt-wrap{
		padding: 0 4vw 3.33vw 6.67vw;
	}
}



/*------------------------
矢印　個別指定
------------------------*/
/* PC */
@media screen and (min-width:768px) {
	/* ------- 共通の初期状態 ------- */
	#link-menu .ttl-wrap{
		position:relative;
	}
	#link-menu .ttl-wrap h2{
		position: relative;
	}
	#link-menu .ttl-wrap::before,
	#link-menu .ttl-wrap h2::before,
	#link-menu .ttl-wrap::after,
	#link-menu .ttl-wrap .sub::before{
		/* ← 3 本とも “縮んだまま” で待機 */
		transform-origin:right center;
		opacity:1;               /* 透過を入れたい場合は 0 に */
	}
	/* 左→右の水平ライン */
	#link-menu .ttl-wrap::before{
		content:"";
		position:absolute;
		top:50%;
		left:10px;
		width:calc(50% - 90px);
		height:.5px;
		background:var(--black);
		transform:translateY(-50%) scaleX(0);   /* ← 0 で畳んでおく */
	}

	/* 矢印ヘッド（＼）*/
	#link-menu .ttl-wrap h2::before{
		content:"";
		position:absolute;
		top:110%;
		left: -123px;
		width:12px;
		height:12px;
		border-left:1px solid var(--black);
		transform:translateY(-50%) rotate(45deg) scale(0); /* ← 縮小 */
		transform-origin:100% 0;
	}

	/* 下方向の縦ライン */
	#link-menu .ttl-wrap::after{
		content:"";
		position:absolute;
		left:50%;
		top:calc(57% + 12px);
		width:1px;
		height: 620px;
		background:var(--black);
		transform:translateX(-50%) scaleY(0);   /* ← 0 で畳んでおく */
		transform-origin:top center;
	}

	/* ------- アニメ開始トリガー ------- */
	#link-menu .ttl-wrap.line-start::before       {animation:line-h 1s .2s forwards ease-out;}
	#link-menu .ttl-wrap.line-start h2::before    {animation:arrow 1s .8s forwards ease-out;}
	#link-menu .ttl-wrap.line-start::after        {
		animation:line-v 1s .4s forwards ease-out;
		-webkit-animation: line-v 1s .4s forwards ease-out;
	}

	/* ショールーム */
	/* 採用情報 */
	/* 企業情報 */
	#link-menu .ttl-wrap.showroom::before,
	#link-menu .ttl-wrap.recruit::before,
	#link-menu .ttl-wrap.company::before{
		content: none;
	}
	#link-menu .ttl-wrap.showroom::after,
	#link-menu .ttl-wrap.recruit::after,
	#link-menu .ttl-wrap.company::after{
		height: 120px;
	}
	#link-menu .ttl-wrap.company::after{
		height: 140px;
	}
	#link-menu .ttl-wrap.showroom h2::before,
	#link-menu .ttl-wrap.recruit h2::before,
	#link-menu .ttl-wrap.company h2::before{
		content:"";
		position:absolute;
		top:170px;
		left:-10px;
		width:12px;
		height:12px;
		border-left:1px solid var(--black);
		transform:translateY(-50%) rotate(-45deg) scale(0);
		opacity:0;                          /* 透明にしておくと確実 */
		transform-origin:100% 0;
	}
	#link-menu .ttl-wrap.showroom h2::before{
		left: 84px;
	}
	#link-menu .ttl-wrap.recruit h2::before{
		left: 53px;
	}
	#link-menu .ttl-wrap.company h2::before{
		left: 66px;
		top: 190px;
	}
	#link-menu .ttl-wrap.showroom.line-start h2::before,
	#link-menu .ttl-wrap.recruit.line-start h2::before,
	#link-menu .ttl-wrap.company.line-start h2::before {
		animation:arrow_left 1s .8s forwards ease-out;
	}

	/* 家づくり */
	#link-menu .ttl-wrap.planning::before{
		content: none;
	}
	#link-menu .ttl-wrap.planning::after{
		top: calc(-6% + 12px);
		height: 145px;
	}
	#link-menu .ttl-wrap.planning h2::before {
		content: "";
		position: absolute;
		top: -155px;
		left: 78px;
		width: 12px;
		height: 12px;
		border-left: 1px solid var(--black);
		transform: translateY(-50%) rotate(135deg) scale(0);
		transform-origin: 100% 0;
	}
	#link-menu .ttl-wrap.planning.line-start h2::before {
		animation: arrow_left 1s .8s forwards ease-out;
	}

	/* 建築事例 */
	#link-menu .ttl-wrap.works::before{
		content: none;
	}
	#link-menu .ttl-wrap.works h2::before{
		top: 692px;
	}
	/* ===== ベース ===== */
	#link-menu .ttl-wrap.works{
		position:relative;
		text-align:center;
	}
	/* ========== ① 縦ライン ︙down ========= */
	#link-menu .ttl-wrap.works::after{
		content: "";
		position: absolute;
		top: calc(58% + 10px);
		left: 50%;
		width: 1px;
		height: 620px;
		background: var(--black, #777);
		transform: translateX(-50%) scaleY(0);
		transform-origin: top center;
	}
	/* ========== ② 横ライン ︙left ========= */
	#link-menu .ttl-wrap.works::before{
		content: "";
		position: absolute;
		top: calc(598px + 10px + 220px);
		left: 110px;
		width: 180px;
		height: 1px;
		background: var(--black, #777);
		transform: translateX(-50%) scaleX(0);
		transform-origin: right center;            /* 右端(折れ点)から伸びる */
	}
	/* ===== 発火用クラス (.line-start) ===== */
	#link-menu .ttl-wrap.works.line-start::after{
		animation:lineDown 2s ease-out forwards;
		-webkit-animation:lineDown 2s ease-out forwards;
	}
	#link-menu .ttl-wrap.works.line-start::before{
		animation:lineLeft 1s 2s ease-out forwards;
	}
	#link-menu .ttl-wrap.works.line-start h2::before {
		animation: arrow 1s 3s forwards ease-out;
	}

	/* 事業紹介 */
	/* ===== ベース ===== */
	#link-menu .ttl-wrap.service{
		position:relative;
		text-align:center;
	}
	/* ========== ① 縦ライン ︙down ========= */
	#link-menu .ttl-wrap.service::after{
		content: "";
		position: absolute;
		top: calc(58% + 10px);
		left: 50%;
		width: 1px;
		height: 620px;
		background: var(--black, #777);
		transform: translateX(-50%) scaleY(0);
		transform-origin: top center;
	}
	/* ========== ② 横ライン ︙left ========= */
	#link-menu .ttl-wrap.service h2::after{
		content: "";
		position: absolute;
		top: calc(454px + 10px + 220px);
		left: -25px;
		width: 180px;
		height: 1px;
		background: var(--black, #777);
		transform: translateX(-50%) scaleX(0);
		transform-origin: right center;        /* 右端(折れ点)から伸びる */
	}
	/* ===== 発火用クラス (.line-start) ===== */
	#link-menu .ttl-wrap.service.line-start::after{
		animation:lineDown 2s ease-out forwards;
		-webkit-animation: lineDown 2s ease-out forwards;
	}
	#link-menu .ttl-wrap.service.line-start h2::after{
		animation:lineLeft 1s 2s ease-out forwards; /* 0.8s 遅らせて “折れ” を演出 */
	}
	#link-menu .ttl-wrap.service .sub::before{
		transform-origin:right center;
		opacity:1;               /* 透過を入れたい場合は 0 に */
	}
	#link-menu .ttl-wrap.service .sub::before {
		content: "";
		position: absolute;
		bottom: -507px;
		left: 25px;
		width: 12px;
		height: 12px;
		border-left: 1px solid var(--black);
		transform: translateY(-50%) rotate(45deg) scale(0);
		transform-origin: 100% 0;
	}
	#link-menu .ttl-wrap.service.line-start .sub::before{
		animation: arrow 1s 2.5s forwards ease-out;
	}
}

/* ------------- keyframes ------------- */
@keyframes line-h  { to{transform:translateY(-50%) scaleX(1);} }
@keyframes arrow   { to{transform:translateY(-50%) rotate(45deg) scale(1);} }
@keyframes arrow_left{
	0%{
	transform:translateY(-50%) rotate(-45deg) scale(0);
	opacity:0;
	}
	100%{
	transform:translateY(-50%) rotate(-45deg) scale(1);
	opacity:1;
	}
}
@keyframes line-v  { to{transform:translateX(-50%) scaleY(1);} }
@keyframes lineDown{to{transform:translateX(-50%) scaleY(1);}}
@keyframes lineLeft{to{transform:translateX(-50%) scaleX(1);}}
@-webkit-keyframes lineDown {
	100% {
		transform: translateX(-50%) scaleY(1);
	}
}

/* SP */
@media screen and (max-width:767px) {

}



/*------------------------

------------------------*/
/* PC */
@media screen and (min-width:768px) {

}

/* SP */
@media screen and (max-width:767px) {

}


@media screen and (max-width:767px) {
  #link .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4vw;
    padding: 8vw 0;
  }
  #link .box {
    width: 48vw;
    margin: 0;
  }
  #link .box.afterservice {
    width: 100vw;
    max-width: 80vw;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
}

@media screen and (max-width:767px) {
  #link .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4vw;
    padding: 8vw 0;
  }
  #link .group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 12vw;
    width: 100vw;
    max-width: 80vw;
    margin: 0 auto;
  }
  #link .afterservice-row {
    display: flex;
    justify-content: center;
    width: 100vw;
    max-width: 80vw;
  }
  #link .box {
    width: 48vw;
    margin: 0;
  }
  #link .box.afterservice {
    width: 100vw;
    max-width: 80vw;
    justify-content: center;
  }
}