@charset "utf-8";
/* ----ブログindex---- */

/* ///////////////////////////////////////////////////////////
	共通（一覧?詳細ページ）
/////////////////////////////////////////////////////////// */

/* Reset
----------------------------------------------------------------- */
header div {
	width: auto;
	height: auto;
	margin: 0;
}
header div h1 a {
	display: block;
	width: auto;
	height: auto;
	overflow: inherit;
}
header div h1 {
	position: relative;
	top: 0;
	text-indent: inherit;
	width: auto;
	height: auto;
	background-image: none;
}
#blog article,
#blogInfo article {
 min-width: auto;
}
a {
	color: #333333;
}

/*------------ sp ------------*/
@media (min-width: 767px) {
	#breadcrumb {
		margin: 0px auto!important;
	}
}
@media (max-width: 767px) {
	header {
		height: auto;
		background-color: #fbfbfb;
	}
}


/* Layout
----------------------------------------------------------------- */
#blog , #blogDetail {
	background-color: var(--main-bg);
}

.l-blog__block {
	display: flex;
	gap: 40px;
	justify-content: space-between;
	padding: clamp(3.25rem, 1.706rem + 4.12vw, 5rem) 0 5rem;
}
.l-blog__main {
	width: 100%;
	max-width: 76.0rem;
}
.l-blog__sidebar {
	width: 100%;
	max-width: 22.0rem;
}
@media (max-width: 767px) {
	.l-blog__block {
		display: block;
	}
	.l-blog__main {
		max-width: 100%;
	}
	.l-blog__sidebar {
		max-width: 100%;
	}
}
@media (max-width: 1199.9px) {
	#blogDetail .l-blog__sidebar {
		display: none;
	}
}


/* Common
----------------------------------------------------------------- */
.c-blog__head {
	margin-bottom: clamp(3rem, 2.735rem + 0.71vw, 3.3rem);
}
.c-blog__head .head {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1;
	color: var(--main-color);
	display: flex;
	flex-direction: column;
	row-gap: 1.0em;
}
.c-blog__head .head > span {
	font-size: clamp(3.2rem, 1.965rem + 3.29vw, 4.6rem);
	font-weight: 600;
	color: var(--accent-color);
}


/* 記事 */
.c-blogArticle {
	box-sizing: border-box;
	margin: 0;
}
.c-blogArticle .c-blogArticle__block .line {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 1px;
	background-color: var(--gray-color);
	margin-top: clamp(3.5rem, 2.176rem + 3.53vw, 5rem);
}

.c-blogArticle .c-blogArticle__block .line::before {
	content: "";
	display: inline-block;
	position: absolute;
	height: 1px;
	width: 11%;
	background-color: var(--accent-color);
	bottom: 0;
	transition: width 0.5s ease;
}

.c-blogArticle .c-blogArticle__image {
	display: flex;
	width: 100%;
	height: auto;
	align-items: center;
	justify-content: center;
	background-color: var(--white-color);
	aspect-ratio: 3 / 2;
}
.c-blogArticle .c-blogArticle__image:has([alt="Corporate Blog"]) {
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.c-blogArticle .c-blogArticle__title {
	margin: 1.0rem 0;
	flex: 1;
}
@media (max-width: 767px) {
	.c-blogArticle {
		width: 100%!important;
	}
	.c-blogArticle .c-blogArticle__title {
		margin: 1.5rem 0 1.75rem;
	}
}
.c-blogArticle .c-blogArticle__title .tit {
	font-size: 1.8rem;
	font-weight: 600;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
}
.c-blogArticle .c-blogArticle__info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	column-gap: 2.0rem;
}
.c-blogArticle .c-blogArticle__info .c-blogArticle__info__contents {
	display: flex;
	align-items: center;
	column-gap: clamp(0.75rem, 0.529rem + 0.59vw, 1rem);
}
.c-blogArticle .c-blogArticle__info .c-blogArticle__info__contents .image {
	width: 3.0rem;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--white-color);
	background-position: center;
	background-size: cover;
}
.c-blogArticle .c-blogArticle__info .c-blogArticle__info__contents .text {
	font-size: clamp(1.2rem, 1.024rem + 0.47vw, 1.4rem);
}
.c-blogArticle .c-blogArticle__info .date {
	font-size: 1.2rem;
}

.c-blogArticle .c-blogArticle__cate {
	margin-top: 2.7rem;
}
@media (max-width: 767px) {
	.c-blogArticle .c-blogArticle__cate {
		margin-top: 1.2rem;
	}
}
.c-blogArticle .c-blogArticle__cate .c-blogArticle__cate__content {
	display: flex;
	flex-wrap: wrap;
	gap: 1.0rem;
}
@media (min-width: 768px) {
	.c-blogArticle .c-blogArticle__block .article__link:hover ~ .line::before {
		width: 100%;
	}
}
@media (max-width: 767px) {
	.c-blogArticle .c-blogArticle__block .article__link:active ~ .line::before {
		width: 100%;
	}
}

.c-blogArticle {
	display: flex;
}
.c-blogArticle > .c-blogArticle__block {
	display: flex;
	flex-flow: column;
	flex-direction: column;
	width: 100%;
}
.c-blogArticle > .c-blogArticle__block > a {
	display: flex;
	flex-flow: column;
	flex-direction: column;
	flex: 1;
}


