/*------------------------
common変更
------------------------*/
section .ttl-wrap h2{
	text-align: center;
	font-weight: bold;
	color: var(--gray);
	line-height: 1;
}
section .ttl-wrap .sub {
	text-align: center;
}
#topimg .textarea{
	text-align: center;
	color: #fff;
}
/* PC */
@media screen and (min-width:768px) {
	header .right .link-wrap .tel,
	header .right .link-wrap .instagram a,
	header .right .menu#menu-btn p{
		color: #fff;
	}
	header .right #menu-btn div{
		background: #fff;
	}
	/* 共通 */
	section .ttl-wrap {
		margin-bottom: 30px;
	}
	section .ttl-wrap h2 {
		font-size: 30px;
		letter-spacing: .05em;
		margin-bottom: 5px;
	}
	section .ttl-wrap .sub {
		font-size: 10px;
		letter-spacing: .24em;
	}
}
/* SP */
@media screen and (max-width:767px) {
	#topimg .text-wrap{
		padding-top: 8vw;
	} 
	#topimg h1{
		width: 35.47vw;
		height: auto;
		margin: 0 auto 8vw;
	}
	#topimg .jp{        
		width: 66.67vw;
		margin: 0 auto 4vw;
	}
	#topimg .textarea{
		font-size: 3.2vw;
		line-height: 1.917;
		letter-spacing: 0.12em;
	}
	
	/* 共通 */
	section .ttl-wrap {
		margin-bottom: 5.33vw;
	}
	section .ttl-wrap h2 {
		font-size: 6.4vw;
		letter-spacing: .05em;
		margin-bottom: 1.33vw;
	}
	section .ttl-wrap .sub {
		font-size: 3.2vw;
		letter-spacing: .24em;
		line-height: 1;
	}
}


/*------------------------
特徴
------------------------*/
#feature h2{
	text-align: center;
	font-weight: bold;
}
.hex-box.num-box .text-wrap .num{
	font-weight: bold;
	line-height: 1;
}
.hex-box.num-box .text-wrap h4{
	line-height: 1;
	color: var(--blue);
	font-weight: 600;
}
.hexagon-text {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
}
.hex-box.main-ttl .hexagon-text h3{
	text-align: center;
	color: #fff;
	font-weight: 600;
}
.hex-box.num-box .hexagon-text{
	justify-content: space-between;
}
.hex-box.num-box .hexagon-text .en{
	font-weight: 600;
	position: absolute;
	letter-spacing: .08em;
}
/* PC */
@media screen and (min-width:768px) {
	#feature .inner{
		padding: 90px 0 120px;
		margin: 0 auto 30px;
	}
	#feature h2{
		font-size: 30px;
		letter-spacing: .08em;
		line-height: 1.833;
		margin-bottom: 60px;
	}

	/* ===== 六角形共通 ===== */
	#feature .hex-wrap{
		position: relative;
		display: flex;
		min-height: 1290px;
	}
	.hex-box {
		position: relative;
	}
	.hexagon-shadow img{
		position: absolute;
		top: 10px;
		left: 15px;
		object-fit: cover;
		z-index: 1;
	}
	.hexagon-main img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;           
		height: 100%;
		object-fit: contain;  
		z-index: 2; 
	}
	.hex-box.num-box{
		width: 514px;
		height: 692px;
	}
	.hex-box.num-box .hexagon-text .en{
		font-size: 12px;
	}
	.hex-box.num-box .text-wrap{
		width: 342px;
		margin: 0 0 0 auto;
		padding: 90px 40px 0;
		text-align: center;
	}
	.hex-box.num-box .text-wrap .num{
		font-size: 16px;
		margin-bottom: 22px;
	}
	.hex-box.num-box .text-wrap h4{
		font-size: 28px;
		margin-bottom: 30px;
	}
	.hex-box.num-box .text-wrap .textarea{
		text-align: center;
	}
	.hex-box.num-box .in-img{
		width: 293px;
		height: 338px;
		overflow: hidden;
		clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
		margin: 0 auto 28px 28px;
	}
	.hex-box.num-box .in-img img{
		object-fit: cover;
	}
	/* ===== イトーピアホームの特徵 ===== */
	.hex-box.main-ttl{
		width: 342px;
		height: 395px;
		margin-left: 170px;
	}
	.hex-box.main-ttl .hexagon-text{
		padding-top: 20px;
	}
	.hex-box.main-ttl .hexagon-text .logo{
		width: 162px;
		margin-bottom: 15px;
	}
	.hex-box.main-ttl .hexagon-text h3{
		font-size: 22px;
		line-height: 1.545;
		letter-spacing: .12em;
	}

}

