@charset "UTF-8";

/*
---------------------------------------
一覧
---------------------------------------
*/
.blog.list .page-header::before {
	content: '';
	position: absolute;
  	right: max(calc((100vw - 1200px) / 2 - -39px),20px);
  	top: 357px;
	display: block;
	width: min(12.34vw,153px);
	height: auto;
	aspect-ratio: 153 / 235;
	background: url(../img/blog/main_img.png) center / contain no-repeat;
  	transform: translateY(-50%);
}

.blog-list-container {
	margin-top: 8rem;
	padding: 0 20px;
}

.blog-list-container .inner {
	background: #fff;
	border-radius: 15px;
	padding: 5rem;
}

.blog .cat-nav {
	width: 100%;
	margin-bottom: 8rem;
}

.blog .cat-nav-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1rem;
	width: 100%;
	height: auto;
}

.blog .cat-nav-list .cat-item a {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 10rem;
	height: 4rem;
	background: #ebebeb;
	border-radius: 40px;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	padding: 0 2rem;
	transition: .2s;
}

.blog .cat-nav-list .cat-item a:hover {
	background-color: #e74921;
	color: #fff;
}

.blog .cat-nav-list .cat-item.current a {
	background-color: #222;
	color: #fff;
	pointer-events: none;
}

.blog .cat-nav-list .cat-item.all a {
	min-width: 7.7rem;
}

.blog-box-ul {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 4rem 4rem
}

.blog-box-li a {
	display: block;
	width: 100%;
	height: 100%;
	background: #f7f7f7;
	transition: .2s;
}

.blog-box-li a:hover {
	background: #fff;
	box-shadow: 0 0 40px rgba(0,0,0,.1);
}

.blog-box-li .img {
	width: 100%;
}

.blog-box-li .img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 340 / 227;
	object-fit: cover;
}

.blog-box-li .img img.default {
	border: solid 1px #ebebeb;
}

.blog-box-li .txt {
	position: relative;
	padding: 3.2rem 3rem 2.6rem;
}

.blog-box-li .category {
	position: absolute;
	left: 0;
	top: -2rem;
	display: block;
	background: #0f91ce;
	border-radius: 0 36px 36px 0;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	padding: .4rem 1.4rem;
	z-index: 1;
}

.blog-box-li .ttl {
	font-size: 1.8rem;
	line-height: calc(32/18);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: .2s;
}

.blog-box-li a:hover .ttl {
	text-decoration-color: rgba(0,0,0,0);
}

.blog-box-li .date {
	color: #e94b08;
	font-size: 1.4rem;
	font-weight: 500;
	font-family: "Outfit", sans-serif;
	letter-spacing: .1em;
	line-height: 1.5;
	margin-top: .9rem;
	text-align: right;
}

.blog.list .wp-pagenavi a:hover {
    background-color: #e74921;
    border-color: #e74921;
}