/* コーポレートサイト?リクルートサイトへのリンク
----------------------------------------------------------------- */
.p-blog__pageLink .blog__pageLink__inner {
	max-width: calc(1120px + (2.0rem* 2));
	width: 100%;
	padding: 0 2.0rem;
	margin: 0 auto;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	.p-blog__pageLink .blog__pageLink__inner {
		padding: 0;
	}
}
.p-blog__pageLink hr {
	margin: 8.0rem 0;
}
.p-blog__pageLink .blog__pageLink__block {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}
.p-blog__pageLink .pageLink {
	width: calc(50% - (4.0rem / 2));
	box-sizing: border-box;
	color: var(--white-color);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	row-gap: clamp(1.6rem, 0.365rem + 3.29vw, 3rem);
	padding: clamp(3.5rem, 2.176rem + 3.53vw, 5rem) 2.0rem clamp(2rem, 1.118rem + 2.35vw, 3rem);
	overflow: hidden;
}
@media (max-width: 767px) {
	.p-blog__pageLink .blog__pageLink__block {
		flex-direction: column;
		row-gap: 0.1rem;
	}
	.p-blog__pageLink .pageLink {
		width: 100%;
	}
}
.p-blog__pageLink .pageLink::before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: var(--main-color);
	opacity: 0.87;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	z-index: 2;
	transition: opacity 0.3s ease;
}
.p-blog__pageLink .pageLink::after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
	transition: transform 0.3s ease;
}
.p-blog__pageLink .pageLink.cprt::after {
	background-image: url(/wp/wp-content/themes/ios/blog/img/img_corporatesite.jpg);
}
.p-blog__pageLink .pageLink.rcrt::after {
	background-image: url(/wp/wp-content/themes/ios/blog/img/img_recruit.jpg);
}
.p-blog__pageLink .pageLink .pageLink__text {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	row-gap: clamp(0.5rem, 0.059rem + 1.18vw, 1rem);
	align-items: center;
	font-size: clamp(1.2rem, 1.024rem + 0.47vw, 1.4rem);
	font-weight: 400;
}
.p-blog__pageLink .pageLink .pageLink__text > span {
	font-size: clamp(2.4rem, 1.165rem + 3.29vw, 3.8rem);
	font-weight: 200;
}
.p-blog__pageLink .pageLink .icon {
	display: flex;
	background-color: var(--accent-color);
	border-radius: 50%;
	width: clamp(2.5rem, 1.618rem + 2.35vw, 3.5rem);
	height: auto;
	aspect-ratio: 1 / 1;
	position: relative;
	z-index: 2;
	overflow: hidden;
}
.p-blog__pageLink .pageLink .icon::before,
.p-blog__pageLink .pageLink .icon::after {
	content: '';
	position: absolute;
	width: 20%;
	height: 20%;
	border: 0.2rem solid var(--white-color);
	border-left: 0;
	border-bottom: 0;
	transform: rotate(45deg);
	top: 0;
	bottom: 0;
	right: 0;
	left: -2px;
	margin: auto;
	box-sizing: border-box;
	transition: left 0.3s ease, right 0.3s ease;
}
.p-blog__pageLink .pageLink .icon::after {
	left: -70%;
	right: auto;
}
@media (min-width: 768px) {
  .p-blog__pageLink .pageLink:hover::after {
		transform: scale(1.05);
  }
	.p-blog__pageLink .pageLink:hover::before {
		opacity: 0.4;
	}
	.p-blog__pageLink .pageLink:hover .icon::before {
		left: auto;
		right: -70%;
	}
	.p-blog__pageLink .pageLink:hover .icon::after {
		left: -2px;
		right: 0;
	}
}
@media (max-width: 767px) {
  .p-blog__pageLink .pageLink:active::after {
		transform: scale(1.05);
  }
	.p-blog__pageLink .pageLink:active::before {
		opacity: 0.4;
	}
}

.u-hr {
	border-color: rgba(66, 135, 245, 0.1);
	box-sizing: border-box;
	margin: 0;
}


/* サイドバー
----------------------------------------------------------------- */
@media (min-width: 1120px) {
	.js-aside_fixed.posSticky {
		position: sticky;
		background-color: var(--main-bg);
		box-sizing: content-box;
		width: 100%;
		padding: 2.0rem 2.0rem 0 2.0rem;
		margin-left: -2.0rem;
		z-index: 10;
	}
}
/* 検索ボックス */
.blog__aside .blog__searchform {
  position: relative;
	display: flex;
	box-sizing: border-box;
	min-height: 4.0rem;
}
.blog__aside .blog__searchfield {
  font-size: 1.2rem;
  width: 100%;
	padding: 1.0rem 1.0rem 1.0rem calc(1.0rem + 1.2rem + 1.0rem);
  border: solid 1px rgba(51, 51, 51, 0.1);
  border-radius: 5px;
	background: transparent;
	box-sizing: border-box;
}
.blog__aside .blog__searchfield::placeholder {
	color: rgba(47, 47, 47, 0.4);
}
.blog__aside .blog__searchsubmit {
  font-family: FontAwesome;
  font-size: 1.2rem;
  position: absolute;
  top: 0;
	bottom: 0;
  left: 1.5rem;
  margin: auto;
  padding: 0;
  cursor: pointer;
  color: var(--accent-color);
  border: none;
  background: transparent;
}
 