/* SP */
@media screen and (max-width:767px) {
	.pc-in{
		display: none;
	}
	#feature .inner{
		padding: 10.67vw 0 13.33vw;
	}
	#feature h2{
		font-size: 3.73vw;
		letter-spacing: .1em;
		line-height: 1.786;
		margin-bottom: 8vw;
	}

	/* ===== 六角形共通 ===== */
	.hex-box {
		position: relative;
	}
	.hexagon-shadow{
		display: none;
	}
	.hexagon-main img{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.hex-box.num-box{
		width: 100%;
		height: 134.4vw;
	}
	.hex-box.num-box .hexagon-text .en{
		font-size: 2.4vw;
	}
	.hex-box.num-box .text-wrap{
		width: 48.53vw;
		margin: 0 9.33vw 0 auto;
		padding: 16vw 0 0;
		text-align: center;
	}
	.hex-box.num-box .text-wrap .num{
		font-size: 3.07vw;
		margin-bottom: 4.8vw;
	}
	.hex-box.num-box .text-wrap h4{
		font-size: 4.8vw;
		margin-bottom: 5.33vw;
	}
	.hex-box.num-box .text-wrap .textarea{
		text-align: center;
		font-size: 3.2vw;
	}
	.hex-box.num-box .in-img{
		width: 56.8vw;
		height: 65.6vw;
		overflow: hidden;
		clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
		margin: 0 auto 5.33vw 5.33vw;
	}
	.hex-box.num-box .in-img img{
		object-fit: cover;
	}
	/* ===== イトーピアホームの特徵 ===== */
	.hex-box.main-ttl{
		width: 66.67vw;
		height: 76.8vw;
	}
	.hex-box.main-ttl .hexagon-text{
		padding-top: 5.33vw;
	}
	.hex-box.main-ttl .hexagon-text .logo{
		display: none;
	}
	.hex-box.main-ttl .hexagon-text h3{
		font-size: 5.87vw;
		line-height: 1.5;
		letter-spacing: .18em;
	}
}


/*------------------------
商品コンセプトと取り組み 共通
------------------------*/
.section-block .block a {
	position: relative;
	overflow: hidden;
	color: #fff;                
}
.section-block .block .image img { object-fit: cover; }
/* PC */
@media screen and (min-width:768px) {
	.section-block .block-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.section-block .block .image .image-overlay {
		position: absolute;
		top: 0; 
		left: 0;
		width: 100%;                
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		pointer-events: none;
		z-index: 5;
		transition: opacity .4s ease, transform .4s ease;
	}
	.section-block .block a:hover .image .image-overlay {
		opacity: 1;
		transform: none;            
	}
}
/* SP */
@media screen and (max-width:767px) {
}


/*------------------------
商品コンセプト
------------------------*/
/* 非公開対応 */
#product .block.ib a,
#product .block.yoko a{
	pointer-events: none
}
#product .block.f3 a .coming,
#product .block.ib a .coming,
#product .block.yoko 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;
}

#product .block .txt-wrap { 
	display: flex; 
	flex-direction: 
	column; align-items: 
	center; justify-content: center; 
	position: relative; 
	z-index: 1; }
#product .block .txt-wrap h3 {   
	font-weight: 600;
	letter-spacing: .07em;
	line-height: 1; }