@media screen and (max-width: 960px) {
	.blog-list-container {
		margin-top: 14rem;
	}

	.blog-list-container .inner {
		padding: 5rem 20px;
	}
}
@media screen and (max-width: 750px) {
	.blog.list .page-header::before {
        top: 67.8vw;
		right: 1.25vw;
		width: 13.9vw;
	}

	.blog-list-container {
		position: relative;
		margin-top: 30px;
		padding: 0;
	}

	.blog-list-container .inner {
		border-radius: 0;
		padding: 30px 0 40px;
	}

	.blog .cat-nav {
		width: 100%;
		margin-bottom: 30px;
	}

	.blog .cat-nav-list {
		position: relative;
		flex-wrap: nowrap;
		gap: 8px;
		width: auto;
		overflow-x: scroll;
		padding: 5px 20px;
	}

	.blog .cat-nav-list::before {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		display: block;
		width: 40px;
		height: 100%;
		background: linear-gradient(to right, transparent, #fff);
		transition: .2s;
		pointer-events: none;
	}

	.blog .cat-nav-list.is-scroll::before {
		opacity: 0;
	}

	.blog .cat-nav-list .cat-item a {
		min-width: 80px;
		height: 32px;
		font-size: 12px;
		padding: 0 15px;
		white-space: nowrap;
	}

	.blog .cat-nav-list .cat-item.all a {
		min-width: 62px;
	}

	.blog-box-ul {
		grid-template-columns: 1fr;
		gap: 25px;
		padding: 0 20px;
	}

	.blog-box-li .txt {
		padding: 29px 25px 23px;
	}

	.blog-box-li .category {
		top: -16px;
		font-size: 12px;
		padding: 4px 14px;
	}

	.blog-box-li .ttl {
		font-size: 16px;
		line-height: calc(52.87/32);
	}

	.blog-box-li .date {
		font-size: 12px;
		margin-top: 11px;
	}
}

/*
---------------------------------------
詳細
---------------------------------------
*/

.blog-header {
	padding: 120px 20px 0;
}

.blog-header .inner {
	position: relative;
	padding: 2.5rem 0 0;
}

.blog-header::before {
	content: '';
	position: absolute;
	right: 0;
	top: -40px;
	display: block;
	width: 23.32vw;
	height: auto;
	aspect-ratio: 793 / 822;
	background: url(../img/blog/single-header-bg.png) right top / contain no-repeat;
}

.blog-header .breadcrumbs {
	display: flex;
	width: 100%;
	overflow: hidden;
}

.blog-header .breadcrumbs span {
	font-family: "Outfit", "Zen Kaku Gothic New", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.blog-header .breadcrumbs span.breadcrumb_last {
	margin-left: 1rem;
}


.blog-header .breadcrumbs .fa {
	display: inline-block;
	width: 20px;
	height: 1px;
	font-size: 0;
	background: #aaa;
	margin-left: 12px;
	vertical-align: 5px;
}

.blog-header .breadcrumbs a {
	color: #e74921;
}

.blog-header .ttl {
	font-size: 4.2rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: calc(64/42);
	margin-top: 4.6rem;
	text-align: center;
}

.blog-header .meta-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.8rem;
	margin-top: 2rem;
}

.blog-header .meta-info .cat-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.blog-header .meta-info .cat-list li a {
	display: flex;
	align-items: center;
	height: 4rem;
	background: #e74921;
	border: solid 1px #e74921;
	border-radius: 5px;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0;
	padding: 0 2rem;
	transition: .2s;
}

.blog-header .meta-info .cat-list li a:hover {
	background: #fff;
	color: #e74921;
}

.blog-header .meta-info .date-wrap {
	display: flex;
	align-items: center;
	color: #777;
	font-size: 1.5rem;
	line-height: 1.5;
}

.blog-header .meta-info .date {
	font-family: "Outfit", sans-serif;
	letter-spacing: .1em;
}

.blog-header .meta-info .note {
	margin-left: 1em;
}

.blog-main {
	margin-top: 7rem;
	margin-bottom: 15rem;
	padding: 0 20px;
}

.blog-main .article {
	position: relative;
	z-index: 1;
}

.blog-main .article::before,
.blog-main .article::after {
	content: '';
	position: absolute;
	display: block;
	z-index: -1;
}

.blog-main .article::before {
	top: 0;
	right: min(77.7vw,calc(50% + 47.1rem));
	width: min(21.35vw, 36.3rem);
	height: auto;
	aspect-ratio: 363 / 349;
	background: url(../img/blog/deco1.png) center / contain no-repeat;
	transform: translateY(-40%);
}

.blog-main .article::after {
	top: 50%;
	right: -16rem;
	width: min(19.35vw, 32.9rem);
	height: auto;
	aspect-ratio: 329 / 293;
	background: url(../img/blog/deco2.png) center / contain no-repeat;
	transform: translateY(-50%);
}

.blog-main .post-content {
	background: #fff;
	border-radius: 15px;
	padding: 7rem 5rem 5.6rem;
	z-index: 0;
}

.blog-main .share {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.2rem;
	margin-top: 2.8rem;
}

.blog-main .share .ttl {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5;
}

.blog-main .share .ttl::after {
	content: '';
	display: block;
	width: 5rem;
	height: 1px;
	background: #e74921;
}

.blog-main .share .addtoany_list {
	display: flex;
	gap: 1rem;
}

.blog-main .share .addtoany_list img {
	display: block;
	transition: .3s
}

.blog-main .share .addtoany_list a:hover img {
	transform: scale(1.2);
}

.blog-main .sec-staff {
	margin-top: 7rem;
}

.blog-main .sec-staff::before {
	bottom: unset;
    top: -212px;
    right: min(72vw, calc(50vw + 348px));
}

.blog-main .sec-staff .staff-ttl {
	border-radius: 5px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
}

.blog-main .sec-staff .staff-box-ul {
	padding: 2.8rem 7rem 2.8rem 7rem;
}

.blog-main .sec-staff .staff-box-li {
	align-items: center;
}

.blog-main .single-post-nav {
	margin-top: 5.8rem;
}

.sec-related {
	margin-top: 7rem;
	padding: 0 20px;
}

.sec-related .related-ttl {
	position: relative;
	padding: 8rem 0 0;
	z-index: 0;
}

.sec-related .related-ttl::before {
	content: 'RELATED';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	color: #fff;
	font-family: "Outfit", sans-serif;
	font-size: 16rem;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1;
	text-align: center;
	z-index: -1;
}

.sec-related .related-ttl .en {
	color: #e74921;
	font-family: "Outfit", sans-serif;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.5;
	margin-bottom: .8rem;
	text-align: center;
}

.sec-related .related-ttl .ja {
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.sec-related .blog-box-ul {
	margin-top: 4rem;
	gap: 5.8rem;
}

.sec-related .blog-box-li a {
	background: #fff;
}

.sec-related .blog-box-li a:hover {
	background-color: #f7f7f7;
}

.sec-related .blog-box-li .ttl {
	text-decoration: none;
}

@media screen and (max-width: 960px) {
	.blog-main {
		margin-top: 10rem;
	}
}

@media screen and (max-width: 750px) {
	.blog-header {
		padding-top: 0;
	}
	
	.blog-header .inner {
		padding-top: 26.66vw;
	}

	.blog-header::before {
        top: -41px;
        right: -81px;
        background: url(../img/home/bg_obj01_sp.png) no-repeat;
        background-size: 100%;
        width: 203px;
        height: 152px;
	}

	.blog-header .breadcrumbs span {
		font-size: 12px;
	}

	.blog-header .breadcrumbs .fa {
		width: 16px;
		height: 1px;
		margin-left: 12px;
		vertical-align: 5px;
	}

	.blog-header .ttl {
		font-size: 24px;
		line-height: calc(34/24);
		margin-top: 25px;
		text-align: left;
	}

	.blog-header .meta-info {
		justify-content: flex-start;
		gap: 16px;
		margin-top: 15px;
	}

	.blog-header .meta-info .cat-list {
		gap: 10px;
	}

	.blog-header .meta-info .cat-list li a {
		height: 35px;
		border-radius: 2.5px;
		font-size: 14px;
		padding: 0 19px;
	}

	.blog-header .meta-info .date,
	.blog-header .meta-info .note {
		font-size: 14px;
	}

	.blog-header .meta-info .note {
		margin-left: 10px;
	}

	.blog-main {
		margin-top: 35px;
		margin-bottom: 84px;
		padding: 0;
	}

	.blog-main .article::before,
	.blog-main .article::after {
		display: none;
	}

	.blog-main .post-content {
		border-radius: 0;
		padding: 35px 20px 38px;
	}

	.blog-main .share {
		justify-content: center;
		gap: 10px;
		margin-top: 20px;
		padding: 0 25px 0 20px;
	}

	.blog-main .share .ttl {
		gap: 7.5px;
		font-size: 12px;
	}

	.blog-main .share .ttl::after {
		width: 37.5px;
	}

	.blog-main .share .addtoany_list {
		gap: 9px;
	}

	.blog-main .share .addtoany_list img {
		width: 35px;
		height: 35px;
	}

	.blog-main .sec-staff {
		margin-top: 50px;
	}

	.blog-main .sec-staff::before {
		display: none;
	}

	.blog-main .sec-staff .staff-ttl {
		border-radius: 2.5px;
	}

	.blog-main .sec-staff .staff-box-ul {
		padding: 44px 24px 20px 24px;
	}

	.blog-main .sec-staff .staff-box-li {
		align-items: stretch;
	}

	.blog-main .single-post-nav {
		margin-top: 40px;
	}

	.sec-related {
		margin-top: 70px;
		padding: 0;
	}

	.sec-related .related-ttl {
		padding-top: 22px;
	}

	.sec-related .related-ttl::before {
		font-size: 70px;
	}

	.sec-related .related-ttl .en {
		font-size: 14px;
		margin-bottom: 2px;
	}

	.sec-related .related-ttl .ja {
		font-size: 24px;
	}

	.sec-related .blog-box-ul {
		margin-top: 24px;
		padding: 0;
	}

	.sec-related .blog-box-li {
		margin: 0 40px;
	}

	.sec-related .slick-track {
		display: flex;
		align-items: stretch;
		margin: auto;
	}


	.sec-related .slick-arrow {
		width: 35px;
		height: 35px;
		background: #222;
		border-radius: 50%;
		transform: translateY(-50%);
		z-index: 1;
	}

	.sec-related .slick-arrow::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		background: #fff;
		mask: url(../img/common/arrow-right2.svg) center / 21px no-repeat;
		opacity: 1;
	}

	.sec-related .slick-prev {
		left: 20px;
	}

	.sec-related .slick-prev::before {
		transform: rotate(180deg);
	}

	.sec-related .slick-next {
		right: 20px;
	}

	.sec-related .slick-dots {
		width: 100%;
		bottom: -40px;
	}

	.sec-related .slick-dots li {
		width: 24px;
		height: 24px;
		margin: 0 1px;
	}

	.sec-related .slick-dots li button {
		position: relative;
		display: block;
		width: 24px;
		height: 24px;
	}

	.sec-related .slick-dots li button:before {
		top: 50%;
		left: 50%;
		width: 7px;
		height: 7px;
		background: #aaa;
		transform: translate(-50%,-50%);
	}

	.sec-related .slick-dots li.slick-active button::before {
		background-color: #e74921;
	}

}

/*
---------------------------------------
エディタのコンテンツ
---------------------------------------
*/
.post-content > *:first-child {
	margin-top: 0 !important;
}
.post-content > *:last-child {
	margin-bottom: 0 !important;
}
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content ul,
.post-content ol,
.post-content table,
.post-content blockquote,
.post-content p,
.post-content .linkcard {
	clear: both;
}

.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5 {
	position: relative;
	font-weight: 500;
	line-height: 1.5;
}

.post-content .ez-toc-section {
	position: absolute;
	top: -1rem;
}

.post-content p {
	font-size: 1.7rem;
	letter-spacing: 0;
	margin-bottom: 2em;
}

.post-content a {
	color: #e74921;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.post-content h2 {
    border: solid 3px #222;
    border-width: 3px 0;
	font-size: 2.8rem;
	margin: 7rem 0 3rem;
	padding: 2.8rem 3rem;
	text-align: center;
}

.post-content h2::before {
	content: '';
	position: absolute;
	left: 2.2rem;
	top: -4.1rem;
	display: block;
	width: 10.2rem;
	height: auto;
	aspect-ratio: 102 / 71;
	background: url(../img/common/form-illust.png) center / contain no-repeat;
}

.post-content h2::after {
    content: '';
	position: absolute;
	bottom: -3.5px;
	right: 5rem;
	display: block;
	width: 24px;
	height: 4px;
	background: #fff radial-gradient(circle at center, #222 1.5px, transparent 1.5px) center / 8px 3px repeat-x;
	border: solid #fff;
	border-width: 0 8px;
	text-align: center;
}

.post-content h3 {
	font-size: 2.4rem;
	margin: 4.7rem 0 3rem;
	padding: 2.5rem 0;
}

.post-content h3::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, #ed4628 5rem, #e5e5e5 5rem) center / 100% no-repeat;
}

