@charset "UTF-8";

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

/* PC */
@media screen and (min-width:768px) {
	.top-bg{
		background: #fff url(../img/company/topimg.jpg?20250630) no-repeat center;
		background-size: cover;
		min-height: 770px;
	}
	#topimg .inner{
		width: 1200px;
		margin: 0 auto;
	}
	#topimg .text-wrap{
		width: 510px;
		margin: 108px 0 0 auto;
	} 
	#topimg .en{
		height: auto;
		width: 528px;
		margin: 0 auto 20px -45px;
	}
	#topimg .sub{
		width: 276px;
		margin-bottom: 65px;
	}
	#topimg .jp{
		width: 168px;
		margin-bottom: 30px;
	}
	#topimg .textarea{
		font-size: 16px;
		line-height: 2.125;
		color: #fff;
	}
}
/* SP */
@media screen and (max-width:767px) {
	#topimg{
		background: url(../img/company/sp_topimg.jpg?20250630) no-repeat center;
		background-size: cover;
		min-height: 161.6vw;
	}
	#topimg .text-wrap{
		padding-top: 8vw;
	} 
	#topimg .en{
		height: auto;
		width: 80vw;
		margin: 0 0 4vw -4vw;
	}
	#topimg .sub{
		width: 48vw;
		margin-bottom: 5.33vw;
	}
	#topimg .jp{
		width: 32vw;
		margin-bottom: 4vw;
	}
	#topimg .textarea{
		color: #fff;
		font-size: 3.2vw;
		line-height: 1.917;
		letter-spacing: 0.12em;
	}
}

/*------------------------
タイトル
------------------------*/
#main-catch .inner{
	text-align: center;
}
#main-catch h2 {
	font-weight: 600;
}
#main-catch .text{
	letter-spacing: .09em;

}
/* PC */
@media screen and (min-width:768px) {
	#main-catch .inner{
		padding: 90px 0 0;
	}
	#main-catch h2 {
		font-size: 30px;
		margin-bottom: 30px;
	}
	#main-catch .text {
		line-height: 2.214;
	}
}

/* SP */
@media screen and (max-width:767px) {
	#main-catch .inner{
		padding: 10.67vw 6.67vw 13.33vw;
	}
	#main-catch h2 {
		font-size: 4vw;
		letter-spacing: .08em;
		margin-bottom: 3.33vw;
	}
	#main-catch .text {
		font-size: 3.2vw;
		line-height: 1.8;
	}
}


/*------------------------
共通
------------------------*/
	.section-block .ttl-wrap {
		text-align: center;
		transition: all .3s ease 0s;
		position: relative;
	}

.section-block .ttl-wrap h2 {
	color: var(--gray);
	letter-spacing: .05em;
}
.section-block .cont h3 {
	text-align: center;
	font-weight: 600;
	color: var(--blue);
}

/* PC */
@media screen and (min-width:768px) {
	.section-block .ttl-wrap::before{
		content: "";
		position: absolute;
		background: var(--black);
		transform: scaleX(0);
		animation: line-h 1s .6s forwards ease-out;
		transform-origin: right center;
		opacity: 1;
	}
	.section-block .ttl-wrap::after{
		content: "";
		position: absolute;
		border-left: 1px solid var(--black);
		transform: rotate(-135deg) scale(0);
		transform-origin: left top;
		animation: arrow 1s 1.2s forwards ease-out;
	}
	.section-block .ttl-wrap h2 {
		font-size: 30px;
		line-height: 1.167;
	}
	.section-block .ttl-wrap .sub {
		font-size: 10px;
	}
}

@keyframes line-h { to { transform: scaleX(1); } }
@keyframes arrow  { to { transform: rotate(-135deg) scale(1); } }
@keyframes arrow02  { to { transform: rotate(-45deg) scale(1); } }