/* スクロール矢印 */
#product .block .anime-arrow-scroll {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: auto;
	height: auto;
	z-index: 4;
	top: 0px;
}
/* PC */
@media screen and (min-width:768px) {
	
	/* 非公開対応 */
	#product .block.ib a::after,
	#product .block.yoko a::after{
		bottom: 0 !important;
		left: 0 !important;
	}
	#product .block.f3 a .coming,
	#product .block.ib a .coming,
	#product .block.yoko a .coming{
		font-size: 30px;
	}
	#product { padding-bottom: 80px; }

	/* カード */
	#product .block a { width: 396px; background: #978C86; }

	/* ホバー演出（縦にスライド） */
	#product .block a::before,
	#product .block a::after {
		content: "";
		position: absolute;
		bottom: -100%;
		left: 0;
		width: 100%;
		pointer-events: none;
	}
	#product .block a::before {
		height: 313px;
		background: url(../../img/individual/product_img01_on.jpg) no-repeat center/cover;
		z-index: 3;
		transition: bottom .2s ease;
	}
	#product .block a::after {
		height: 100%;
		background-color: #978C86;
		mix-blend-mode: multiply;
		z-index: 2;
		transition: bottom .6s ease;
	}
	#product .block a:hover::before,
	#product .block a:hover::after { bottom: 0; }

	/* 画像オーバーレイ */
	#product .block .image { height: 335px; }
	#product .block .image .image-overlay { height: 335px; transform: translateY(20px); }
	#product .block .image .image-overlay .overlay-text { text-align: center; padding: 0 0 20px 140px; }
	#product .block .image .image-overlay .overlay-text .en      { font-size: 24px; font-weight: 700; letter-spacing: .08em; line-height: 1.58; margin-bottom: 10px; }
	#product .block .image .image-overlay .overlay-text .en-txt  { font-size: 12px; letter-spacing: .08em; }

	/* テキストエリア */
	#product .block .txt-wrap { height: 312px; }
	#product .block .txt-wrap .sub-ttl { font-size: 23px; margin-bottom: 10px; }
	#product .block .txt-wrap h3 {         
		font-size: 39px;
		margin-bottom: 20px;}
	#product .block .txt-wrap .txt     { font-size: 19px; letter-spacing: .1em; }

	/* スクロール矢印 */
	#product .block .anime-arrow-scroll {
		width: 150px;
		transform: rotate(-90deg);
		right: 248px;
	}
	#product .block .anime-arrow-scroll .arrow-default,
	#product .block .anime-arrow-scroll .arrow-hover{
		position: absolute;
		bottom: 0;
		left: 0;
		transition: opacity 0.4s ease, transform 0.4s ease;
	}
	#product .block .anime-arrow-scroll .arrow-default{
		opacity: 1;
		z-index: 1;
	}
	#product .block .anime-arrow-scroll .arrow-hover {
		opacity: 0;
		transform: translateX(-50px);
		z-index: 2;
	}

	/* --- バリエーション色 --- */
	#product .block.f3 a  { background: #464255; }
	#product .block.f3 a::before { background: url(../../img/individual/product_img02_on.jpg) no-repeat center/cover; }
	/*#product .block.f3 a::after  { background-color: #464255; }*/

	#product .block.ib a  { background: #674937; }
	#product .block.ib a::before { background: url(../../img/individual/product_img03_on.jpg) no-repeat center/cover; }
	#product .block.ib a::after  { background-color: #674937; }
}

/* SP */
@media screen and (max-width:767px) {
	/* 非公開対応 */

	#product .block.ib a::after{
		background-color: #674937;
	}
	#product .block.yoko a::after{
		background: #8A4255;
	}

	#product .block.ib a::after,
	#product .block.yoko a::after{
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		mix-blend-mode: multiply;
		z-index: 1;
	}
	#product .block.f3 a .coming,
	#product .block.ib a .coming,
	#product .block.yoko a .coming{
		font-size: 5.33vw;
	}


	#product .inner{
		padding: 0 6.67vw 10.67vw;
	}
	/* カード */
	#product .block:not(:last-child){
		margin-bottom: 1.33vw;
	}
	#product .block a { 
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		background: #978C86;
		height: 34.13vw;
	}
	/* 画像オーバーレイ */
	#product .block .image { width: 44.53vw; }

	/* テキストエリア */
	#product .block .txt-wrap{
		flex: 1;
	}
	#product .block .txt-wrap .sub-ttl { 
		font-size: 2.67vw;
		margin-bottom: 2.67vw;
		line-height: 1; }
	#product .block .txt-wrap h3 {         
		font-size: 4.8vw;
		margin-bottom: 1.33vw;}
	#product .block .txt-wrap .txt {         
		font-size: 2.67vw;
		letter-spacing: .1em;
		text-align: center;
	}

	/* スクロール矢印 */
	#product .block .anime-arrow-scroll {
		width: 16vw;
		right: 0;
	}
	#product .block .anime-arrow-scroll .arrow-hover{
		display: none;
	}
	#product .block .anime-arrow-scroll .arrow-default{
		position: absolute;
		bottom: 0;
		left: 0;
		transition: opacity 0.4s ease, transform 0.4s ease;
	}
	#product .block .anime-arrow-scroll .arrow-default{
		opacity: 1;
		z-index: 1;
	}

	/* --- バリエーション色 --- */
	#product .block.f3 a  { background: #464255; }

	#product .block.ib a  { background: #674937; }
}