.post-content h4 {
	border-left: solid 4px #ed4628;
	font-size: 2.2rem;
	margin: 7.5rem 0 2.4rem;
	padding: .8rem 0 .8rem 2.7rem;
}

.post-content h5 {
	color: #e74921;
	font-size: 2rem;
	margin: 8.2rem 0 2.8rem;
}

.post-content img {
	display: block;
	max-width: 70%;
	height: auto;
	margin: auto;
}

.post-content img.alignleft,
.post-content img.alignright {
	width: 300rem;
	max-width: 48%;
	margin-top: .8rem;
}

.post-content img.alignleft {
	float: left;
	margin-right: 4%;
}

.post-content img.alignright {
	float: right;
	margin-left: 4%;
}

.post-content img.aligncenter {
	clear: both;
	margin: 0 auto 4rem;
}

.post-content .w_b_box img {
	max-width: 100%;
}

.post-content ol,
.post-content ul {
	margin: 6.9rem 0;
}

.post-content ol li,
.post-content ul li {
	position: relative;
	font-size: 1.7rem;
	letter-spacing: 0;
	line-height: 1.5;
}

.post-content ol li + li,
.post-content ul li + li {
	margin-top: .85em
}

.post-content ol {
	counter-reset: ol-c;
}

.post-content ol li {
	counter-increment: ol-c;
	padding-left: 1.6em;
}