/* SP */
@media screen and (max-width:767px) {
	.section-block .inner{
		padding: 10.67vw 6.67vw;
	}
	.section-block .ttl-wrap{
		margin-bottom: 5.33vw;
	}
	.section-block .ttl-wrap h2 {
		font-size: 6.4vw;
		letter-spacing: .05em;
		margin-bottom: 1.33vw;
		line-height: 1;
	}
	.section-block .ttl-wrap .sub {
		font-size: 3.2vw;
		letter-spacing: .24em;
		line-height: 1;
	}
	.section-block .cont .flex-box{
		flex-direction: column;
	}
}

/*------------------------
会社概要
------------------------*/
#profile .cont .image-wrap .image img{
	object-fit: cover;
}
#profile .cont .image-wrap .txt {
	color: #fff;
}
#profile .cont .text-wrap table {
	color: #fff;
}
#profile .cont .text-wrap table th,
#profile .cont .text-wrap table td{
	vertical-align: baseline;
}
#profile .cont .text-wrap table th {
	text-align-last: justify;
}
#profile .cont .text-wrap table td {
	position: relative;
	display: flex;
}
#profile .cont .text-wrap table td::before{
	content: "／";
}
/* PC */
@media screen and (min-width:768px) {
	#profile .inner{
		padding: 310px 0 0px;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		position: relative;
		transition: all .3s ease 0s;
	}
	#profile .inner::before{
		content: "";
		width: 1130px;
		height: 1300px;
		background: url(../img/company/hexagon_gray_b.svg) no-repeat;
		background-size: contain;
		position: absolute;
		z-index: -1;
		left: -200px;
		top: 0;
		transition: all .3s ease 0s;
	}
	#profile .ttl-wrap {
		padding: 310px 0 0 0;
		margin-right: -25px;
	}
	#profile .ttl-wrap::before{
		top: 350px;
		left: -100px;
		width: 90px;
		height: .5px;
	}
	#profile .ttl-wrap::after{
		top: 350px;
		left: -100px;
		width: 12px;
		height: 12px;
	}
		
	/* ← ★追加★  .scrollin が付くまでは停止 */
	#profile:not(.scrollin) .inner .ttl-wrap::before,
	#profile:not(.scrollin) .inner .ttl-wrap::after{
	animation-play-state:paused;
	}
	#profile .cont {
		width: 775px;
		letter-spacing: 0;
	}
	#profile .cont .image-wrap {
		margin-right: 50px;
	}
	#profile .cont .image-wrap .image {
		width: 190px;
		height: 140px;
	}
	#profile .cont .image-wrap .txt {
		margin-bottom: 40px;
		padding-top: 5px;
	}
	#profile .cont .text-wrap table th {
		width: 75px;
	}
	#profile .cont .text-wrap table td::before{
		padding: 0 10px;
	}
}

@media screen and (max-width:1270px) {
	#profile .ttl-wrap {
		margin-right: 0;
	}
}
/* SP */
@media screen and (max-width:767px) {
	#profile{
		background: #696469;
	}
	#profile .ttl-wrap h2,
	#profile .ttl-wrap .sub{
		color: #fff;
	}
	#profile .cont .image-wrap .image {
		width: 100%;
		height: 63.73vw;
	}
	#profile .cont .image-wrap .txt {
		margin-bottom: 5.33vw;
		padding-top: 1.33vw;
	}
	#profile .cont .text-wrap table {
		font-size: 3.43vw;
	}
	#profile .cont .text-wrap table th {
		width: 21.33vw;
	}
	#profile .cont .text-wrap table td::before{
		padding: 0 2.67vw;
	}
}