.blog__aside .blog__searchsubmit:hover {
  opacity: .5;
}
@media (max-width: 767px) {
	.blog__aside .blog__searchfield {
		font-size: 1.4rem;
	}
}

/* カテゴリー */
.blog__aside .blog__aside__category {
	margin-top: 1.5rem;
}
.blog__aside .blog__aside__head {
	display: flex;
	align-items: center;
	column-gap: 6px;
}
.blog__aside .blog__aside__head .icon {
	width: clamp(2rem, 1.824rem + 0.47vw, 2.2rem);
	height: auto;
	aspect-ratio: 1 / 1;
	display: flex;
}
.blog__aside .blog__aside__head .head {
	font-size: 1.6rem;
	font-weight: 500;
}

.blog__aside .blog__aside__list .list__link {
	display: flex;
	justify-content: space-between;
}
.blog__aside .blog__aside__list .list__text {
	flex: 1;
	transition: color 0.5s ease;
}
.blog__aside .blog__aside__list .list__parent {
	border-bottom: 1px solid rgba(47, 47, 47, 0.1);
	padding: 1.5rem 0;
}
.blog__aside .blog__aside__list .list__parent:first-child {
	padding-top: 1.0rem;
}
.blog__aside .blog__aside__list .list__parent > .list__link {
	align-items: center;
}
.blog__aside .blog__aside__list .list__parent > .list__link::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--accent-color);
	margin: 0 calc(((clamp(1.7rem, 1.435rem + 0.71vw, 2rem) / 2)));
}
.blog__aside .blog__aside__list .list__child {
	padding-left: calc(clamp(1.7rem, 1.435rem + 0.71vw, 2rem) + 6px);
	margin-bottom: 6px;
}
.blog__aside .blog__aside__list .list__child:last-child {
	margin-bottom: 0;
}
.blog__aside .blog__aside__list .list__child .list__link {
	align-items: flex-start;
}
.blog__aside .blog__aside__list .list__child .list__link::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	vertical-align: middle;
	border-left: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	margin-right: 5px;
	margin-top: 0.5em;
}
.blog__aside .blog__aside__list .list__count {
	padding: 0.3rem 1.0rem;
	min-width: 4.0rem;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 1.0rem;
	font-size: 1.2rem;
	border-radius: 0.5rem;
	background-color: var(--gray-color);
	transition: color 0.5s ease, background-color 0.5s ease;
}
.blog__aside .blog__aside__list .blog__child {
	margin-top: 6px;
}
@media (min-width: 768px) {
	.blog__aside .blog__aside__list	.list__link:hover .list__text {
		color: var(--light-gray-color);
	}
	.blog__aside .blog__aside__list	.list__link:hover .list__count {
    color: var(--white-color);
		background-color: var(--accent-color);
	}
}
@media (max-width: 767px) {
	.blog__aside .blog__aside__list	.list__link:active .list__text {
		color: var(--light-gray-color);
	}
	.blog__aside .blog__aside__list	.list__link:active .list__count {
    color: var(--white-color);
		background-color: var(--accent-color);
	}
}

.blog__aside.blog__aside__popular {
	margin-top: 3.0rem;
}
.blog__aside.blog__aside__popular .c-blogArticle {
	margin-top: 2.0rem;
	flex-wrap: wrap;
	flex-direction: column;
}
.blog__aside.blog__aside__popular .c-blogArticle > li {
	margin-bottom: 6.0rem;
}
.blog__aside.blog__aside__popular .c-blogArticle > li:last-child {
	margin-bottom: 0;
}
.blog__aside.blog__aside__popular .c-blogArticle .c-blogArticle__title {
	margin: 0.5rem 0 0.7rem;
}
.blog__aside.blog__aside__popular .c-blogArticle .c-blogArticle__title .tit {
	font-size: 1.4rem;
	font-weight: 500;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
}
.blog__aside.blog__aside__popular .c-blogArticle .c-blogArticle__info .c-blogArticle__info__contents {
	column-gap: 0.5rem;
}
.blog__aside.blog__aside__popular .c-blogArticle .c-blogArticle__info .c-blogArticle__info__contents .text {
	font-size: 1.2rem;
}
.blog__aside.blog__aside__popular .c-blogArticle .c-blogArticle__cate {
	margin-top: 1.5rem;
}

