@charset "UTF-8";

/* =============================================================
   Info list / detail pages (business/info/, business/info/detail/)
   ============================================================= */

/* #breadcrumb override: the last crumb here is the announcement title, which
   can be long enough to wrap. #breadcrumb .breadcrumb__item is align-items:
   center by default (common.css), which vertically centers the chevron icon
   against the whole wrapped text block instead of its first line once it
   wraps — pin the icon to the first line instead, nudged down to sit at the
   line's optical center like the (short, single-line) center default. */
#breadcrumb .breadcrumb__item:last-child {
	align-items: flex-start;
	& .breadcrumb__icon {
		margin-top: 7px;
	}
}

#page-hero.page-hero_info {
  padding-bottom: 60px;
}

main section#info-list {
  padding: 50px 0;
}

main section#info-archive-blocks {
  padding: 30px 0;
}

@media screen and (max-width: 640px) {
  #page-hero.page-hero_info {
    padding-bottom: 48px;
  }
}

/* .info-archive: full-width year-archive tab strip above the list */
.info-archive {
	background: var(--col-white);
	border-bottom: 2px solid var(--col-primary);
	& .info-archive__list {
		display: flex;
		flex-wrap: wrap;
	}
	& .info-archive__link {
		display: block;
		padding: 14px 18px;
		font-size: 14px;
    font-weight: 500;
		color: var(--col-primary);
		text-decoration: none;
		transition: color .2s ease, background .2s ease;
		&:hover {
			color: var(--col-logo-green);
			text-decoration: none;
		}
	}
	& .info-archive__link.is-current {
		background: var(--col-primary);
    border-radius: 6px 6px 0 0;
		color: var(--col-white);
		font-weight: 500;
		transition: background .2s ease;
		&:hover {
			background: #32aea4;
		}
	}
}

#info-archive-blocks {
	display: none;
	background: #f7fbfc;
	& .info-archive-blocks__ttl {
		margin-bottom: 6px;
		font-size: 16px;
    font-weight: 600;
		color: var(--col-primary);
    padding-top: 16px;
    border-top: 1px solid var(--col-primary);
	}
}

/* #info-list: card-list of announcements */
#info-list {
	background: #f7fbfc;
	& .info-list__item {
		& + .info-list__item {
			margin-top: 16px;
		}
	}
	& .info-list__item-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 20px 24px;
		background: var(--col-white);
		border: 1px solid var(--col-border);
		border-radius: var(--radius-md);
		transition: box-shadow .2s ease, border-color .2s ease;
		&:hover {
			border-color: var(--col-teal);
			box-shadow: var(--shadow-card);
		}
	}
	& .info-list__date {
		display: block;
		font-size: 13px;
		color: var(--col-text-muted);
	}
	& .info-list__item-ttl {
		margin-top: 4px;
		font-size: 16px;
		color: var(--col-text);
		text-decoration: underline;
	}
	& .info-list__icon {
		flex-shrink: 0;
		width: 8px;
		height: 13px;
	}
	& .info-list__item--empty {
		padding: 20px 24px;
		background: var(--col-white);
		border: 1px solid var(--col-border);
		border-radius: var(--radius-md);
		color: var(--col-text-muted);
		text-align: center;
	}
}

/* #info-detail: article page */
main .card.info-detail__card {
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 900px;
  margin-inline: auto;
}
/* .info-detail__share: SNS share links (twitter/facebook/hatena), matching colorfulbox.jp/info/detail/'s .shareBox */
.info-detail__share {
	& ul {
		display: flex;
		gap: 10px;
	}
	& img {
		width: 27px;
		height: 27px;
		transition: opacity .2s ease;
	}
	& a:hover img {
		opacity: .7;
	}
}
.info-detail__share--top {
	margin-bottom: 16px;
	& ul {
		justify-content: flex-end;
	}
}
.info-detail__share--bottom {
	margin-top: 40px;
	text-align: center;
	& p {
		margin-bottom: 16px;
		font-size: 14px;
		color: var(--col-text-muted);
	}
	& ul {
		justify-content: center;
	}
}

.info-detail__date {
	display: block;
	font-size: 14px;
	color: var(--col-text);
}
.info-detail__ttl {
	margin-top: 8px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--col-border);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .02em;
	color: var(--col-primary);
}

/* .info-detail__body: prose rendered from the WHMCS announcement HTML */
.info-detail__body {
	margin-top: 24px;
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: .02em;
	color: var(--col-text);
	word-break: break-word;
	& p {
		margin-top: 1em;
		&:first-child {
			margin-top: 0;
		}
	}
	& img {
		max-width: 100%;
		height: auto;
		margin-top: 1em;
	}
	& a {
		color: var(--col-primary);
		text-decoration: underline;
	}
	/* eyecatch image link: block so the whole image area is clickable, rounded + clipped for the radius to show */
	& a:has(> img.eyecatch) {
		display: block;
		overflow: hidden;
		border-radius: 15px;
		text-decoration: none;
	}
	& h2,
	& h3 {
		margin-top: 1.5em;
		font-weight: 700;
		color: var(--col-text);
	}
	& ul,
	& ol {
		margin-top: 1em;
		padding-left: 1.4em;
	}
}

.info-detail__error {
	max-width: 800px;
	margin: 0 auto;
	padding: 48px;
	text-align: center;
	color: var(--col-text-muted);
}

.info-detail__actions {
	max-width: 800px;
	margin: 60px auto 0;
	text-align: center;
}

main .info-detail__actions .btn-outline {
  margin-inline: auto;
}

/* ---------- sp ---------- */
@media screen and (max-width: 640px) {
  main section#info-list {
    padding: 30px 0;
  }
	.info-archive {
		& .info-archive__link {
			padding: 12px 16px;
			font-size: 13px;
			border: 1px solid var(--col-border);
      border-bottom: none;
		}
		& .info-archive__item--archive {
			display: none;
		}
		& .info-archive__list > li:nth-child(-n+2) .info-archive__link {
			border-radius: var(--radius-sm) var(--radius-sm) 0 0;
		}
	}
	#info-archive-blocks {
		display: block;
	}
	.info-archive__blocks {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
	.info-archive__block-link {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 44px;
    background: #fff;
		border: 1px solid var(--col-border);
		border-radius: var(--radius-sm);
		font-size: 13px;
		font-weight: 500;
		color: var(--col-primary);
		transition: color .2s ease, background .2s ease, border-color .2s ease;
		&:hover {
			border-color: var(--col-primary);
		}
		&.is-current {
			background: var(--col-primary);
			border-color: var(--col-primary);
			color: var(--col-white);
		}
	}
	#info-list {
    & .info-list__item {
      & + .info-list__item {
        margin-top: 11px;
      }
    }
		& .info-list__item-link {
			padding: 10px 13px;
		}
		& .info-list__item-ttl {
      margin-top: 2px;
			font-size: 14px;
      line-height: 1.4;
		}
    & .info-list__date {
      font-size: 12px;
    }
    & .info-list__icon {
      width: 7px;
      height: 11px;
    }
	}
	.info-detail__share {
		& img {
			width: 24px;
			height: 24px;
		}
	}
	.info-detail__ttl {
		font-size: 19px;
	}
	.info-detail__body {
		font-size: 14px;
	}

  .info-detail__actions {
    margin-top: 40px;
  }
}