@charset "UTF-8";
/* CSS Document */

.correlation-fig {
	margin: 0 auto 0;
	max-width: 510px;
}



/*ナビ
-----------------------------------------*/
.correlation-link-list {
	margin: 70px auto 0;
	max-width: 896px;
	display: grid;
	gap:10px 20px;
	grid-template-columns: repeat(3,1fr);
}

@media (max-width:560px) {
.correlation-link-list {
	margin: 40px auto 0;
	display: grid;
	gap:0px 20px;
	grid-template-columns: repeat(2,1fr);
}
	
}

.correlation-link-list > li {
	text-align: left;
}

.correlation-link-list > li a {
	display: block;
}

/*.correlation-link {
	height: 58px;
	font-size: 1.8rem;
	font-weight: 800;
	color: #4B1E78;
	line-height: 1.4;
	display: flex;
	align-items: center;
	background: url("../images/common/chevron-right-circle-down.png") no-repeat right center;
	background-size: 18px;
	border-bottom: solid 1px #B8BCBE;
}*/

.correlation-link {
    position: relative;
    height: 58px;
    font-size: 1.8rem;
    font-weight: 800;
    color: #4B1E78;
    line-height: 1.4;
    display: flex;
    align-items: center;
    /*background: url("../images/common/chevron-right-circle-down.png") no-repeat right center;
    background-size: 18px;*/
    border-bottom: solid 1px #B8BCBE;
    transition: background-size 0.3s ease; /* Smooth transition for the background size */
}

.correlation-link span {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
		height: 20px;
		line-height: 1;
    transition: transform 0.3s ease; /* Smooth transition for the transform property */
}

.correlation-link:hover span {
    transform: translateY(-50%) scale(1.1); /* Slightly enlarge the span on hover */
}

.correlation-link span img {
	vertical-align: top;
}


.correlation-link::before {
    content: "";
    position: absolute;
    bottom: -1px; /* Align with the bottom of the existing border */
    left: 0;
    height: 1px; /* Same height as the border-bottom */
    width: 100%;
    background-color: #4B1E78; /* New border color */
    transform: scaleX(0); /* Start with the border not visible */
    transform-origin: left; /* Animation starts from the left */
    transition: transform 0.3s ease;
    z-index: 2; /* Make sure it appears on top of the existing border */
}

.correlation-link:hover::before {
    transform: scaleX(1); /* Expand the border to full width */
}

@media (max-width:768px) {
.correlation-link {
	font-size: 1.6rem;
}	
	
.correlation-link:hover span {
    transform: translateY(-50%) scale(1.0); /* Slightly enlarge the span on hover */
}

.correlation-link::before {
    content: none;
}	
}



.correlation-link p {
	
}

@media (max-width:560px) {
.correlation-link {
	padding-right:1em;
	height: 62px;
	font-size: 4.0vw;
	text-align: left;
	line-height: 1.3;
	display: flex;
	align-items: center;
	background: url("../images/common/chevron-right-circle-down.png") no-repeat right center;
	background-size: 18px;
	border-bottom: solid 1px #B8BCBE;
}	
}

/*事業リスト
-----------------------------------------*/
.correlation-gray-area {
	margin: 80px auto 0;
	padding: 90px 0;
	background: #F2F3F4;
	/*background: #cacccf;*/
}

@media (max-width:560px) {
.correlation-gray-area {
	margin: 30px auto 0;
	/*padding: 45px 0 80px;*/
	padding: 45px 0 100px;
}	
}

/**/
.correlation-list {
}

.correlation-list > li {
	margin-top: 60px;
}

.correlation-list > li:first-child {
	margin-top: 0;
}

.correlation-list .h-deco-s {
	margin-top: 0;
}

/*
-----------------------------------------*/
.business-set {
	display: flex;
	justify-content: space-between;
}

.business-set .pic-area {
	/*width: 31.17%;*/
	width: 16.67%;
}

.business-set .txt-area {
	/*width: 65.83%;*/
	width: 80.00%;
	text-align: left;
}

.business-cate-intro {
	font-size: 1.8rem;
	font-weight: 500;
}

@media (max-width:560px) {
.business-set {
	display: block;
}

.business-set .pic-area {
	margin:0 auto;
	width: 30%;
}

.business-set .txt-area {
	width: inherit;
}

.business-cate-intro {
	margin-top:10px;
	font-size: 4vw;
}	
}

/**/
/*.business-more-box {
  display: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 1.5s ease;
}

.business-more-box.show {
  display: block;
  opacity: 1;
}*/

.business-more-box {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.8s ease-out, opacity 0.8s ease-out;
}

.business-more-box.show {
  max-height: 1000px; /* 高さはコンテンツに応じて調整 */
  opacity: 1;
}



.business-detail-list > li {
	margin-top: 30px;
}

.business-detail-ttl {
	font-weight: 700;
}

@media (max-width:560px) {
.business-detail-list > li {
	margin-top: 25px;
}

.business-detail-txt {
	font-size:3.5vw;
	line-height:1.6;
}
}

/*もっと見るボタン
-----------------------------------------*/
.business-btn-more {
	margin-top: 50px;
	margin-left: auto;
	width: 200px;
	height: 36px;
	font-size: 1.4rem;
	font-weight: 600;
	color: #4B1E78;
	display: flex;
	align-items: center;
	justify-content: center;
	border: solid 1px #4B1E78;
	border-radius: 100px;
	background-color: #fff;
	cursor: pointer;
	position: relative;
	transition: .2s;
}

.business-btn-more:hover {
	color: #7B47D2;
	border: solid 1px #7B47D2;
}

.business-btn-more.is-active {
	color: #333;
	border: solid 1px #757778;
	background-color: #fff;
}

.business-btn-more.is-active:hover {
	color: #B8BCBE;
	border: solid 1px #B8BCBE;
}

@media (max-width:560px) {
.business-btn-more {
	margin: 20px auto 0;
	padding:0.8em 0;
	width: 65%;
	height: auto;
	font-size: 4vw;
	line-height:1;
}	
}

/* 「+」を追加 */
.business-btn-more::before,
.business-btn-more::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  width: 10px;
  height: 2px;
  margin: auto;
  background-color: #4B1E78;
}
.business-btn-more::after {
  transform: rotate(90deg);
  transition: .3s;
}
/* クリックしたときに「+」を「−」に変更 */
.business-btn-more.is-active::after {
  transform: rotate(180deg);
	background-color: #757778;
}