/*------------------------
社長メッセージ
------------------------*/
#message .cont .image-wrap .name-wrap .en{
	font-weight: bold;
	color: var(--gray);
}
/* PC */
@media screen and (min-width:768px) {	
	#message{
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 1300px;
        margin-top: -30px;
	}
	#message .inner{
		padding: 230px 0 0;
		display: flex;
		justify-content: space-between;
		position: relative;
		transition: all .3s ease 0s;
	}
	#message .inner::before{
		content: "";
		width: 1130px;
		height: 1300px;
		background: url(../img/company/hexagon_w.svg) no-repeat;
		background-size: contain;
		position: absolute;
		z-index: -1;
		right: -360px;
		top: 0;
		transition: all .3s ease 0s;
	}
	#message .ttl-wrap {
		padding: 390px 0 0 100px;
	}
	#message .ttl-wrap::before{
		top: 430px;
		left: 290px;
		width: 100px;
		height: .5px;
		transform-origin: left center;
	}
	#message .ttl-wrap::after{
		top: 422px;
		left: 380px;
		width: 12px;
		height: 12px;
		transform: rotate(-45deg) scale(0);
		animation: arrow02 1s 1.2s forwards ease-out;
	}
		
	/* ← ★追加★  .scrollin が付くまでは停止 */
	#message:not(.scrollin) .inner .ttl-wrap::before,
	#message:not(.scrollin) .inner .ttl-wrap::after{
	animation-play-state:paused;
	}
	#message .cont {
		width: 680px;
		margin-right: -20px;
	}
	#message .cont .icon{
		width: 130px;
		margin-left: 15px;
	}
	#message .cont .image-wrap {
        margin-right: 30px;
        padding-top: 145px;
        width: 190px;
	}
	#message .cont .image-wrap .image.president {
		height: 215px;
		margin-bottom: 25px;
	}
	#message .cont .image-wrap .name-wrap{
		margin-bottom: 20px;
	}
	#message .cont .image-wrap .name-wrap .jp {
		font-size: 12px;
		margin-bottom: 10px;
	}
	#message .cont .image-wrap .name-wrap .image.name {
		margin-bottom: 12px;
		font-size: 30px;
		letter-spacing: .52em;
		line-height: 1;
	}
	#message .cont .text-wrap {
		flex: 1;
	}
	#message .cont .text-wrap h3 {
		font-size: 20px;
		text-align: left;
		line-height: 1.75;
		letter-spacing: .1em;
		margin-bottom: 30px;
	}
	#message .cont .text-wrap .text p {
		line-height: 2.071;
		letter-spacing: .07em;
		margin-bottom: 25px;
	}
	#message .cont .text-wrap .text p:last-child{
		margin-bottom: 0;
	} 
}
/* 1200以下調整 */
@media screen and (max-width:1270px) {
	#message .cont{
		margin-right: 0;
	}
}
/* SP */
@media screen and (max-width:767px) {
	#message .cont {
	}
	#message .cont .icon{
		width: 24vw;
		margin: 0 auto 2.67vw;
	}
	#message .cont .image-wrap {
		width: 69.33vw;
		margin: 0 auto;
	}
	#message .cont .image-wrap .image.president {
		width: 100%;
		height: 76.53vw;
		margin-bottom: 2.67vw;
	}
	#message .cont .image-wrap .name-wrap{
		margin-bottom: 5.33vw;
		text-align: center;
	}
	#message .cont .image-wrap .name-wrap .jp {
		font-size: 3.2vw;
		margin-bottom: 2.67vw;
		text-align: center;
	}
	#message .cont .image-wrap .name-wrap .image.name {
		margin-bottom: 1.33vw;
		font-size: 5.87vw;
		letter-spacing: .52em;
		line-height: 1;
	}
	#message .cont .image-wrap .name-wrap .en{
		font-size: 3.43vw;
	}
	#message .cont .text-wrap h3 {
		font-size: 4.27vw;
		text-align: left;
		line-height: 1.6;
		letter-spacing: .1em;
		margin-bottom: 2.67vw;
	}
	#message .cont .text-wrap .text p {
		letter-spacing: .07em;
		margin-bottom: 4vw;
		font-size: 3.2vw;
		line-height: 1.917;
	}
	#message .cont .text-wrap .text p:last-child{
		margin-bottom: 0;
	} 
}