/*------------------------
取り組み
------------------------*/
/* カード */
#initiatives .block a {
	background: #fff;
	color: var(--black);
	display: flex;
}
#initiatives .block .txt-wrap{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	flex: 1;
}
#initiatives .block .txt-wrap h3{
	font-weight: bold;
	letter-spacing: .07em;
	text-align: center;
	line-height: 1.3;
}

/* スクロール矢印 */
#initiatives .block .anime-arrow-scroll {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: auto;
	height: auto;
	z-index: 4;
	top: 0px;
}
/* PC */
@media screen and (min-width:768px) {
	#initiatives { padding-bottom: 300px; }

	/* カード */
	#initiatives .block a {
		width: 595px;
		height: 250px;
		margin-bottom: 10px;
	}

	/* ホバー演出（横にスライド） */
	#initiatives .block a::before,
	#initiatives .block a::after {
		content: "";
		position: absolute;
		right: -100%;
		top: auto;
		pointer-events: none;
	}
	#initiatives .block a::before {
		width: 298px;
		height: 100%;
		background: var(--gray);
		z-index: 3;
		transition: right .2s ease;
	}
	#initiatives .block a::after {
		bottom: 0;
		width: 100%;
		height: 100%;
		background: var(--gray);
		mix-blend-mode: multiply;
		z-index: 2;
		transition: right .6s ease;
	}
	#initiatives .block a:hover::before,
	#initiatives .block a:hover::after { right: 0; }

	/* 画像オーバーレイ */
	#initiatives .block .image { width: 298px; height: 100%; }
	#initiatives .block .image .image-overlay { width: 300px; height: 100%; transform: translateX(20px); }
	#initiatives .block .image .image-overlay .overlay-text { text-align: center; }
	#initiatives .block .image .image-overlay .overlay-text .en     { font-size: 24px; font-weight: 700; letter-spacing: .08em; line-height: 1.58; margin-bottom: 10px; }
	#initiatives .block .image .image-overlay .overlay-text .en-txt { font-size: 12px; letter-spacing: .08em; }

	/* テキストエリア */
	#initiatives .block .txt-wrap .sub-ttl { 
		font-size: 18px;
		margin-bottom: 5px;
		font-weight: 600;
		letter-spacing: .07em; }
	#initiatives .block .txt-wrap h3{         
		font-size: 30px;
		margin-bottom: 10px;}
	#initiatives .block .txt-wrap .txt     { font-size: 16px; letter-spacing: .1em; }

	/* スクロール矢印 */
	#initiatives .block .anime-arrow-scroll {
		width: 120px;
		transform: rotateY(180deg);
		right: 245px;
		left: auto;
	}
	#initiatives .block .anime-arrow-scroll .arrow-default,
	#initiatives .block .anime-arrow-scroll .arrow-hover{
		position: absolute;
		bottom: 0;
		left: 0;
		transition: opacity 0.4s ease, transform 0.4s ease;
	}
	#initiatives .block .anime-arrow-scroll .arrow-default{
		opacity: 1;
		z-index: 1;
	}
	#initiatives .block .anime-arrow-scroll .arrow-hover {
		opacity: 0;
		transform: translateX(-50px);
		z-index: 2;
	}

	/* ====== 2列目変更 ====== */
	#initiatives .block:nth-child(4n-1) a,
	#initiatives .block:nth-child(4n) a{
		flex-direction: row-reverse;
	}
	#initiatives .block:nth-child(4n-1) a::before,
	#initiatives .block:nth-child(4n) a::before{
		left: -100%;
		right: 0;
		transition: left .2s ease;
	}
	#initiatives .block:nth-child(4n-1) a::after,
	#initiatives .block:nth-child(4n) a::after{
		transition: left .6s ease;
		right: auto;
		left: -100%;
	}
	#initiatives .block:nth-child(4n-1) a:hover::before,
	#initiatives .block:nth-child(4n) a:hover::before,
	#initiatives .block:nth-child(4n-1) a:hover:after,
	#initiatives .block:nth-child(4n) a:hover::after{
		left: 0;
	}
	#initiatives .block:nth-child(4n-1) .anime-arrow-scroll,
	#initiatives .block:nth-child(4n) .anime-arrow-scroll{
		transform: none;
	}
	#initiatives .block:nth-child(4n-1) .image .image-overlay,
	#initiatives .block:nth-child(4n) .image .image-overlay{
		right: 0;
		left: auto;
	}

	/* ====== その他リンク ====== */
	#initiatives .other-link{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#initiatives .other-link li a{
		width: 595px;
		height: 60px;
		display: flex;
		align-items: center;
		font-size: 26px;
		font-weight: 600;
		display: inline-block;
		position: relative;
		overflow: hidden;
		background: #fff;
		margin-bottom: 5px;
	}
	#initiatives .other-link li:nth-child(3) a{
		width: 1200px;
	}
	#initiatives .other-link li a span{
		padding: 0 25px;
	}
	#initiatives .text-default,
	#initiatives .text-hover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		white-space: nowrap;
		transition: transform 0.5s ease;
	}
	#initiatives .text-default {
		z-index: 1;
		transform: translateX(0);
	}
	#initiatives .text-hover {
		z-index: 2;
		background: var(--gray);
		transform: translateX(-100%);
		color: #fff;
		font-size: 22px;
	}
	/* hoverでスライド */
	#initiatives .other-link li a:hover .text-hover {
		transform: translateX(0);
	}
}