@media (max-width: 767px) {
	.blog__popular {
    width: calc(100vw - ((100vw - 100%) / 2));
		margin-top: 9.0rem;
    margin-left: 0rem;
	}
	.blog__aside.blog__aside__popular {
		margin-top: 0;
	}
	.blog__aside .blog__aside__head .head {
		font-size: 1.9rem;
	}
	.blog__popular .blog__popular__inner {
		padding-top: 2.0rem;
	}
	.blog__aside.blog__aside__popular .c-blogArticle {
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.blog__aside.blog__aside__popular .c-blogArticle > li {
		margin-bottom: 0;
	}

	.blog__aside.blog__aside__popular .c-blogArticle > li:last-child,
	.recommend__splide .c-blogArticle > li:last-child {
		padding-right: calc((100vw - 80%) / 3);
		box-sizing: content-box;
	}
}


/* ///////////////////////////////////////////////////////////
	一覧ページ
/////////////////////////////////////////////////////////// */

/* Mainコンテンツ
----------------------------------------------------------------- */
#blog .l-blog__main .blog__main__contents {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: clamp(3.5rem, 2.176rem + 3.53vw, 5rem);
}
#blog .l-blog__main .blog__main__contents > .c-blogArticle {
	width: calc(50% - (4.0rem / 2));
}
@media (max-width: 767px) {
	#blog .l-blog__main .blog__main__contents {
		flex-wrap: nowrap;
		flex-direction: column;
	}
}
#blog .l-blog__main .blog__main__link {
	display: flex;
	gap: 1.75rem 1.5rem;
	margin-top: clamp(6rem, 2.471rem + 9.41vw, 10rem);
}
#blog .l-blog__main .blog__main__link > a {
	font-size: 1.6rem;
	padding: 1.0rem 2.0rem;
	min-height: 5.0rem;
}
@media (max-width: 767px) {
	#blog .l-blog__main .blog__main__link {
		flex-direction: column;
	}
	#blog .l-blog__main .blog__main__link > a {
		min-height: 6.0rem;
	}
}

/* ページネーション
----------------------------------------------------------------- */
#blog .c-blog__pagenation {
	margin-top: clamp(5rem, 3.235rem + 4.71vw, 7rem);
}
#blog .c-blog__pagenation .pagenation {
	display: flex;
	column-gap: 4.0rem;
}
#blog .c-blog__pagenation .pagenation > li > a,
#blog .c-blog__pagenation .pagenation .pageNumbers > a {
	color: var(--light-gray-color);
	font-size: clamp(1.8rem, 1.624rem + 0.47vw, 2rem);
}
#blog .c-blog__pagenation .pagenation > .disabled {
	display: none;
}
#blog .c-blog__pagenation .pagenation > li:not(.pageNumbers) > a {
	padding-bottom: clamp(0rem, -0.441rem + 1.18vw, 0.5rem);
	border-bottom: 1px solid var(--light-gray-color);
	transition: color 0.5s ease, border-color 0.5s ease;
}
#blog .c-blog__pagenation .pagenation .pageNumbers > a {
	display: flex;
	justify-content: center;
	column-gap: 0.25em;
	pointer-events: none;
}
@media (max-width: 767px) {
	#blog .c-blog__pagenation .pagenation {
		display: grid;
		justify-content: center;
		column-gap: 5.0rem;
		grid-template-columns: 1fr 1fr 1fr;
	}
	#blog .c-blog__pagenation .pagenation > .prev {
		grid-column: 1 / 2;
		justify-self: flex-end;
	}
	#blog .c-blog__pagenation .pagenation .pageNumbers {
		grid-column: 2 / 3;
	}
	#blog .c-blog__pagenation .pagenation > .next {
		grid-column: 3 / 4;
		justify-self: flex-start;
	}
}

@media (min-width: 768px) {
	#blog .c-blog__pagenation .pagenation > li > a:hover {
		color: var(--main-color);
		border-color: var(--main-color);
	}
}
@media (max-width: 767px) {
	#blog .c-blog__pagenation .pagenation > li > a:hover {
		color: var(--main-color);
		border-color: var(--main-color);
	}
}


/* トップスライダー
----------------------------------------------------------------- */
#blog .blog__latest {
	padding-top: clamp(2.5rem, 0.735rem + 4.71vw, 4.5rem);
}
#blog .blog__latest hr {
	margin-top: clamp(3rem, 1.235rem + 4.71vw, 5rem);
}
#blog .blog__latest .top__splide .splide__slide .c-blogArticle__image {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 当社の取り組み
----------------------------------------------------------------- */
#blog .blog__initiatives {
	background-color: var(--white-color);
	padding-top: clamp(5rem, 2.353rem + 7.06vw, 8rem);
	padding-bottom: clamp(6.5rem, 5.176rem + 3.53vw, 8rem);
}
#blog .blog__initiatives .blog__initiatives__contents {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	column-gap: 3.0rem;
	row-gap: clamp(3.5rem, 2.176rem + 3.53vw, 5rem);
}
#blog .blog__initiatives .blog__initiatives__contents > .c-blogArticle {
	width: calc((100% - (3.0rem * 3)) / 4);
}

#blog .blog__bottom {
	padding-top: 6.0rem;
	padding-bottom: 10.0rem;
}
@media (max-width: 767px) {
	#blog .blog__bottom {
		padding: 0;
		background-color: var(--white-color);
	}
}

/* タグ
----------------------------------------------------------------- */
.blog__tags .blog__tags__head {
	margin-bottom: clamp(1.4rem, 0.694rem + 1.88vw, 2.2rem);
}
.blog__tags .blog__tags__head .head {
	font-weight: 700;
	display: flex;
	align-items: center;
	column-gap: 0.7rem;
}
.blog__tags .blog__tags__head .head > i {
	color: var(--accent-color);
}
.blog__tags .blog__tags__list > li {
	display: flex;
}
.blog__tags .blog__tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.3rem 1.0rem;
}