.post-content ol li::before {
	content: counter(ol-c) ".";
	position: absolute;
	left: -.4rem;
	top: 0;
	color: #e74921;
	letter-spacing: 0.08em;
}

.post-content ul li {
	padding-left: 1em;
}

.post-content ul li::before {
	content: "";
	position: absolute;
	top: 1.1rem;
	left: -.2rem;
	display: block;
	width: .6rem;
	height: .6rem;
	background: #ed4628;
	border-radius: 50%;
}

.post-content blockquote {
	position: relative;
	background: #fcf8f5;
	border-radius: 15px;
	letter-spacing: .08em;
	margin: 8rem 0;
	padding: 4.6rem 5rem 4.2rem;
}

.post-content blockquote::before {
	content: "";
	position: absolute;
	top: -.8rem;
	left: 3rem;
	display: block;
	width: 2.4rem;
	height: 1.7rem;
	background: url(../img/blog/quote.svg) center/contain no-repeat;
}

.post-content blockquote p:last-child {
	margin-bottom: 0;
}

.post-content blockquote cite {
	font-size: 1.4rem;
	color: #555;
}

.post-content table {
	width: 100%;
	border-radius: 10px 10px 0 0;
	margin: 7rem 0;
	overflow: hidden;
}

.post-content table th,
.post-content table td {
	height: 7rem;
	min-height: 7rem;
	font-size: 1.7rem;
	padding: 10px;
	text-align: center;
	vertical-align: middle;
}