/*------------------------
社長メッセージ 英語
------------------------*/
	#english .ttl-wrap .en{
		font-weight: bold;
	}
#english .cont .image-wrap .name-wrap .en{
	font-weight: bold;
	color: var(--black);
}
	#english .cont .image-wrap .name-wrap .jp {
		letter-spacing: 0;
		font-weight: bold;
	}
	#english .cont .text-wrap h3 {
		text-align: left;
		color: var(--black);
	}
	#english .cont .text-wrap .text p {
		color: #fff;
	}
/* PC */
@media screen and (min-width:768px) {	
	#english{
		overflow-x: hidden;
		overflow-y: auto;
		min-height: 1300px;
		margin-top: -330px;
	}
	#english .inner{
		padding: 230px 0 0;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		position: relative;
		transition: all .3s ease 0s;
	}
	#english .inner::before{
		content: "";
		width: 1130px;
		height: 1300px;
		background: url(../img/company/hexagon_gray_b.svg) no-repeat;
		background-size: contain;
		position: absolute;
		z-index: -1;
		left: -200px;
		top: 0;
		transition: all .3s ease 0s;
	}
	#english .ttl-wrap {
		padding: 340px 0 0 0;
		margin-right: -30px;
	}
	#english .ttl-wrap::before{
		top: 410px;
		left: -106px;
		width: 98px;
		height: .5px;
	}
	#english .ttl-wrap::after{
		top: 410px;
		left: -105px;
		width: 12px;
		height: 12px;
	}
	#english .ttl-wrap .en{
		font-size: 17px;
		margin-bottom: 4px;
	}
		
	/* ← ★追加★  .scrollin が付くまでは停止 */
	#english:not(.scrollin) .inner .ttl-wrap::before,
	#english:not(.scrollin) .inner .ttl-wrap::after{
	animation-play-state:paused;
	}
	#english .cont {
		width: 800px;
	}
	#english .cont .image-wrap {
		width: 195px;
		margin-right: 29px;
		padding-top: 145px;
	}
	#english .cont .image-wrap .image.president {
		height: 215px;
		margin-bottom: 15px;
	}
	#english .cont .image-wrap .name-wrap .jp {
        font-size: 13px;
        margin-bottom: 8px;
	}
	#english .cont .image-wrap .name-wrap .en{
		font-size: 20px;
	}
	#english .cont .text-wrap {
		flex: 1;
	}
	#english .cont .text-wrap h3 {
		font-size: 17px;
		line-height: 1.706;
		letter-spacing: .05em;
		margin-bottom: 30px;
	}
	#english .cont .text-wrap .text p {
		line-height: 2.167;
		letter-spacing: .07em;
		margin-bottom: 25px;
		font-size: 12px;
	}
	#english .cont .text-wrap .text p:last-child{
		margin-bottom: 0;
	} 
}
@media screen and (max-width:1270px) {
	#english .ttl-wrap {
		margin-right: 0;
	}
	#english .ttl-wrap::before{
		left: -86px;
		width: 80px;
	}
	#english .ttl-wrap::after{
		left: -85px;
	}
}

/* SP */
@media screen and (max-width:767px) {
	#english {
		background: #696469;
	}
	#english .ttl-wrap .en,
	#english .ttl-wrap h2, #english .ttl-wrap .sub {
		color: #fff;
	}
	#english .cont .image-wrap {
		width: 69.33vw;
		margin: 0 auto;
	}
	#english .cont .image-wrap .image.president {
		width: 100%;
		height: 76.53vw;
		margin-bottom: 2.67vw;
	}
	#english .cont .image-wrap .name-wrap .jp {
		font-size: 3.2vw;
		margin-bottom: 2.67vw;
		text-align: center;
	}
	#english .cont .image-wrap .name-wrap .en{
		font-size: 4.8vw;
		text-align: center;
	}
	#english .cont .text-wrap h3 {
		font-size: 4vw;
		line-height: 1.706;
		letter-spacing: .05em;
		margin-bottom: 8vw;
	}
	#english .cont .text-wrap .text p {
		line-height: 2.167;
		letter-spacing: .07em;
		margin-bottom: 4vw;
		font-size: 3.2vw;
	}
	#english .cont .text-wrap .text p:last-child{
		margin-bottom: 0;
	} 
}