/* ///////////////////////////////////////////////////////////
	詳細ページ
/////////////////////////////////////////////////////////// */
@media (min-width: 768px) {
	#blogDetail {
		padding-bottom: 10.0rem;
	}
}
#blogDetail .l-blog__block {
	padding: clamp(7rem, 5.235rem + 4.71vw, 9rem) 0 8.0rem;
}
#blogDetail .blogDetail__article {
	min-width: auto;
	margin: 0;
}

/* blogDetail__head */
#blogDetail .blogDetail__head {
	position: relative;
}
#blogDetail .blogDetail__head .head {
	font-size: clamp(2.4rem, 1.694rem + 1.88vw, 3.2rem);
	font-weight: 600;
}
#blogDetail .blogDetail__head::before,
#blogDetail .blogDetail__head::after {
	content: "";
	position: absolute;
	bottom: -1.0rem;
	height: 1px;
	display: inline-block;
}
#blogDetail .blogDetail__head::before {
	width: 100%;
	background-color: rgba(47, 47, 47, 0.1);
}
#blogDetail .blogDetail__head::after {
	width: 7%;
	background-color: var(--accent-color);
}

/* blogDetail__top */
#blogDetail .blogDetail__top {
	margin-top: 3.5rem;
}
#blogDetail .blogDetail__top .blogDetail__top__info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	column-gap: 5.0rem;
}
#blogDetail .blogDetail__top .blogDetail__top__info .info__author {
	display: flex;
	align-items: center;
	column-gap: clamp(0.75rem, 0.529rem + 0.59vw, 1rem);
}
#blogDetail .blogDetail__top .blogDetail__top__info .info__author .image {
	width: 3.0rem;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--white-color);
	background-position: center;
	background-size: cover;
}
#blogDetail .blogDetail__top .blogDetail__top__info .date {
	font-size: 1.2rem;
}
#blogDetail .blogDetail__top .blogDetail__top__info .info__author .text {
	font-size: clamp(1.2rem, 1.024rem + 0.47vw, 1.4rem);
}
#blogDetail .blogDetail__top .blogDetail__top__catTag {
	display: flex;
	flex-wrap: wrap;
	gap: 1.0rem;
	margin-top: clamp(1.25rem, 0.853rem + 1.06vw, 1.7rem);
}
@media (max-width: 767px) {
	#blogDetail .blogDetail__top .blogDetail__top__info {
		justify-content: space-between;
		column-gap: 2.0rem;
	}
}


/* 記事内容
----------------------------------------------------------------- */
#blogDetail .blogDetail__main {
	margin-top: clamp(7.5rem, 7.059rem + 1.18vw, 8rem);
}

/* p */
#blogDetail .blogDetail__main p {
	font-size: 1.6rem;
	line-height: 2;
	margin-bottom: 2em;
}

/* a */
#blogDetail .blogDetail__main p a,
#blogDetail .blogDetail__main a {
	color: var(--accent-color);
	transition: text-decoration 0.5s ease;
}
@media (min-width: 768px) {
	#blogDetail .blogDetail__main p a:hover,
	#blogDetail .blogDetail__main a:hover {
		text-decoration: underline;
	}
}
@media (max-width: 767px) {
	#blogDetail .blogDetail__main p a:active,
	#blogDetail .blogDetail__main a:active {
		text-decoration: underline;
	}
}

/* h2 ~ h3 */
#blogDetail .blogDetail__main h2 {
	clear: both;
	font-size: clamp(2.1rem, 1.835rem + 0.71vw, 2.4rem);
	margin: 2.5em 0 1.7em;
	font-weight: 600;
}
#blogDetail .blogDetail__main h3 {
	clear: both;
	position: relative;
	font-size: clamp(1.8rem, 1.624rem + 0.47vw, 2rem);
	margin: 3em 0 1em;
	font-weight: 600;
	display: flex;
	align-items: center;
	column-gap: 0.5rem;
}
#blogDetail .blogDetail__main h3::before {
	content: "";
	width: clamp(1rem, 0.118rem + 2.35vw, 2rem);
	height: 1px;
	background-color: var(--accent-color);
}

/* em */
#blogDetail .blogDetail__main em {
	font-family: "游ゴシック", "游ゴシック体";
	font-weight: 500;
}

/* text-decoration: underline */
#blogDetail .blogDetail__main p span[style="text-decoration: underline;"] {
	text-decoration-color: var(--accent-color)!important;
	text-decoration-thickness: 2px!important;
}

/* figure */
/* #blogDetail .blogDetail__main figure {
	margin: 2rem;
} */

#blogDetail .blogDetail__main .wp-block-image:has(.alignleft) {
	display: flex;
	justify-content: flex-start;
}
#blogDetail .blogDetail__main .wp-block-image:has(.aligncenter) {
	display: flex;
	justify-content: center;
}
#blogDetail .blogDetail__main .wp-block-image:has(.alignright) {
	display: flex;
	justify-content: flex-end;
}
#blogDetail .blogDetail__main .wp-block-image .alignleft,
#blogDetail .blogDetail__main .wp-block-image .aligncenter,
#blogDetail .blogDetail__main .wp-block-image .alignright {
	float: none;
	margin: 0;
}