.post-content table thead td,
.post-content table th {
	background: #e74921;
	color: #fff;
	font-weight: 700;
	line-height: 1.5;
}

.post-content table tbody td {
	border: solid 1px #ebebeb;
	font-weight: 500;
}

.post-content strong {
	background: #fff952;
	font-weight: 700;
}

.post-content em {
	font-style: italic;
}

@media screen and (max-width: 750px) {
	.post-content .ez-toc-section {
		top: -20px;
	}

	.post-content h2,
	.post-content h3,
	.post-content h4,
	.post-content h5 {
		font-weight: 700;
	}

	.post-content p {
		font-size: 14px;
		line-height: calc(26/14);
		margin-bottom: 1.2em;
	}

	.post-content h2 {
		width: calc(100% + 40px);
		border-width: 1.5px 0;
		font-size: 18px;
		margin: 50px -20px 22px;
		padding: 22.5px 20px;
	}

	.post-content h2::before {
		left: 20px;
		top: -32px;
		width: 77px;
	}

	.post-content h2::after {
		bottom: -1.75px;
		right: 23px;
		width: 12px;
		height: 2px;
		background: #fff radial-gradient(circle at center, #222 0.75px, transparent 0.75px) center / 4px 1.5px repeat-x;
		border-width: 0 4px;
	}

	.post-content h2 .ez-toc-section {
		top: -40px;
	}
	
	.post-content h3 {
		font-size: 18px;
		margin: 38px 0 22px;
		padding: 0 0 22px;
	}

	.post-content h3::after {
		height: 2px;
		background-image: linear-gradient(to right, #ed4628 25px, #e5e5e5 25px);
	}

	.post-content h4 {
		border-width: 2.5px;
		font-size: 17px;
		margin: 42px 0 17px;
		padding: 2.5px 0 2.5px 20px;
	}

	.post-content h5 {
		font-size: 16px;
		line-height: calc(25/16);
		margin: 37px 0 18px;
	}

	.post-content img {
		display: block;
		max-width: 100%;
	}

	.post-content img.alignleft,
	.post-content img.alignright {
		width: auto;
		max-width: 100%;
		margin: 0 auto 10px;
	}

	.post-content img.alignleft {
		float: none;
		margin-right: auto;
	}
	.post-content img.alignright {
		float: none;
		margin-left: auto;
	}

	.post-content img.aligncenter {
		margin-bottom: 10px;
	}

	.post-content ol,
	.post-content ul {
		margin: 40px 0;
	}

	.post-content ol li,
	.post-content ul li {
		font-size: 14px;
		line-height: calc(24/14);
	}

	.post-content ol li + li,
	.post-content ul li + li {
		margin-top: 13px
	}

	.post-content ol li {
		padding-left: 20px;
	}

	.post-content ol li::before {
		left: 0;
		font-family: "Outfit", sans-serif;
	}

	.post-content ul li {
		padding-left: 15px;
	}

	.post-content ul li::before {
        top: 11px;
        left: 0px;
        width: 4px;
        height: 4px;
	}

	.post-content blockquote {
		border-radius: 7.5px;
		margin: 45px 0 40px;
		padding: 26px 25px 26px;
	}

	.post-content blockquote::before {
		top: -9px;
		left: 10px;
		width: 24px;
		height: 17px;;
	}

	.post-content blockquote cite {
		font-size: 12px;
	}

	.post-content .table-wrap {
		position: relative;
		width: calc(100% + 40px);
		margin: 50px -20px 50px;
		padding-bottom: 10px;
	}

	.post-content .table-wrap:has(.table-scrollable)::after {
		content: '';
		position: absolute;
		right: 10px;
		top: -37.5px;
		display: block;
		width: 60px;
		height: 57px;
		background: url(../img/blog/finger.png) center / contain no-repeat;
		opacity: 0;
		pointer-events: none;
		animation: swipe-finger 1.5s linear 0s infinite;
	}

	.post-content .table-wrap:has(.table-scrollable).scrolled::after {
		animation: none;
	}

	@keyframes swipe-finger {
		0% {
			transform: translateX(0);
			opacity: 0;
		}

		30% {
			opacity: 1;
		}

		60% {
			opacity: 0;
			transform: translateX(-40px);
		}

		100% {
			transform: translateX(0);
		}
	}

	.table-scrollable {
		width: 100%;
		overflow-x: scroll;
	}

	.post-content table {
		width: auto !important;
		min-width: 100%;
		border-radius: 0;
		margin: 0;
	}

	.post-content table th,
	.post-content table td {
		width: auto !important;
		min-width: 150px;
		height: 50px;
		min-height: 50px;
		font-size: 14px;
	}
}



/* aqt */

.post-content .comment-box {
	margin: 0 0 8rem;
}

.post-content .comment-box .flex,
.prof-box .flex {
	display: flex;
	align-items: center;
}

.post-content .comment-box p,
.post-content .comment-box figure,
.post-content .prof-box p,
.post-content .prof-box figure {
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
}

.post-content .comment-box figure p,
.post-content .prof-box figure p {
	display: none;
}

.post-content .comment-box .img {
	width: 110px;
	padding-right: 30px !important;
}

.post-content .comment-box .img img {
	width: 80px !important;
	height: 80px !important;
	object-fit: cover;
	border-radius: 50%;
}

.post-content .comment-box .img figcaption {
	text-align: center;
	font-size: 14px;
	line-height: 2;
	margin-top: 2px;
}

.post-content .comment-box .txt {
	width: calc( 100% - 110px );
	border-left: solid 1px #ddd;
	padding: 10px 0 10px 30px;
}

.post-content .prof-box {
	background: #F5F5F5;
	padding: 30px;
	margin-bottom: 3rem;
	border-radius: 10px;
}

.post-content .prof-box .img {
	width: 110px;
	padding-right: 20px !important;
}

.post-content .prof-box .img img {
	width: 90px !important;
	height: 90px !important;
	object-fit: cover;
	border-radius: 50%;
}

.post-content .prof-box .ttl {
	width: calc( 100% - 110px );
	font-size: 16px;
	font-weight: bold;
}

.post-content .prof-box .txt {
	margin-top: 20px;
}

.post-content .color {
	color: #5791DB;
	font-weight: bold;
}

.post-content .marker {
	font-weight: bold;
	padding: 2px;
	background: linear-gradient( transparent 60%, #FFFF8D 60% );
}

.post-content .eoc-btn {
	margin: 4rem 0;
	text-align: center;
}

.post-content .eoc-btn p {
	text-align: center;
}

.post-content .eoc-btn:has(a[href="#eoc-contents"]) {
	display: none; /* 登録はできないようにしておく */
}

.post-content .eoc-btn a {
	text-decoration: none;
	color: #333;
	display: inline-block;
	background: #F9E621 url( ../img/common/arrow-down.svg ) right 20px center / 12px no-repeat !important;
	font-size: 1.8rem;
	letter-spacing: 1px;
	line-height: 1.5;
	font-weight: bold;
	padding: 11.5px 52px 11.5px 30px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	position: relative;
	transition: all .2s;
}

.post-content .eoc-btn a strong {
	color: #ea2828 !important;
}

.post-content .prof-box .share {
	display: none;
}

.post-content .aqt-ttl-02{
	position: relative;
	margin: 51px 0 35px;
	font-size: 100%;
}

.post-content .aqt-ttl-02::before{
	content: "";
	position: absolute;
	top: 5px;
    left: 0px;
    width: 22px;
    height: 18px;
    background: url(../img/interview/double-quotes.png) center/cover no-repeat;
	z-index: 2;
}

.post-content .aqt-ttl-02::after{
	content: "";
	position: absolute;
	top: 17px;
    right: 0;
    width: 100%;
    height: 1px;
    background: #e5e5e5;

}

.post-content .aqt-ttl-02 span{
	position: relative;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .04em;
    background: #fff;
    padding: 0 20px 0 30px;
    z-index: 1;
}

@media screen and (max-width: 1300px){
	.aqt-ttl-02::before {
		left: 0;
		z-index: 2;
	}
}

@media screen and (max-width: 750px) {
	.comment-box {
		margin: 0 0 4rem;
	}

	.comment-box .flex,
	.prof-box .flex {
		display: flex;
	}

	.comment-box .img {
		width: 80px;
		padding-right: 20px !important;
	}

	.comment-box .img img {
		width: 60px !important;
		height: 60px !important;
	}

	.comment-box .txt {
		width: calc( 100% - 80px );
		padding: 0 0 0 20px;
	}

	.comment-box .txt p,
	.prof-box .txt p {
		font-size: 1.4rem;
	}

	.prof-box {
		padding: 2rem;
	}

	.prof-box .img {
		width: 85px;
		padding-right: 15px !important;
	}

	.prof-box .img img {
		width: 70px !important;
		height: 70px !important;
	}

	.prof-box .ttl {
		width: calc( 100% - 85px );
	}

	.prof-box .txt {
		margin-top: 10px;
	}

	.aqt-ttl-02{
		margin: 15px 0 19px;
	}

	.aqt-ttl-02 span{
		display: inline-block;
		font-size: 16px;
    	padding: 0 0 0 25px;
	}

	.aqt-ttl-02::before{
		top: 4px;
		left: 3px;
		width: 13px;
		height: 11px;
	}

	.aqt-ttl-02::after{
		display: none;
	}
}


/* toc */
#ez-toc-container {
	position: relative;
	background: #f7f7f7;
	border-radius: 15px;
	margin-top: 6rem;
	padding: 5rem 3.5rem 4.8rem;
}

.ez-toc-title-container {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15.7rem;
	height: 3.8rem;
	background: url(../img/blog/toc-ttl-icon.png) center / contain no-repeat;
	margin: auto;
	padding-bottom: .3rem;
	transform: translateY(-40%);
}

.ez-toc-title-container p {
	color: #fff;
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: .08em;
	margin: 0;
}

#ez-toc-container ul {
	counter-reset: toc;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

#ez-toc-container ul.ez-toc-list {
	padding-left: 0;
}