/*------------------------
企業理念
------------------------*/
#philosophy .cont {
	text-align: center;
}
#philosophy .cont h3 {
	line-height: 1;
	letter-spacing: 0.3em;
	color: var(--black);
}
/* PC */
@media screen and (min-width:768px) {
	#philosophy{
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 970px;
        margin-top: -330px;
	}
	#philosophy .inner{
		padding: 175px 0 0px;
		display: flex;
		justify-content: space-between;
		position: relative;
		transition: all .3s ease 0s;
	}
	#philosophy .inner::before{
		content: "";
		width: 815px;
		height: 940px;
		background: url(../img/company/hexagon_w.svg) no-repeat;
		background-size: contain;
		position: absolute;
		z-index: -1;
		right: -200px;
		top: 0;
		transition: all .3s ease 0s;
	}
	#philosophy .ttl-wrap {
		padding: 245px 0 0 230px;
	}
	#philosophy .ttl-wrap::before{
		top: 280px;
		left: 460px;
		width: 100px;
		height: .5px;
		transform-origin: left center;
	}
	#philosophy .ttl-wrap::after{
		top: 272px;
		left: 550px;
		width: 12px;
		height: 12px;
		transform: rotate(-45deg) scale(0);
		animation: arrow02 1s 1.2s forwards ease-out;
	}
		
	/* ← ★追加★  .scrollin が付くまでは停止 */
	#philosophy > .inner:not(.scrollin) .ttl-wrap::before,
	#philosophy > .inner:not(.scrollin) .ttl-wrap::after{
	animation-play-state:paused;
	}
	#philosophy .cont {
		width: 440px;
		margin-right: -10px;
	}
	#philosophy .cont .logo {
		width: 230px;
		margin: 0 auto 30px;
	}
	#philosophy .cont h3 {
		font-size: 24px;
		margin-bottom: 30px;
	}
	#philosophy .cont .text {
		font-size: 18px;
		letter-spacing: 0.15em;
		line-height: 2.056;
		margin-bottom: 70px;
	}
	#philosophy .en-wrap h4 {
		font-size: 30px;
		line-height: 1.167;
		letter-spacing: .05em;
		margin-bottom: 25px;
	}
	#philosophy .en-wrap .en-text {
		font-size: 12px;
		line-height: 2.167;
		letter-spacing: .08em;
	}
}

@media screen and (max-width:1250px) {
	#philosophy .cont {
		margin-right: 0;
	}
}
/* SP */
@media screen and (max-width:767px) {
	#philosophy .cont .logo {
		width: 64vw;
		margin: 0 auto 4vw;
	}
	#philosophy .cont h3 {
		font-size: 4.8vw;
		margin-bottom: 2.67vw;
	}
	#philosophy .cont .text {
		font-size: 3.43vw;
		letter-spacing: 0.15em;
		line-height: 2.056;
		margin-bottom: 8vw;
	}
	#philosophy .en-wrap h4 {
		font-size: 5.87vw;
		line-height: 1.167;
		letter-spacing: .05em;
		margin-bottom: 2.67vw;
	}
	#philosophy .en-wrap .en-text {
		font-size: 3.2vw;
		line-height: 2.056;
		letter-spacing: .08em;
	}
}