/* インラインコード */
#blogDetail .blogDetail__main p > code {
	background-color: var(--gray-color);
	padding: 2px 5px;
	border-radius: 5px;
	margin: 0 3px;
	font-family: "Noto Sans JP", sans-serif;
	word-wrap: break-word;
}

/* Index - 目次 */
/* #blogDetail .blogDetail__main .table-of-contents {
	background: #ffffff;
	border-radius: 5px;
	padding: 3.0rem;
	width: 100%;
}
#blogDetail .blogDetail__main .table-of-contents__title p {
	font-size: 14px;
	line-height: 1.6;
	font-weight: 700;
	text-align: center;
}
#blogDetail .blogDetail__main .table-of-contents__list ol {
	padding-inline-start: 1.5em;
}
#blogDetail .blogDetail__main .table-of-contents__list ol li {
	list-style-type: decimal;
	font-size: 14px;
	line-height: 1.6;
}
#blogDetail .blogDetail__main .table-of-contents__list ul {
	padding-inline-start: 1em;
}
#blogDetail .blogDetail__main .table-of-contents__list ul li {
	list-style-type: disc;
	font-size: 14px;
	line-height: 1.6;
} */

/* Index - 目次 */
#blogDetail .blogDetail__main #ez-toc-container {
	border-radius: 5px;
	border: none;
	padding: 3.0rem 5.0rem;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--white-color);
}
@media (max-width: 767px) {
	#blogDetail .blogDetail__main #ez-toc-container {
		padding: 2.0rem 2.5rem 3.0rem;
	}
}

#blogDetail .blogDetail__main .ez-toc-title-container {
	margin-bottom: clamp(1.5rem, 0.794rem + 1.88vw, 2.3rem);
}
#blogDetail .blogDetail__main .ez-toc-title-container .ez-toc-title  {
	color: var(--accent-color);
	font-size: 1.8rem;
	font-weight: 600;
}
#blogDetail .blogDetail__main .ez-toc-list a {
	color: var(--main-color);
}
#blogDetail .blogDetail__main .ez-toc-list a:visited {
	color: var(--main-color);
}
#blogDetail .blogDetail__main .ez-toc-list a:hover {
	color: var(--accent-color);
	text-decoration: none;
}
#blogDetail .blogDetail__main .ez-toc-list > li:not(:last-child) {
	margin-bottom: 2.0rem;
}
#blogDetail .blogDetail__main .ez-toc-list > li > ul {
	margin-top: 1.0rem;
	margin-left: 1.0em;
}
#blogDetail .blogDetail__main .ez-toc-list > li > ul > li {
	display: flex;
	align-items: center;
	column-gap: 5px;
	margin-bottom: 1.4rem;
}
#blogDetail .blogDetail__main .ez-toc-list > li > ul > li > a {
	font-weight: 400;
}
#blogDetail .blogDetail__main .ez-toc-list > li > ul > li::before {
	content: "";
	width: 1.0rem;
	height: 1px;
	background-color: var(--accent-color);
}
#blogDetail .blogDetail__main .ez-toc-list > li > ul > li:last-child {
	margin-bottom: 0;
}


/* バナー
----------------------------------------------------------------- */
#blogDetail .blogDetail__main .blog_banner {
	margin: 2.0rem 0;
}
#blogDetail .blogDetail__main .blog_banner > a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	column-gap: 3.0rem;
	padding: 3.0rem;
	position: relative;
}
#blogDetail .blogDetail__main .blog_banner > a:hover {
	text-decoration: none;
}
#blogDetail .blogDetail__main .blog_banner > a > h4 {
	color: #fff;
	font-size: 2.0rem;
	font-weight: 500;
	position: relative;
	z-index: 2;
}
#blogDetail .blogDetail__main .blog_banner > a > span {
	width: 1px;
	height: 2em;
	background-color: #fff;
	display: inline-block;
	position: relative;
	z-index: 2;
}
#blogDetail .blogDetail__main .blog_banner > a > p {
	color: #fff;
	margin-bottom: 0;
	letter-spacing: 0.15em;
	position: relative;
	z-index: 2;
}
#blogDetail .blogDetail__main .blog_banner > a > i {
	display: flex;
	border: 1px solid var(--white-color);
	border-radius: 50%;
	width: clamp(1.8rem, 0.741rem + 2.82vw, 3rem);
	height: auto;
	aspect-ratio: 1 / 1;
	position: absolute;
	right: clamp(1.75rem, 1.529rem + 0.59vw, 2rem);
	z-index: 2;
	overflow: hidden;
	transition: background-color 0.5s ease;
}
#blogDetail .blogDetail__main .blog_banner > a > i::before {
	content: '';
	position: absolute;
	width: 20%;
	height: 20%;
	border: 0.1rem solid var(--white-color);
	border-left: 0;
	border-bottom: 0;
	transform: rotate(45deg);
	top: 0;
	bottom: 0;
	right: 0;
	left: -2px;
	margin: auto;
	box-sizing: border-box;
	transition: left 0.3s ease, right 0.3s ease;
	transition: border-color 0.5s ease;
}