#ez-toc-container ul li {
	margin-top: 2.3rem;
	padding-left: 5rem;
}

#ez-toc-container ul li::before {
	display: none;
}

.ez-toc-list a {
	counter-increment: toc;
	position: relative;
	display: block;
	color: #222;
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.5;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ez-toc-list a::before {
	content: counters(toc, ".");
	position: absolute;
	top: .2em;
	left: 0;
	display: inline-block;
	height: 1em;
	color: #e74921;
	font-family: "Outfit", sans-serif;
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1;
}

.ez-toc-list a:hover::after {
	display: none;
}

#ez-toc-container nav > ul > li {
	margin-top: 0 !important;
	padding-left: 0 !important;
}

#ez-toc-container nav > ul > li > a {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 0 rgba(0,0,0,.05);
	font-size: 1.8rem;
	padding: 2.15rem 6.4rem;
	text-decoration: none;
}

#ez-toc-container nav > ul > li > a::before {
	content: counter(toc)".";
	top: 0;
	bottom: 0;
	left: 2.9rem;
	margin: auto;
	transform: none;
}

#ez-toc-container nav > ul > li > a::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 2.5rem;
	left: unset;
	display: block;
	width: 2.2rem;
	height: 1.4rem;
	background: #b3b3b3;
	mask: url(../img/common/chevron-down.svg) center / contain no-repeat;
	margin: auto;
	opacity: 1;
	transform: none;
}