/*------------------------
グループネットワーク
------------------------*/
/* PC */
@media screen and (min-width:768px) {
	#network{
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 1330px;
        margin-top: -360px;
	}
	#network .inner{
		padding: 140px 0 0px;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		position: relative;
		transition: all .3s ease 0s;
	}
	#network .inner::before{
		content: "";
		width: 1130px;
		height: 1300px;
		background: url(../img/company/hexagon_gray.svg) no-repeat;
		background-size: contain;
		position: absolute;
		z-index: -1;
		left: -200px;
		top: 0;
		transition: all .3s ease 0s;
	}
	#network .ttl-wrap {
		padding: 485px 0 0 0;
		margin-right: -25px;
	}
	#network .ttl-wrap::before{
		top: 520px;
		left: -100px;
		width: 90px;
		height: .5px;
	}
	#network .ttl-wrap::after{
		top: 520px;
		left: -100px;
		width: 12px;
		height: 12px;
	}
		
	/* ← ★追加★  .scrollin が付くまでは停止 */
	#network > .inner:not(.scrollin) .ttl-wrap::before,
	#network > .inner:not(.scrollin) .ttl-wrap::after{
	animation-play-state:paused;
	}
	#network .cont {
		width: 720px;
	}
	#network .cont .image.icon {
		width: 130px;
		height: auto;
		margin: 0 auto 30px;
	}
	#network  h3 {
        font-size: 24px;
        letter-spacing: .07em;
        margin-bottom: 60px;
        line-height: 1.8;
	}
	#network .cont .text {
		line-height: 2.071;
		text-align: center;
		margin-bottom: 65px;
	}
	#network .cont .image.main {
        width: 920px;
        margin-left: -100px;
		transition: all .3s ease 0s;
	}
}


@media screen and (max-width:1500px) {
	#network .cont .image.main {
		width: 850px;
		margin-left: -50px;
	}
}


@media screen and (max-width:1350px) {
	#network .ttl-wrap {
		margin-right: 0;
	}
	#network h3 {
		font-size: 21px;
		margin-left: 84px;
	}
	#network .cont .image.icon {
		margin-left: 320px;
	}
	#network .cont .image.main{
		margin-left: 20px;
        width: 760px;
	}
}
/* SP */
@media screen and (max-width:767px) {
	#network{
		background: #f0eff0;
	}
	#network .cont .image.icon {
		width: 32vw;
		height: auto;
		margin: 0 auto 4vw;
	}
	#network  h3 {
        font-size: 4.27vw;
        letter-spacing: .1em;
        margin-bottom: 6vw;
	}
	#network .cont .text {
		line-height: 2.071;
		text-align: center;
		margin-bottom: 5.33vw;
		font-size: 3.43vw;
	}
	#network .cont .image.main {
		width: 100%;
	}
}


/*------------------------
アクセス
------------------------*/
#access .cont .box:nth-child(2) h3{
	color: var(--green);
}
/* PC */
@media screen and (min-width:768px) {	
	#access{
		overflow-x: hidden;
        overflow-y: auto;
        min-height: 1300px;
        margin-top: -360px;
	}
	#access .inner{
		padding: 215px 0 0;
		display: flex;
		justify-content: space-between;
		position: relative;
		transition: all .3s ease 0s;
	}
	#access .inner::before{
		content: "";
		width: 1130px;
		height: 1300px;
		background: url(../img/company/hexagon_gray.svg) no-repeat;
		background-size: contain;
		position: absolute;
		z-index: -1;
		right: -360px;
		top: 0;
		transition: all .3s ease 0s;
	}
	#access .ttl-wrap {
		padding: 405px 0 0 145px;
	}
	#access .ttl-wrap::before{
		top: 440px;
		left: 290px;
		width: 100px;
		height: .5px;
		transform-origin: left center;
	}
	#access .ttl-wrap::after{
		top: 432px;
		left: 380px;
		width: 12px;
		height: 12px;
		transform: rotate(-45deg) scale(0);
		animation: arrow02 1s 1.2s forwards ease-out;
	}
		
	/* ← ★追加★  .scrollin が付くまでは停止 */
	#access:not(.scrollin) .inner .ttl-wrap::before,
	#access:not(.scrollin) .inner .ttl-wrap::after{
	animation-play-state:paused;
	}
	#access .cont {
		width: 335px;
		margin-right: 40px;
	}
	#access .cont .box:not(:last-child){
		margin-bottom: 50px;
	}
	#access .cont .box .image {
		line-height: 1;
		text-align: left;
		font-size: 20px;
		letter-spacing: .1em;
		margin-bottom: 10px;
	}
	#access .cont .box:nth-child(2) .image{
		border: 1px solid var(--gray);
	}
	#access .cont .box h3 {
		line-height: 1;
		text-align: left;
		font-size: 20px;
		letter-spacing: .1em;
		margin-bottom: 10px;
	}
	#access .cont .box .text {
		line-height: 1.357;
		letter-spacing: 0;
	}
}