#blogDetail .blogDetail__main .blog_banner > a::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	mix-blend-mode: multiply;
	transition: opacity 0.5s ease;
}
#blogDetail .blogDetail__main .blog_banner.recruit_banner > a::before {
	background: linear-gradient(#F16A16, #F19716);
}
#blogDetail .blogDetail__main .blog_banner.bp_banner > a::before {
	background: linear-gradient(#1640F1, #16BEF1);
}
#blogDetail .blogDetail__main .blog_banner.strengths_banner > a::before {
	background: linear-gradient(#F116AE, #F116E0);
}

#blogDetail .blogDetail__main .blog_banner > a:hover > i {
	background-color: var(--white-color);
}
#blogDetail .blogDetail__main .blog_banner.recruit_banner > a:hover > i::before {
	border-color: var(--accent-color);
}
#blogDetail .blogDetail__main .blog_banner > a:hover::before {
	opacity: 1;
}
#blogDetail .blogDetail__main .blog_banner.bp_banner > a:hover > i::before {
	border-color: #1640F1;
}
#blogDetail .blogDetail__main .blog_banner.strengths_banner > a:hover > i::before {
	border-color: #F116E0;
}


@media (max-width: 767px) {
	#blogDetail .blogDetail__main .blog_banner > a {
		flex-direction: column;
		padding: 2.0rem;
	}
	#blogDetail .blogDetail__main .blog_banner > a > h4 {
		font-size: 1.8rem;
	}
	#blogDetail .blogDetail__main .blog_banner > a > span {
		width: 2em;
		height: 1px;
		margin: 0.6rem 0 1.0rem;
	}
	#blogDetail .blogDetail__main .blog_banner > a > p {
		font-size: min(3.15vw, 1.6rem);
		text-align: center;
	}
	#blogDetail .blogDetail__main .blog_banner > a > i {
		display: none;
	}
	#blogDetail .blogDetail__main .blog_banner > a > i::before {
		content: none;
	}
}
#blogDetail .blogDetail__main .blog_banner.recruit_banner > a {
	background-image: url(/wp/wp-content/themes/ios/common/img/banner_bg_recruit.png);
}
#blogDetail .blogDetail__main .blog_banner.bp_banner > a {
	background-image: url(/wp/wp-content/themes/ios/common/img/banner_bg_bp.png);
}
#blogDetail .blogDetail__main .blog_banner.strengths_banner > a {
	background-image: url(/wp/wp-content/themes/ios/common/img/banner_bg_strengths.png);
}


/* 記事外コンテンツ
----------------------------------------------------------------- */
/* blogDetail__connection */
#blogDetail .blogDetail__connection {
	margin-top: clamp(6.5rem, 4.294rem + 5.88vw, 9rem);
}
#blogDetail .blogDetail__connection__head {
	margin-bottom: 1.5rem;
}
#blogDetail .blogDetail__connection__head .head {
	font-size: 2.0rem;
	color: var(--accent-color);
}
#blogDetail .blogDetail__connection__list {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(1.5rem, 1.059rem + 1.18vw, 2rem);
}
#blogDetail .blogDetail__connection__list li {
	position: relative;
	width: calc(50% - (2.0rem / 2));
}
@media (max-width: 767px) {
	#blogDetail .blogDetail__connection__list li {
		width: 100%;
	}
}
#blogDetail .blogDetail__connection__list li::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 0.3rem;
	height: calc(100% / 3);
	display: inline-block;
	background-color: var(--accent-color);
}
#blogDetail .blogDetail__connection__list li > a {
	width: 100%;
	min-height: clamp(7.25rem, 5.706rem + 4.12vw, 9rem);
	padding: 2.0rem;
	box-sizing: border-box;
	background-color: var(--white-color);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.5s ease;
}
#blogDetail .blogDetail__connection__list li > a .image {
	height: 5.0rem;
	width: auto;
	aspect-ratio: 29 / 30;
	display: flex;
	margin-right: clamp(1rem, 0.118rem + 2.35vw, 2rem);
}
#blogDetail .blogDetail__connection__list li > a .icon {
	display: flex;
	background-color: var(--white-color);
	border: 1px solid var(--accent-color);
	border-radius: 50%;
	width: clamp(1.8rem, 0.741rem + 2.82vw, 3rem);
	height: auto;
	aspect-ratio: 1 / 1;
	position: absolute;
	right: clamp(1.75rem, 1.529rem + 0.59vw, 2rem);
	z-index: 2;
	overflow: hidden;
	transition: background-color 0.5s ease;
}
#blogDetail .blogDetail__connection__list li > a .icon::before {
	content: '';
	position: absolute;
	width: 20%;
	height: 20%;
	border: 0.1rem solid var(--accent-color);
	border-left: 0;
	border-bottom: 0;
	transform: rotate(45deg);
	top: 0;
	bottom: 0;
	right: 0;
	left: -2px;
	margin: auto;
	box-sizing: border-box;
	transition: left 0.3s ease, right 0.3s ease;
	transition: border-color 0.5s ease;
}
@media (min-width: 768px) {
	#blogDetail .blogDetail__connection__list li > a:hover {
		background-color: #FFF2DE;
	}
	#blogDetail .blogDetail__connection__list li > a:hover .icon {
		background-color: var(--accent-color);
	}
	#blogDetail .blogDetail__connection__list li > a:hover .icon::before {
		border-color: var(--white-color);
	}
}
@media (max-width: 767px) {
	#blogDetail .blogDetail__connection__list li > a:active {
		background-color: #FFF2DE;
	}
	#blogDetail .blogDetail__connection__list li > a:active .icon {
		background-color: var(--accent-color);
	}
	#blogDetail .blogDetail__connection__list li > a:active .icon::before {
		border-color: var(--white-color);
	}
}