#ez-toc-container nav > ul > li > a:hover::after {
	display: block;
	transform: none;
}

#ez-toc-container nav > ul > li + li {
	margin-top: 3.9rem !important;
}

#ez-toc-container nav > ul > li > ul {
	padding-left: 1.5rem;
}

#ez-toc-container nav > ul > li > ul > li > a {
	padding-left: 3em;
}

#ez-toc-container nav > ul > li > ul > li > ul > li a {
	padding-left: 4em;
}

@media screen and (max-width: 750px) {
	#ez-toc-container {
		width: calc(100% + 40px);
		border-radius: 0;
		margin: 42px -20px 0;
		padding: 35px 20px 32px;
	}

	.ez-toc-title-container {
		width: 118px;
		height: 29px;
		transform: translateY(-50%);
	}

	.ez-toc-title-container p {
		font-size: 14px;
	}

	#ez-toc-container ul li {
		margin-top: 15px;
		padding-left: 0 !important;
	}

	.ez-toc-list a {
		font-size: 14px;
		text-underline-offset: 2px;
	}

	.ez-toc-list a::before {
		font-size: 18px;
	}

	#ez-toc-container nav > ul > li > a {
		min-height: 7rem;
		box-shadow: 0 1px 0 rgba(0,0,0,.05);
		font-size: 14px;
		padding: 16px 45px;
	}

	#ez-toc-container nav > ul > li > a::before {
		width: auto;
		left: 18px;
	}

	#ez-toc-container nav > ul > li > a::after {
		right: 20px;
		width: 16px;
		height: 10px;
	}

	#ez-toc-container nav > ul > li + li {
		margin-top: 27px;
	}

	#ez-toc-container nav > ul > li > ul {
		padding-left: 18px;
	}

	#ez-toc-container nav > ul > li > ul > li > a,
	#ez-toc-container nav > ul > li > ul > li > ul > li a {
		padding-left: 51px;
	}
}



/* linkcard */

.post-content .linkcard {
	width: 100%;
	margin: 3rem 0;
}

.post-content .lkc-internal-wrap,
.post-content .lkc-external-wrap {
	width: 100%;
}

.post-content .lkc-link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	background: #fcf8f5;
	border: solid 2px #fcf8f5;
	border-radius: 15px;
	color: #222;
	text-decoration: none;
	transition: 0.3s;
}

.post-content .lkc-link::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	display: block;
	background: #e74921;
	margin: auto;
}

.post-content .lkc-link:hover {
	background: #fff;
	border-color: #e74921;
}