/* SP */
@media screen and (max-width:767px) {
	#access .cont .box:not(:last-child){
		margin-bottom: 8vw;
	}
	#access .cont .box .image {
		margin-bottom: 2.67vw;
	}
	#access .cont .box:nth-child(2) .image{
		border: 1px solid var(--gray);
	}
	#access .cont .box h3 {
		line-height: 1;
		text-align: left;
		font-size: 4.8vw;
		letter-spacing: .1em;
		margin-bottom: 2.67vw;
	}
	#access .cont .box .text {
		line-height: 1.6;
		letter-spacing: 0;
	}
}


/*------------------------
リンク
------------------------*/
#link .hexagon-link {
	display: inline-flex;
}
#link .hexagon {
	position: relative;
	overflow: hidden;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#link .hexagon-link .image img {
	object-fit: cover; 
}
#link .hex--color {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
/* 右側：背景色を持つ六角形（テキスト用） */
#link .hex--color {
	background-color: var(--gray);
	color: #ffffff;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}
/* PC */
@media screen and (min-width:768px) {
	#link{
		margin-top: -320px;
		margin-bottom: 130px;
	}
	#link .hexagon {
		width: 240px;
		height: 275px;
	}
	#link .hex--color {
		background-color: var(--gray);
		color: #ffffff;
	}
	#link .hex--color .ttl-wrap h2{
		font-size: 30px;
		line-height: 1.2;
		letter-spacing: .05em;
	}
	#link .hex--color .ttl-wrap .sub{
		letter-spacing: 0.24em;
	}

	/* オーバーレイ（最初は透明） */
	#link .hex--image .overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(35, 24, 21, 0.56);
		mix-blend-mode: multiply;
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none; /* クリックを透過させる */
	}
	#link .hex--image .overlay-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #ffffff;
		text-align: center;
		opacity: 0;
		transition: opacity 0.4s ease; /* 少し遅らせてテキストを出す */
		pointer-events: none;
	}
	#link .hex--image .overlay-text p {
		font-size: 18px;
		line-height: 1.611;
		font-weight: bold;
	}
	#link .hexagon-link:hover .hex--image .overlay {
		opacity: 1;
	}
	#link .hexagon-link:hover .hex--image .overlay-text {
		opacity: 1;
	}
	/* 右側：背景色を持つ六角形（テキスト用） */
	#link .hexagon-link:hover .hex--color {
		background-color: #ffffff;
		color: var(--gray);
		background-image: url('../img/company/hexagon_boder.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover; 
	}
}

/* SP */
@media screen and (max-width:767px) {
	#link{
		padding: 0 6.67vw 10.67vw;
	}
	#link .hexagon {
		width: 43.2vw;
		height: 50.13vw;
	}
	#link .hex--color .ttl-wrap h2{
		font-size: 6.4vw;
		line-height: 1.2;
		letter-spacing: .05em;
	}
	#link .hex--color .ttl-wrap .sub{
		letter-spacing: 0.24em;
		font-size: 3.43vw;
	}
}


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

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

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

}