/* SP */
@media screen and (max-width:767px) {
	#initiatives .inner{
		padding: 0 6.67vw 10.67vw;
	}
	/* カード */
	#initiatives .block{
		margin-bottom: 1.33vw;
	}
	#initiatives .block a {
		justify-content: space-between;
		height: 34.13vw;
	}

	/* 画像オーバーレイ */
	#initiatives .block .image { width: 44.53vw; }
	/* テキストエリア */
	#initiatives .block .txt-wrap { 
		flex: 1;
	}
	#initiatives .block .txt-wrap .sub-ttl { 
		font-size: 3.2vw;
		margin-bottom: 1.33vw;
		line-height: 1;
	}
	#initiatives .block .txt-wrap h3{         
		font-size: 4.8vw;
		margin-bottom: 1.33vw;
	}
	#initiatives .block .txt-wrap .txt     {
		font-size: 2.67vw;
		letter-spacing: .1em; }

	/* スクロール矢印 */
	#initiatives .block .anime-arrow-scroll {
		width: 16vw;
		right: 0;
		transform: rotateY(180deg);
	}
	#initiatives .block .anime-arrow-scroll .arrow-hover{

		display: none;
	}
	#initiatives .block .anime-arrow-scroll .arrow-default{
		position: absolute;
		bottom: 0;
		left: 0;
		transition: opacity 0.4s ease, transform 0.4s ease;
	}
	#initiatives .block .anime-arrow-scroll .arrow-default{
		opacity: 1;
		z-index: 1;
	}


	/* ====== その他リンク ====== */
	#initiatives .other-link{
	}
	#initiatives .other-link li a{
		width: 100%;
		height: 9.33vw;
		font-size: 4.8vw;
		font-weight: 600;
		position: relative;
		background: #fff;
		margin-bottom: 1.33vw;
	}
	#initiatives .other-link li a span{
		padding: 0 2.67vw;
	}
	#initiatives .text-hover{
		display: none;
	}
	#initiatives .text-default{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		white-space: nowrap;
		transition: transform 0.5s ease;
	}
	#initiatives .text-default {
		z-index: 1;
		transform: translateX(0);
	}
}