.post-content .lkc-internal-wrap .lkc-link::after {
	right: 2.8rem;
	width: 1.4rem;
	height: 2.2rem;
	mask: url(../img/common/icon_flow_arrow.png) center / contain no-repeat;
}
.post-content .lkc-external-wrap .lkc-link::after {
	right: 2.5rem;
	width: 2.3rem;
	height: 2.3rem;
	mask: url(../img/common/external-link.svg) center / contain no-repeat;
}

.post-content .lkc-info {
	display: none;
}

.post-content .lkc-content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 19.6rem;
	padding: 2.9rem 6rem 2.9rem 29.6rem;
}

.post-content .lkc-content::after {
	content: "";
	display: block;
	clear: both;
}

.post-content .lkc-thumbnail,
.post-type-information .lkc-thumbnail {
	position: absolute;
	top: 2.9rem;
	left: 4rem;
	width: 21.3rem;
	height: 14.2rem;
}

.post-content .lkc-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-content .lkc-title-text,
.post-content .lkc-url,
.post-content .lkc-excerpt {
	max-width: 64rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: none;
}

.post-content .lkc-title {
	font-size: 2.1rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.5;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: .3s;
}

.post-content .lkc-link:hover .lkc-title {
	text-decoration-color: rgba(0,0,0,0);
}

.post-content .lkc-url {
	color: #e74921;
	font-family: "Outfit", sans-serif;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.5;
	margin-top: 1.2rem;
}

.post-content .lkc-excerpt {
	font-size: 1.6rem;
	letter-spacing: 0.08em;
	line-height: 1.5;
	margin-top: 2.5rem;
}

@media screen and (max-width: 750px) {
	.post-content .linkcard {
		margin: 25px 0;
	}

	.post-content .lkc-link {
		border: none;
		border-radius: 7.5px;
	}

	.post-content .lkc-link::after {
		display: none;
	}

	.post-content .lkc-content {
		display: block;
		height: auto;
		padding: 26px 25px 23px;
	}

	.post-content .lkc-thumbnail,
	.post-type-information .lkc-thumbnail {
		position: static;
		width: 100%;
		max-width: 285px;
		height: auto;
		aspect-ratio: 570 / 380;
		margin: 0 auto 14px;
	}

	.post-content .lkc-title-text,
	.post-content .lkc-url,
	.post-content .lkc-excerpt {
		max-width: unset;
	}

	.post-content .lkc-title-text {
		width: 100%;
		font-size: 16px;
		white-space: normal;
	}


	.post-content .lkc-title-text::after {
		content: '';
		display: inline-block;
		width: 13px;
		height: 13px;
		background: #e74921;
		vertical-align: middle;
	}

	.post-content .lkc-internal-wrap .lkc-title-text::after {
		mask: url(../img/common/icon_flow_arrow.png) center / contain no-repeat;
		margin-left: .2em;
		vertical-align: -1px;
	}

	.post-content .lkc-external-wrap .lkc-title-text::after {
		mask: url(../img/common/external-link.svg) center / contain no-repeat;
		margin-left: .35em;
		vertical-align: 0;
	}

	.post-content .lkc-url {
		font-size: 12px;
		font-weight: 500;
		margin-top: 14px;
	}

	.post-content .lkc-excerpt {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		width: 100%;
		font-size: 12px;
		line-height: calc(21/12);
		margin-top: 10px;
		white-space: normal;
	}

}


/*
---------------------------------------
ポップアップバナー
---------------------------------------
*/
.modal-banner {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999999999;
}

.modal-banner-cont {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 800px;
	width: 47.6%;
	text-align: center;
}

.btn-modal-banner-close {
	position: absolute;
	top: -20px;
	right: -20px;
	cursor: pointer;
	width: 50px;
	height: auto;
	aspect-ratio: 1 / 1;
	line-height: 1;
	background: #0b1334;
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
	z-index: 10;
}

.btn-modal-banner-close:hover {
	background: #fff;
}

.btn-modal-banner-close > svg {
	fill: #fff;
	width: 22px;
	height: auto;
	aspect-ratio: 1 / 1;
	transition: all 0.33s ease;
}

.btn-modal-banner-close:hover > svg {
	fill: #0b1334;
}

.modal-banner-cont a {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all ease 0.33s;
	position: relative;
	z-index: 0;
	overflow: hidden;
}
.modal-banner-cont a::before {
	position: absolute;
	top: 0;
	left: -30%;
	z-index: 2;
	display: block;
	content: "";
	width: 12%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.modal-banner-cont a:hover::before {
	-webkit-animation: shine 0.75s;
	animation: shine 0.75s;
}

.modal-banner-cont img {
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 750px) {
	.modal-banner-cont {
		max-width: 640px;
		min-width: 300px;
		width: 85.3%;
	}

	.btn-modal-banner-close {
		width: 40px;
	}

	.btn-modal-banner-close > svg {
		width: 16px;
	}
}