/* blogDetail__bottom */
#blogDetail .blogDetail__bottom {
	margin-top: clamp(4rem, 3.559rem + 1.18vw, 4.5rem);
	clear: both;
}
#blogDetail .blogDetail__bottom .blogDetail__bottom__sns {
	display: flex;
	gap: 2.0rem;
	align-items: flex-start;
	justify-content: flex-end;
	margin-top: clamp(1.5rem, 1.059rem + 1.18vw, 2rem);
}

/* おすすめブログ
----------------------------------------------------------------- */
#blogDetail .blog__recommend {
	padding-top: clamp(2.5rem, 0.735rem + 4.71vw, 4.5rem);
}
#blogDetail .blog__recommend .blog__recommend__inner {
	max-width: calc(1120px + (2.0rem * 2));
	width: 100%;
	padding: 0 2.0rem;
	margin: 0 auto;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	#blogDetail .blog__recommend {
		margin-bottom: 5.0rem;
	}
	#blogDetail .blog__recommend .blog__recommend__inner {
		padding: 0;
		padding-left: calc((100% - 80%) / 2);
	}
}


/* ///////////////////////////////////////////////////////////
共通
/////////////////////////////////////////////////////////// */
#blogDetail .blogDetail__main > .hcb_wrap.hcb_wrap {
	margin-top: 0;
}
#blogDetail .blogDetail__main > .hcb_wrap.hcb_wrap>pre, #blogDetail .blogDetail__main > .hcb_wrap.hcb_wrap>pre>code {
	background-color: var(--gray-color);
}
#blogDetail .blogDetail__main > .hcb_wrap>pre:before {
	background-color: var(--light-gray-color);
}

.sns_facebook > iframe,
.sns_twitter > iframe {
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
}
.sns_facebook > iframe:hover,
.sns_twitter > iframe:hover {
	opacity: 0.5;
}

#banner {
	min-width: 980px;
}
@media (max-width: 767px) {
	#banner {
		min-width: auto;
	}
}


/* スライダー -- 共通
----------------------------------------------------------------- */
.splide .splide__slide {
	display: flex;
	flex-flow: column;
	flex-direction: column;
}
.splide .splide__slide > a {
	display: flex;
	flex-flow: column;
	flex-direction: column;
	flex: 1;
}

/* ページネーション */
.splide .splide__pagination {
	position: relative;
	bottom: 0;
	margin-top: clamp(3rem, 1.235rem + 4.71vw, 5rem);
	column-gap: clamp(1.5rem, 1.059rem + 1.18vw, 2rem);
}
.splide .splide__pagination__page {
	background-color: var(--light-gray-color);
	margin: 0;
	opacity: 1;
	width: 5px;
	height: 5px;
}
.splide .splide__pagination__page.is-active {
	background-color: var(--accent-color);
	transform: none;
}
.splide .splide__arrow {
	background-color: var(--white-color);
	opacity: 1;
	width: 3.0rem;
	height: 3.0rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
}

/* top__splide */
.blog__latest .top__splide .top__splide__arrow {
	top: calc(clamp(20rem, 10.647rem + 24.94vw, 30.6rem) / 2);
}
.blog__latest .top__splide .top__splide__arrow.top__splide__prev {
	left: calc((50% - 1.5rem) - (clamp(30rem, 15.882rem + 37.65vw, 46rem) / 2));
}
.blog__latest .top__splide .top__splide__arrow.top__splide__next {
	right: calc((50% - 1.5rem) - (clamp(30rem, 15.882rem + 37.65vw, 46rem) / 2));
}

/* recommend__splide */
.blog__recommend .recommend__splide .recommend__splide__arrow {
	top: 10rem;
}
.blog__recommend .recommend__splide .recommend__splide__arrow.recommend__splide__prev {
	left: -1.5rem;
}
.blog__recommend .recommend__splide .recommend__splide__arrow.recommend__splide__next {
	right: -1.5rem;
}
@media (max-width: 767px) {
	.blog__recommend .recommend__splide .recommend__splide__arrow.recommend__splide__next {
		right: 1.5rem;
	}
}

/* popular__splide */
.blog__popular .popular__splide .popular__splide__arrow {
	top: 10rem;
}
.blog__popular .popular__splide .popular__splide__arrow.popular__splide__prev {
	left: -1.5rem;
}
.blog__popular .popular__splide .popular__splide__arrow.popular__splide__next {
	right: -1.5rem;
}
@media (max-width: 767px) {
	.blog__popular .popular__splide .popular__splide__arrow.popular__splide__next {
		right: 1.5rem;
	}
}