@charset "UTF-8";

/* =====================================================
目次（この順番でファイル内に記述されています）

FOUNDATION
  reset / root / base / layout
GENERIC COMPONENTS（全ページ共通の汎用パーツ）
  component / breadcrumb / page-header / category-filter / pagination
SITE CHROME（全ページ共通のヘッダー・フッター）
  header / footer / product / product-card
HOME（index.html専用）
  hero / guide / guide-card
PICKUP SLIDER（注目コンテンツのスライダー）
  pickup / pickup-card（index.html・interview.html）
  event-pickup / event-pickup-card（event.html）
  whitepaper-pickup / whitepaper-pickup-card（whitepaper.html）
CONTENT CARDS（homeのプレビュー＋各一覧ページ両方で使用）
  column / column-card
  event / event-card
  interview / interview-card
  whitepaper / whitepaper-card
ARCHIVE / LIST PAGES（一覧ページ共通パーツ）
  column-archive（column.html） / event-archive（event.html）
  interview-archive（interview.html） / whitepaper-archive（whitepaper.html）
  event-filter（event.html専用）
DETAIL PAGES（column-detail.html / event-detail.html / interview-detail.html / whitepaper-detail.html）
  article-head / article-layout / article-head__event-meta
  event-detail / event-form-iframe / article-body / article-side / related
  ※4種とも同じコンポーネントを共用し、色や見出し等は各要素の--column/--event/--interview/--whitepaperで出し分ける
UTILITY
  u-sp / u-pc などの汎用ユーティリティクラス
===================================================== */

/* =====================================================
reset
===================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
figure {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

iframe {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea,
select {
	font: inherit;
}

button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	appearance: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* =====================================================
root
===================================================== */

:root {
	--color-text: #000;
	--color-text2: #333;
	--color-text3: #3e3e3e;
	--color-text4: #4b4b4b;
	--color-text5: #151515;
	--color-main: #196CBA;
	--color-dark: #3e3e3e;
	--color-gray: #8e8e8e;

	--color-column: #0D9786;
	--color-event: #9035B9;
	--color-interview: #0096DC;
	--color-whitepaper: #FF9D00;

	--content-width: calc(1240px + 4rem);
	--header-width: 180rem;

	--header-height: 8rem;

	--z-header: 100;
	--z-drawer: 200;
	--z-modal: 300;
	--z-loading: 400;

	--transition: 0.3s ease;
}

/* =====================================================
base
===================================================== */

body {
	min-width: 320px;
	font-family: "Noto Sans", "Noto Sans JP", sans-serif;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.75;
	color: var(--color-text);
	background-image: url(../img/common/bg-border.png);
	/* background-color: #fff; */
	background-repeat: repeat;
	background-size: 100% 100%;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;

}

main {
	display: block;
}

p,
a,
li,
td,
th {
	overflow-wrap: anywhere;
}

input,
textarea,
select {
	border-radius: 0;
}

textarea {
	resize: vertical;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (max-width: 768px) {
	body {
		background-size: 230% 100%;
	}
}

/* =====================================================
layout
===================================================== */

.inner {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

@media (max-width: 768px) {
	.inner {
		padding-inline: 1.6rem;
	}
}


/* =====================================================
   GENERIC COMPONENTS — 全ページ共通で使う汎用パーツ
===================================================== */

/* =====================================================
component
===================================================== */

.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 6rem;
	padding-inline-start: 3.2rem;
	padding-inline-end: 5.2rem;
	font-size: clamp(1.4rem, 1.32rem + 0.25vw, 1.8rem);
	font-weight: 700;
	text-align: center;
	border: 1px solid currentColor;
	transition:
		background-color var(--transition),
		color var(--transition),
		border-color var(--transition),
		opacity var(--transition);
}

.button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%);
	width: 1.8rem;
	height: 1.2rem;
	background-color: currentColor;
	clip-path: polygon(0% 42%, 70% 42%, 70% 0%, 100% 50%, 70% 100%, 70% 58%, 0% 58%);
}

.button--contact {
	background: var(--color-main);
	color: #fff;
	border-color: var(--color-main);
}

.button--white {
	background-color: #fff;
}

.button--dark {
	background: var(--color-dark);
	color: #fff;
	border-color: var(--color-dark);
}

@media (hover: hover) {
	.button:hover {
		opacity: .7;
	}
}

@media (max-width: 768px) {
	.button::after {
		right: 1.5rem;
		width: 1.5rem;
		height: 1rem;
	}
}

.more-link {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	font-size: clamp(1.5rem, 1.44rem + 0.1875vw, 1.8rem);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .3rem;
	transition: all .3s;
}

.more-link::after {
	content: "";
	flex-shrink: 0;
	width: 1.4rem;
	height: .93rem;
	background-color: currentColor;
	clip-path: polygon(0% 42%, 70% 42%, 70% 0%, 100% 50%, 70% 100%, 70% 58%, 0% 58%);
}

@media (hover: hover) {
	.more-link:hover {
		opacity: .7;
	}
}

.section-label {
	font-family: "Noto Sans", sans-serif;
	font-size: clamp(1.2rem, 1.12rem + 0.25vw, 1.6rem);
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--color-main) !important;
}

.badge {
	display: inline-block;
	font-family: "Noto Sans", sans-serif;
	font-weight: 700;
	color: #fff;
}

.section-heading {
	font-family: "Noto Sans JP", sans-serif;
	margin-top: 1.2rem;
	font-size: clamp(2.5rem, 1.72rem + 2.125vw, 5.6rem);
	font-weight: 700;
}

.section-heading span {
	color: var(--color-main);
}

.card-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4rem 3.5%;
}
.card {
	width: 100%;
	max-width: calc((100% - 7%) / 3);
	border-radius: 1rem;
	overflow: hidden;
	backdrop-filter: blur(10px) brightness(100%);
	background: rgba(255, 255, 255, .65);
	box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.16);
}
.card__body {
	padding: 3rem;
	border: 1px solid #fff;
	border-radius: 0 0 1rem 1rem;
	border-top: none;
}
.card__body .badge {
	padding: .2rem 2rem;
	font-size: clamp(1.3rem, 1.24rem + 0.1875vw, 1.6rem);
	border-radius: 6px;
	letter-spacing: 0.05em;
}
.card__image {
	transition: all .3s;
}

.card__thumb {
	position: relative;
}

.card__date {
	font-size: clamp(1.1rem, 1.06rem + 0.125vw, 1.3rem);
	color: #777;
}

.card__title {
	margin-top: 1.2rem;
	padding-bottom: 1.6rem;
	font-size: clamp(1.6rem, 1.52rem + 0.25vw, 2rem);
	font-weight: 600;
	line-height: 1.6;
	border-bottom: 1px solid #CFD0D1;
	color: var(--color-text5);
}
.card__title span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.card__tags {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-top: 1rem;
}

.card__tags::before {
	content: "";
	width: 1.8rem;
	height: 1.8rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.card__tag {
	font-size: clamp(1.2rem, 1.16rem + 0.125vw, 1.4rem);
	color: var(--color-text3);
	font-weight: 600;
}

.card__tag:not(:last-child) {
	padding-right: 1.2rem;
	border-right: 1px solid var(--color-text3);
}

.card__icon::before {
	content: "";
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.card__thumb-badge {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6rem;
	height: 3rem;
	padding: .4rem;
	font-size: clamp(1.3rem, 1.24rem + 0.1875vw, 1.6rem);
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	text-align: center;
	border-radius: 1rem 0 1rem 0;
}

@media (max-width: 950px) {
	.card-list {
		gap: 4rem 3.5%;
	}

	.card {
		width: 100%;
		max-width: calc((100% - 3.5%) / 2);
	}
}

@media (max-width: 768px) {
	.card-list {
		gap: 3rem;
	}
	.card {
		max-width: 100%;
	}
	.section-heading {
		line-height: 1.5;
		margin-top: 1rem;
	}
	.card__body {
		padding: 2rem;
	}
	.card__body .badge {
		padding: .2rem 1rem;
		font-size: clamp(1rem, 0.98rem + 0.0625vw, 1.1rem);
	}

	.card__date {
		margin-left: auto;
	}

	.card__body-sp {
		display: flex;
		align-items: center;
		gap: 15px;
		border-bottom: 1px solid #CFD0D1;
	}
	.card__body-sp .card__title{
		flex: 1;
		border: none;
	}
	.card__body-sp .card__thumb {
		flex: 0 0 70px;
		width: 70px;
	}
}

/* =====================================================
breadcrumb
===================================================== */

.breadcrumb {
	padding-block: .8rem;
	background-color: rgb(228, 240, 253, .6);
}

.breadcrumb__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: clamp(1.1rem, 1.26rem + 0.125vw, 1.6rem);
	font-weight: 500;
	color: var(--color-text3);
}

.breadcrumb__item:not(:last-child)::after {
	content: ">";
	margin-inline: .8rem;
}

.breadcrumb__item a {
	color: var(--color-main);
	border-bottom: 1px solid var(--color-main);
	transition: border-color var(--transition), opacity var(--transition);
}

@media (hover: hover) {
	.breadcrumb__item a:hover {
		opacity: .7;
		border-color: transparent;
	}
}

@media (max-width: 768px) {
	.breadcrumb {
		padding-block: .6rem;
	}
	.breadcrumb__list {
		font-size: clamp(1.1rem, 1rem + 0.125vw, 1.6rem);
	}
	.breadcrumb__item:not(:last-child)::after {
		margin-inline: .4rem;
	}
}

/* =====================================================
page-header
===================================================== */

/*
 * 下層ページ共通クラス。装飾画像（page-header__deco）はこの要素を基準に配置するため、
 * page-header側の高さ（コンテンツ量）に左右されない。
 */
.inner-page {
	position: relative;
	color: var(--color-text3);
}

.inner-page .page-header {
	margin-bottom: 5.5rem;
}

.page-header__deco {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: 50%;
	max-width: 73rem;
	pointer-events: none;
}

.page-header__inner {
	position: relative;
	z-index: 2;
	padding-block: 4rem;
}

.page-header__label {
	padding-left: .8rem;
}

.page-header__heading {
	font-size: clamp(3.7rem, 2.32rem + 2.75vw, 7.6rem);
	margin-top: 0;
}

.page-header__lead {
	margin-top: 2rem;
	font-size: clamp(1.5rem, 0.86rem + 0.87vw, 3rem);
	font-weight: 600;
	color: var(--color-text);
}

@media (max-width: 768px) {
	.page-header__inner {
		padding-block: 4rem 0;
	}

	.page-header__lead {
		margin-top: 1.2rem;
	}

	.inner-page .page-header {
		margin-bottom: 5rem;
	}
}

/* =====================================================
category-filter
===================================================== */

.category-filter {
	margin-bottom: 12rem;
	padding: 4rem;
	border-radius: 1rem;
	backdrop-filter: blur(10px) brightness(100%);
	background: rgba(255, 255, 255, .65);
	box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.16);
}

.category-filter__head {
	display: flex;
	align-items: center;
	gap: .8rem;
	font-size: clamp(2rem, 1.85rem + 0.39vw, 2.6rem);
	font-weight: 700;
}

.category-filter__head img {
	width: 2.8rem;
}

.category-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.6rem;
}

.category-filter__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 12rem;
	padding: .7rem 2rem;
	font-size: clamp(1rem, 1.3rem + 0.125vw, 1.6rem);
	font-weight: 700;
	color: var(--color-text3);
	background: #fff;
	border: 1px solid var(--color-gray);
	border-radius: 6px;
	transition: all var(--transition);
	line-height: 1;
}

.category-filter__item.is-active {
	color: #fff;
	background: var(--color-main);
	border-color: var(--color-main);
}

.category-filter__actions {
	display: flex;
	align-items: center;
	gap: 2.4rem;
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid #CFD0D1;
}

.category-filter__submit {
	min-height: 5.2rem;
	padding-inline-start: 2.8rem;
	padding-inline-end: 4.8rem;
	border-radius: 999px;
}

.category-filter__clear {
	font-size: clamp(1.2rem, 1.16rem + 0.125vw, 1.4rem);
	font-weight: 700;
	color: var(--color-text3);
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all .3s;
}
.category-filter__clear img {
	display: block;
}
.category-filter__clear span {
	display: inline-block;
	font-size: clamp(1.2rem, 1.28rem + 0.25vw, 1.8rem);
	color: var(--color-gray);
	text-decoration: underline;
	transition: 0.3s;
}

@media (hover: hover) {
	.category-filter__item:hover {
		color: #fff;
		background: var(--color-main);
		border-color: var(--color-main);
	}

	.category-filter__clear:hover {
		opacity: .7;
	}
}

@media (max-width: 768px) {
	.category-filter {
		padding: 2rem 1.5rem;
		margin-bottom: 5rem;
	}

	.category-filter__head img {
		width: 2.2rem;
	}

	.category-filter__list {
		gap: .6rem;
	}

	.category-filter__list li {
		width: calc((100% - 1.8rem) / 4);
	}

	.category-filter__item {
		padding: .6rem .4rem;
		min-width: unset;
		width: 100%;
		font-size: clamp(1rem, 1rem + 0.125vw, 1.6rem);
	}

	.category-filter__actions {
		align-items: stretch;
		gap: 1.6rem;
	}

	.category-filter__submit {
		font-size: clamp(1.2rem, 1.2rem + 0.25vw, 1.8rem);
		padding-inline: 2rem 4rem;
		min-height: 4.2rem;
	}

	.category-filter__clear {
		text-align: center;
	}
}

/* =====================================================
pagination
===================================================== */

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.4rem;
	margin-top: 8rem;
}

.pagination__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.6rem;
}

.pagination__link,
.pagination__ellipsis {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 4rem;
	height: 4rem;
	padding-inline: .4rem;
	font-size: clamp(1.3rem, 1.08rem + 0.58vw, 2.2rem);
	font-weight: 500;
	color: var(--color-text3);
	border-radius: 50%;
	transition: all var(--transition);
}

.pagination__link {
	background: #EDEDED;
}

.pagination__ellipsis {
	padding-bottom: .6rem;
	color: var(--color-gray);
}

.pagination__link.is-current {
	color: #fff;
	background: var(--color-main);
}

.pagination__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.6rem;
	height: 3.6rem;
	transition: opacity var(--transition);
}

.pagination__arrow img {
	width: 2.1rem;
}

.pagination__arrow:disabled,
.pagination__arrow.is-disabled {
	opacity: .3;
	pointer-events: none;
}

@media (hover: hover) {
	.pagination__link:hover:not(.is-current) {
		color: #fff;
		background: var(--color-main);
	}

	.pagination__arrow:hover {
		opacity: .6;
	}
}

@media (max-width: 768px) {
	.pagination {
		margin-top: 4rem;
		gap: .8rem;
	}

	.pagination__list {
		gap: .4rem;
	}

	.pagination__link,
	.pagination__ellipsis,
	.pagination__arrow {
		min-width: 3.2rem;
		width: 3.2rem;
		height: 3.2rem;
		font-size: 1.3rem;
	}
}


/* =====================================================
   SITE CHROME — 全ページ共通のヘッダー／フッター
===================================================== */

/* =====================================================
header
===================================================== */

.header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: #fff;
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.4rem;
	max-width: var(--header-width);
	height: var(--header-height);
	margin-inline: auto;
	padding-inline: 2rem;
	border-bottom: 1px solid #F7F7F7;
}

.header__logo {
	flex-shrink: 0;
}

.header__logo img {
	width: 100%;
	max-width: 20rem;
}

.header__nav {
	display: flex;
	align-items: center;
	gap: 3.2rem;
	margin-left: auto;
}

.header__menu {
	display: flex;
	gap: 3.2rem;
}

.header__menu a {
	font-size: clamp(1.5rem, 1.44rem + 0.1875vw, 1.8rem);
	font-weight: 700;
	border-bottom: 1px solid transparent;
	transition: color var(--transition), border-color var(--transition);
}

.header__item.is-current a {
	color: var(--color-main);
	border-bottom-color: var(--color-main);
}

@media (hover: hover) {
	.header__item a:hover {
		color: var(--color-main);
		border-bottom-color: var(--color-main);
	}
}

.header__contact {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: clamp(20rem, 18.8rem + 3.75vw, 26rem);
	justify-content: center;
	border-radius: 30px;
}
.header__trigger-wrap {
	display: none;
	width: 4rem;
	height: 4rem;
	border-radius: 999px;
	box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.16);
	backdrop-filter: blur(10px) brightness(100%);
}

.header__trigger {
	display: none;
	position: relative;
	width: 100%;
	height: 100%;
	flex-shrink: 0;
}

.header__trigger-line {
	position: absolute;
	left: 50%;
	width: 50%;
	height: 3px;
	background: var(--color-text);
	transition: transform var(--transition);
	transform: translateX(-50%);
}

.header__trigger-line:nth-child(1) {
	top: 37%;
}
.header__trigger-line:nth-child(2) {
	top: 60%;
}

.is-nav-open .header__trigger-line:nth-child(1) {
	top: 50%;
	transform: translateX(-50%) rotate(45deg);
}

.is-nav-open .header__trigger-line:nth-child(2) {
	top: 50%;
	transform:  translateX(-50%) rotate(-45deg);
}

@media (max-width: 1120px) {
	.header__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		inset: var(--header-height) 0 0 0;
		margin-left: 0;
		padding: 4rem 2rem;
		background: #fff;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-1rem);
		transition:
			opacity var(--transition),
			visibility var(--transition),
			transform var(--transition);
	}

	.header__menu {
		flex-direction: column;
		gap: 2.4rem;
		text-align: center;
	}

	.header__contact {
		flex: 0 0 auto;
		min-height: 4.4rem;
		padding-inline: 1.6rem;
		margin-left: 0;

		display: none;
	}

	.header__trigger-wrap {
		display: block;
	}

	.header__trigger {
		display: block;
	}

	.is-nav-open .header__nav {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.is-nav-open {
		overflow: hidden;
	}
}

/* =====================================================
footer
===================================================== */

.footer {
	margin-block: 10rem 0;
	padding-block: 7rem 8rem;
	background: var(--color-dark);
	color: #fff;
	position: relative;
	border-radius: 5vw 5vw 0 0;
}

.footer__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 4rem;
}

.footer__top {
	padding-block: 8rem 4rem;
	border-top: 1px solid #707070;
}
.footer__brand {
	display: flex;
	align-items: center;
	gap: 6rem;
}
.footer__logo {
	display: inline-block;
	max-width: 700px;
	width: 48%;
}

.footer__lead {
	font-size: clamp(1.5rem, 0.86rem + 0.87vw, 3rem);
	font-weight: 600;
	line-height: 1.8;
	flex: 1;
}

.footer__group {
	margin-top: 5rem;
}

.footer__group-title {
	font-size: clamp(2rem, 1.33rem + 0.87vw, 3rem);
	font-weight: 600;
	letter-spacing: .05em;
}

.footer__group-title::first-letter {
	color: var(--color-main);
}

.footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-top: 1.6rem;
	font-size: clamp(1.2rem, 1.3rem + 0.3125vw, 2rem);
	font-weight: 600;
}

.footer__list a {
	border-bottom: 1px solid var(--color-dark);
	transition: all .3s;
}

.footer__item:not(:last-child) {
	padding-right: 2.5rem;
	border-right: 1px solid rgba(255, 255, 255, .4);
}
.footer__link {
	display: flex;
	gap: 6rem;
}
.footer__link .footer__group {
	max-width: calc(50% - 3rem);
	width: 50%;
}

.footer__copyright {
	margin-top: 4rem;
	padding-top: 2.4rem;
	font-size: clamp(1.5rem, 1.44rem + 0.1875vw, 1.8rem);
	text-align: right;
	border-top: 1px solid #707070;
}

@media (hover: hover) {
	.footer__list a:hover {
		opacity: .7;
		border-color: #fff;
	}
}

@media (max-width: 768px) {
	.footer {
		margin-top: 3rem;
		padding-block: 5rem 2rem;
	}
	.footer__inner {
		padding-inline: 2rem;
	}

	.footer__top {
		padding-block: 4rem;
	}

	.footer__copyright {
		margin: 0;
		text-align: center;
	}

	.footer__brand {
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
	}
	.footer__logo {
		width: 100%;
	}
	.footer__link .footer__group {
		margin-top: 3rem;
	}
	.footer__item:not(:last-child) {
		border-right: none;
		padding-right: 0;
	}
}

/* =====================================================
product
===================================================== */

.product {
	padding-block: 0 10rem;
	color: #fff;
}

.product__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 4rem;
}

.product__label {
	color: #fff !important;
}

.product__heading {
	line-height: 1.5;
}

.product__accent {
	color: #4da3e8;
}

.product__text {
	margin-top: 2.4rem;
	font-size: clamp(1.5rem, 1.25rem + 0.39vw, 2rem);
	line-height: 1.8;
}

.product__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6rem;
	margin-top: 4rem;
}

@media (max-width: 768px) {
	.product {
		padding-block: 0;
	}
	.product__inner {
		padding-inline: 1.8rem;
	}
}

/* =====================================================
product-card
===================================================== */

.product-card {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: calc((100% - 6rem) / 2);
	background: #fff;
	border-radius: 1rem;
}

.product-card__body {
	padding: 3.2rem;
	flex: 1;
}

.product-card__logo {
	width: auto;
	max-width: 100%;
	height: 6.5rem;
}

.product-card__logo.__02 {
	height: 7.2rem;
}

.product-card__text {
	margin-top: 1.6rem;
	font-weight: 600;
	font-size: clamp(1rem, 1.2rem + 0.3125vw, 2rem);
	color: var(--color-text);
}

.product-card__link {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 6rem;
	background: var(--color-column);
	border-radius: 0 1rem 1rem 0;
	color: #fff;
}

.product-card__link::after {
	content: "";
	width: 1.6rem;
	height: 1.07rem;
	background-color: currentColor;
	clip-path: polygon(0% 42%, 70% 42%, 70% 0%, 100% 50%, 70% 100%, 70% 58%, 0% 58%);
}

.product-card--blue .product-card__link {
	background: #1A7AA7;
}

@media (hover: hover) {
	.product-card__link:hover {
		opacity: .7;
	}
}

@media (max-width: 768px) {
	.product__list {
		gap: 2rem;
		padding-bottom: 4rem;
	}
	.product-card {
		max-width: 100%;
	}
	.product-card__body {
		padding: 1.8rem;
	}
	.product-card__link {
		width: 4rem;
	}

	.product-card__link::after {
		width: 1.3rem;
		height: .87rem;
	}

	.product-card__logo {
		height: 4rem;
	}

	.product-card__logo.__02 {
		height: 5rem;
	}

}


/* =====================================================
   HOME (index.html) 専用セクション
===================================================== */

/* =====================================================
hero
===================================================== */

.hero {
	position: relative;
}

.hero__image {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	pointer-events: none;
}

.hero__image img {
	width: 100%;
	height: auto;
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-block: 20rem 15rem;
	padding-inline: 2rem;
}

.hero__content {
	width: 100%;
	max-width: 80rem;
}

.hero__label {
	font-size: clamp(1.2rem, 1.12rem + 0.25vw, 1.6rem);
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--color-main);
}

.hero__title {
	font-size: clamp(3.7rem, 2.32rem + 2.75vw, 7.6rem);
	font-weight: 700;
	line-height: 1.4;
}

.hero__accent {
	color: var(--color-main);
}

.hero__lead {
	margin-top: 3.4rem;
	font-size: clamp(1.7rem, 1.12rem + 1.1875vw, 3.4rem);
	font-weight: 700;
	line-height: 1.75;
}

.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin-top: 4rem;
}

.hero__button {
	min-height: 5.6rem;
	padding-inline-start: 2.8rem;
	padding-inline-end: 4.8rem;
	font-size: clamp(1rem, 1.23rem + 0.125vw, 1.5rem);
	border-radius: 999px;
}

@media (max-width: 768px) {
	.hero__inner {
		padding-block: 312px 3rem;
	}

	.hero__content {
		max-width: 100%;
	}

	.hero__title {
		margin-top: 1.2rem;

	}

	.hero__lead {
		margin-top: 1rem;
	}

	.hero__buttons {
		margin-top: 3.2rem;
		gap: 1rem;
		flex-wrap: nowrap;
	}

	.hero__button {
		min-height: auto;
		width: 48%;
		padding: .8rem 2.8rem .8rem 2rem;
	}
	.hero__button::after {
		right: 1rem;
	}
}

/* =====================================================
guide
===================================================== */

.guide {
	padding-block: 5rem;
	overflow: hidden;
}

.guide__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
	position: relative;
}

.guide__inner .guide-circle {
	max-width: 500px;
	width: 40%;
	position: absolute;
	top: -1%;
	right: -17%;
	animation: rotate 20s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.guide__label {
	color: var(--color-main);
}

.guide__heading {
	line-height: 1.5;
}

.guide__text {
	margin-top: 2.4rem;
	max-width: 90rem;
	font-size: clamp(1.4rem, 1.52rem + 0.25vw, 2rem);
	line-height: 1.8;
	color: var(--color-text3);
	font-weight: 600;
}

.guide__note {
	margin-top: .8rem;
	font-size: clamp(.8rem, 1.16rem + 0.125vw, 1.4rem);
	color: var(--color-text3);
}

.guide__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6rem;
	margin-top: 4rem;
}

@media (max-width: 768px) {
	.guide {
		padding-block: 4rem;
	}

	.guide__list {
		margin-top: 3.2rem;
		gap: 3rem;
	}
	.guide__inner .guide-circle {
		max-width: 500px;
		width: 70%;
		position: absolute;
		top: 0;
		right: -18%;
	}
}

/* =====================================================
guide-card
===================================================== */

.guide-card {
	position: relative;
	width: 100%;
	max-width: calc(50% - 3rem);
	padding: 3rem 4rem;
	overflow: hidden;
	border-radius: 1rem;
	box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.16);
	backdrop-filter: blur(10px) brightness(100%);
	background: rgba(255, 255, 255, .65);
}

.guide-card__badge {
	padding: .2rem 3rem;
	font-size: clamp(1.3rem, 1.24rem + 0.1875vw, 1.6rem);
	border-radius: 6px;
	letter-spacing: 0.05em;
}

.guide-card__badge--column {
	background: var(--color-column);
}

.guide-card__badge--event {
	background: var(--color-event);
}

.guide-card__badge--interview {
	background: var(--color-interview);
}

.guide-card__badge--whitepaper {
	background: var(--color-whitepaper);
}

.guide-card__title {
	margin-top: 1.3rem;
	font-size: clamp(1.8rem, 1.7rem + 0.625vw, 3rem);
	font-weight: 700;
}

.guide-card__text {
	margin-top: 1rem;
	max-width: 35rem;
	font-size: clamp(1.5rem, 1.4rem + 0.3125vw, 2rem);
	color: var(--color-text5);
}

.guide-card__button {
	min-width: 24rem;
	margin-top: 2.4rem;
	min-height: 5.2rem;
	padding-inline-start: 2.4rem;
	padding-inline-end: 4.4rem;
	font-size: clamp(1.4rem, 1.32rem + 0.25vw, 1.8rem);
	border-radius: 999px;
}

.guide-card__icon {
	position: absolute;
	right: 2rem;
	bottom: 2.4rem;
	z-index: -1;
}
.guide-card__icon._01 {
	max-width: 122px;
	width: 24%;
}
.guide-card__icon._02 {
	max-width: 133px;
	width: 26%;
}
.guide-card__icon._03 {
	max-width: 160px;
	width: 31%;
}
.guide-card__icon._04 {
	max-width: 157px;
	width: 30%;
}

@media (max-width: 768px) {
	.guide-card {
		max-width: 100%;
		padding: 2rem;
	}

	.guide-card__text {
		max-width: 22rem;
		margin-top: 0.5rem;
		font-size: clamp(1.2rem, 1.2rem + 0.3125vw, 2rem);
	}

	.guide-card__icon {
		width: 8rem;
	}
	.guide-card__button {
		min-width: 19rem;
		margin-top: 2rem;
		min-height: 4rem;
		font-size: clamp(1.2rem, 1.2rem + 0.25vw, 1.8rem);
	}

	.guide-card__badge {
		padding: .2rem 1rem;
		font-size: clamp(1rem, 0.98rem + 0.0625vw, 1.1rem);
	}
}


/* =====================================================
   PICKUP SLIDER — 注目コンテンツのスライダー
   pickup/pickup-card: index.html・interview.html
   event-pickup/event-pickup-card: event.html
   whitepaper-pickup/whitepaper-pickup-card: whitepaper.html
===================================================== */

/* =====================================================
pickup
===================================================== */

.pickup {
	padding-block: 5rem;
	overflow: hidden;
	position: relative;
}

.inner-page .pickup {
	padding-block: 0 5rem;
}

.pickup__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

.pickup__label {
	color: var(--color-main);
}

.pickup__heading {
	margin-block: 0 4rem;
}

.pickup__slider {
	position: relative;
	width: 100%;
}

.pickup__viewport {
	width: 100%;
	overflow: hidden;
	padding-inline: 10%;
}

.pickup__track {
	display: flex;
	gap: 4rem;
	transition: transform var(--transition);
}

.pickup__arrow {
	position: absolute;
	top: 42%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	backdrop-filter: blur(10px) brightness(100%);
	background: rgba(255, 255, 255, .65);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	transform: translateY(-50%);
	border: 1px solid #fff;
}

.pickup__arrow::after {
	content: "";
	width: 1.3rem;
	height: 1.5rem;
	background-color: var(--color-gray);
}

.pickup__arrow--prev {
	left: 7vw;
}

.pickup__arrow--prev::after {
	clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
	margin-right: 3px;
}

.pickup__arrow--next {
	right: 7vw;
}

.pickup__arrow--next::after {
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
	margin-left: 3px;
}

.pickup__dots {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: -1rem;
	position: relative;
	z-index: 1;
}

.pickup__dot {
	width: 1.8rem;
	height: 1.8rem;
	background: #ddd;
	border-radius: 50%;
	transition: background var(--transition);
}

.pickup__dot.is-active {
	background: var(--color-main);
}

@media (hover: hover) {
	.pickup__arrow:hover {
		opacity: .7;
	}
}

@media (max-width: 768px) {
	.pickup {
		padding-block: 4rem 0;
	}

	.pickup__heading {
		margin-bottom: 3.2rem;
	}

	.pickup__viewport {
		padding-inline: 6%;
	}

	.inner-page .pickup__viewport {
		max-width: var(--content-width);
		margin-inline: auto;
		padding-inline: 2rem;
	}

	.pickup__arrow {
		width: 5rem;
		height: 5rem;
	}

	.inner-page .pickup__arrow {
		width: 4rem;
		height: 4rem;
	}

	.pickup__arrow::after {
		width: .91rem;
		height: 1.05rem;
	}

	.pickup__arrow--prev {
		left: .5rem;
	}

	.inner-page .pickup__arrow--prev {
		left: .1rem;
	}

	.pickup__arrow--next {
		right: .5rem;
	}

	.inner-page .pickup__arrow--next {
		right: .1rem;
	}

	.pickup__dots {
		margin-top: -2rem;
	}
	.pickup__dot {
		width: 1.6rem;
		height: 1.6rem;
	}
}

/* =====================================================
pickup-card
===================================================== */

.pickup-card {
	flex: 0 0 100%;
	min-width: 0;
	padding-bottom: 5rem;
	height: 100%;
}

.pickup-card:not(.is-active) .pickup-card__thumb,
.pickup-card:not(.is-active) .pickup-card__body {
	opacity: .35;
	transition: opacity var(--transition);
}

.pickup-card__link {
	display: flex;
	align-items: flex-start;
	gap: 3.2rem;
	padding: 3.2rem;
	background: rgba(255, 255, 255, .65);
	border-radius: 1rem;
	box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.16);
	backdrop-filter: blur(10px) brightness(100%);
	transition: all .3s;
}

.inner-page .pickup-card__link{
	align-items: stretch;
	padding-right: 5vw;
	height: 100%;
}

.pickup-card__thumb {
	flex: 0 0 45%;
}

.inner-page .pickup-card__thumb {
	flex: 0 0 56%;
}

.pickup-card__image {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 8.75;
	object-fit: cover;
	/* border-radius: .8rem; */
}

.pickup-card__body {
	flex: 1;
	min-width: 0;
}

.inner-page .pickup-card__body {
	display: flex;
	flex-direction: column;
	height: auto;
}

.pickup-card__badge {
	padding: .2rem 3.2rem;
	font-size: clamp(1.3rem, 1.24rem + 0.1875vw, 1.6rem);
	border-radius: 6px;
	letter-spacing: 0.05em;
	display: inline-block;
	align-self: flex-start;
}

.pickup-card__badge--column {
	background: var(--color-column);
}

.pickup-card__badge--event {
	background: var(--color-event);
}

.pickup-card__badge--interview {
	background: var(--color-interview);
}

.pickup-card__badge--whitepaper {
	background: var(--color-whitepaper);
}

.pickup-card__badge--category {
	background: var(--color-column);
}

/* 業界タグ。業界ごとに背景色を分ける（現状わかっている色のみ指定、未指定の業界は既定の緑を使用） */
.pickup-card__badge--automobile {
	background: #208041;
}

.pickup-card__title {
	margin-top: 1.6rem;
	font-size: clamp(1.6rem, 1.2rem + 1.25vw, 3.6rem);
	font-weight: 700;
	line-height: 1.6;
}

.inner-page .pickup-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.pickup-card__body .interview-card__company {
	margin-top: auto;
}

@media (hover: hover) {
	.pickup-card.is-active .pickup-card__link:hover {
		opacity: .7;
	}
}

@media (max-width: 768px) {
	.pickup-card__link {
		flex-direction: column;
		gap: 1.6rem;
		padding: 1.6rem;
	}

	.pickup-card__thumb {
		flex-basis: auto;
		width: 100%;
	}

	.pickup-card__title {
		margin-top: 1.2rem;
		font-size: 1.6rem;
	}

	.inner-page .pickup-card__title {
		-webkit-line-clamp: 2;
		margin-bottom: 2rem;
	}
}

/* =====================================================
event-pickup
===================================================== */

.event-pickup {
	/* padding-block: 8rem 0; */
}

.event-pickup__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

.event-pickup__label {
	color: var(--color-main);
}

.event-pickup__heading {
	margin-block: 0 3.2rem;
}

.event-pickup__slider {
	position: relative;
}

.event-pickup__viewport {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
	margin-bottom: 8rem;
}

.event-pickup__track {
	display: flex;
	gap: 5.24%;
}

.event-pickup__arrow {
	display: none;
}

.event-pickup__arrow::after {
	content: "";
	width: .91rem;
	height: 1.05rem;
	background-color: var(--color-gray);
}

.event-pickup__arrow--prev::after {
	clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}

.event-pickup__arrow--next::after {
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.event-pickup__dots {
	display: none;
}

@media (max-width: 768px) {
	.event-pickup {
		padding: 0 0 4rem;
	}

	.event-pickup__heading {
		margin-top: 0;
		margin-bottom: 2.4rem;
	}

	.event-pickup__viewport {
		padding: 0 1.5rem 4rem;
		margin-bottom: 0;
		overflow: hidden;
	}

	.event-pickup__track {
		gap: 2rem;
		transition: transform var(--transition);
	}

	.event-pickup-card {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}

	.event-pickup__arrow {
		position: absolute;
		top: 36%;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		backdrop-filter: blur(10px) brightness(100%);
		background: rgba(255, 255, 255, .65);
		transform: translateY(-50%);
		border: 1px solid #fff;
		box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
	}

	.event-pickup__arrow--prev {
		left: .1rem;
	}

	.event-pickup__arrow--next {
		right: .1rem;
	}

	.event-pickup__dots {
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin-top: -2rem;
	}

	.event-pickup__dot {
		width: 1.6rem;
		height: 1.6rem;
		background: #ddd;
		border-radius: 50%;
		transition: background var(--transition);
	}

	.event-pickup__dot.is-active {
		background: var(--color-main);
	}

	.event-pickup-card .card__title {
		border-bottom: none;
	}
}

/* =====================================================
event-pickup-card
===================================================== */

.event-pickup-card__image {
	width: 100%;
	height: 240px;
	aspect-ratio: 37 / 24;
	object-fit: cover;
}

.event-pickup-card__tag {
	background: var(--color-main);
}

.event-pickup-card__badge {
	padding: .4rem 1.6rem;
	font-size: clamp(1.2rem, 1.16rem + 0.125vw, 1.4rem);
	border-radius: 6px;
	letter-spacing: 0.05em;
}

.event-pickup-card__badge--conference {
	background: #593F66;
}

.event-pickup-card__badge--event {
	background: #59908A;
}

@media (hover: hover) {
	.event-pickup-card__link:hover .event-pickup-card__image {
		opacity: .7;
	}
}

@media (max-width: 768px) {
	.event-pickup-card {
		box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.16);
	}
	.event-pickup-card__body {
		padding-inline: 1rem;

	}
	.event-pickup-card__image {
		height: auto;
		aspect-ratio: 16 / 8.95;
	}
}


/* =====================================================
whitepaper-pickup
===================================================== */

.whitepaper-pickup {
	/* padding-block: 8rem 0; */
}

.whitepaper-pickup__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

.whitepaper-pickup__label {
	color: var(--color-main);
}

.whitepaper-pickup__heading {
	margin-block: 0 3.2rem;
}

.whitepaper-pickup__slider {
	position: relative;
}

.whitepaper-pickup__viewport {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
	margin-bottom: 8rem;
}

.whitepaper-pickup__track {
	display: flex;
	gap: 5.24%;
}

.whitepaper-pickup__arrow {
	display: none;
}

.whitepaper-pickup__arrow::after {
	content: "";
	width: .91rem;
	height: 1.05rem;
	background-color: var(--color-gray);
}

.whitepaper-pickup__arrow--prev::after {
	clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}

.whitepaper-pickup__arrow--next::after {
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.whitepaper-pickup__dots {
	display: none;
}

@media (max-width: 768px) {
	.whitepaper-pickup {
		padding: 0 0 4rem;
	}

	.whitepaper-pickup__heading {
		margin-top: 0;
		margin-bottom: 2.4rem;
	}

	.whitepaper-pickup__viewport {
		padding: 0 1.5rem 4rem;
		margin-bottom: 0;
		overflow: hidden;
	}

	.whitepaper-pickup__track {
		gap: 2rem;
		transition: transform var(--transition);
	}

	.whitepaper-pickup-card {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}

	.whitepaper-pickup__arrow {
		position: absolute;
		top: 36%;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		backdrop-filter: blur(10px) brightness(100%);
		background: rgba(255, 255, 255, .65);
		transform: translateY(-50%);
		border: 1px solid #fff;
		box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
	}

	.whitepaper-pickup__arrow--prev {
		left: .1rem;
	}

	.whitepaper-pickup__arrow--next {
		right: .1rem;
	}

	.whitepaper-pickup__dots {
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin-top: -2rem;
	}

	.whitepaper-pickup__dot {
		width: 1.6rem;
		height: 1.6rem;
		background: #ddd;
		border-radius: 50%;
		transition: background var(--transition);
	}

	.whitepaper-pickup__dot.is-active {
		background: var(--color-main);
	}
}

/* =====================================================
whitepaper-pickup-card
===================================================== */

.whitepaper-pickup-card__image {
	width: 100%;
	height: 240px;
	aspect-ratio: 37 / 24;
	object-fit: cover;
}

.whitepaper-pickup-card__tag {
	background: var(--color-main);
}

.whitepaper-pickup-card__badge {
	padding: .4rem 1.6rem;
	font-size: clamp(1.2rem, 1.16rem + 0.125vw, 1.4rem);
	border-radius: 6px;
	letter-spacing: 0.05em;
}

.whitepaper-pickup-card__badge--report {
	background: #8B7A60;
}

.whitepaper-pickup-card__badge--checklist {
	background: #132C40;
}

@media (hover: hover) {
	.whitepaper-pickup-card__link:hover .whitepaper-pickup-card__image {
		opacity: .7;
	}
}

@media (max-width: 768px) {
	.whitepaper-pickup-card {
		box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.16);
	}
	.whitepaper-pickup-card__body {
		padding-inline: 1rem;
	}
	.whitepaper-pickup-card__image {
		height: auto;
		aspect-ratio: 16 / 8.95;
	}
	.whitepaper-pickup-card__title {
		border-bottom: none;
	}
}


/* =====================================================
   CONTENT CARDS — 各コンテンツ種別の見出しセクション＋カード
   home のプレビューセクションと、各一覧ページの両方で使用
===================================================== */

/* =====================================================
column
===================================================== */

.column {
	padding-block: 5rem;
}

.column__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

.column__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.4rem;
	margin-bottom: 4rem;
}

.column__label {
	color: var(--color-column);
}

@media (max-width: 768px) {
	.column {
		padding-block: 4rem;
	}

	.column__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.2rem;
		margin-bottom: 3.2rem;
	}
}

/* =====================================================
column-card
===================================================== */

.column-card__image {
	width: 100%;
	height: 240px;
	aspect-ratio: 37 / 24;
	object-fit: cover;
}

.column-card__new {
	background: #F44E4E;
}

.column-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.2rem;
}

.column-card__badge {
	padding: .4rem 1.2rem;
	font-size: clamp(1rem, 0.98rem + 0.0625vw, 1.1rem);
	background: var(--color-column);
}

.column-card__tags::before {
	background-image: url(../img/icon-column01.svg);
}

@media (max-width: 768px) {
	.column-card__link {

	}

	.column-card__meta {
		justify-content: flex-start;
		gap: .5rem;
	}
	.column-card__new {
		background: #F44E4E !important;
	}

	.column-card__image {
		height: auto;
		border-radius: 5px;
	}
}

@media (hover: hover) {
	.column-card__link:hover .column-card__image {
		opacity: .7;
	}
}

/* =====================================================
event
===================================================== */

.event {
	padding-block: 5rem;
}

.event__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

.event__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.4rem;
	margin-bottom: 4rem;
}

.event__label {
	color: var(--color-event);
}

@media (max-width: 768px) {
	.event {
		padding-block: 4rem;
	}

	.event__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.2rem;
		margin-bottom: 3.2rem;
	}
}

/* =====================================================
event-card
===================================================== */

.event-card__image {
	width: 100%;
	height: 240px;
	aspect-ratio: 37 / 24;
	object-fit: cover;
}

.event-card__tag {
	background: var(--color-main);
}

.event-card__badge {
	padding: .4rem 1.2rem;
	font-size: clamp(1rem, 0.98rem + 0.0625vw, 1.1rem);
	background: var(--color-event);
}

.event-card__date {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.6rem;
	border: 1px solid var(--color-text3);
	border-radius: .6rem;
	color: var(--color-text4);
	font-size: clamp(1.3rem, 1.2rem + 0.3125vw, 1.8rem);
	font-weight: bold;
	line-height: 1.5;
}

.event-card__date-label {
	padding: .3rem 2rem;
	font-size: clamp(1.1rem, 1rem + 0.3125vw, 1.6rem);
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: var(--color-text3);
}

/* PC: 開催日はメタの直下、SP: 開催日はタイトルの下に表示するため、u-pc/u-sp違いの2つを出し分ける。
   .u-pc/.u-sp と同じ詳細度のため、display指定がユーティリティ側に上書きされないよう明示する */
@media (min-width: 769px) {
	.event-card__date.u-pc {
		display: flex;
	}
}

@media (max-width: 768px) {
	.event-card__date.u-sp {
		display: flex;
		margin-top: 1rem;
	}

	.event-card__tags {
		border-top: 1px solid #CFD0D1;
		padding: 1rem 0;
	}
}

.event-card__tags {
	flex-wrap: wrap;
	padding-bottom: 1rem;
	border-bottom: 1px solid #CFD0D1;
}

.event-card__tags::before {
	background-image: url(../img/icon-event01.svg);
}

.event-card__place {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-top: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #CFD0D1;
	font-size: clamp(1.2rem, 1.16rem + 0.125vw, 1.4rem);
	color: var(--color-text3);
}

/* event.htmlのようにタグリストが後に続く場合は下線を残し、index.htmlのように最後の行になる場合は下線を消す */
.event-card__place:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.event-card__place::before {
	width: 1.7rem;
	height: 2rem;
	background-image: url(../img/icon-event02.svg);
}

.event-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
}

.event-card__taglist {
	margin-top: 1.2rem;
}

.event-card__taglist::before {
	width: 2rem;
	height: 1.8rem;
	background-image: url(../img/icon-event05.svg);
}

@media (hover: hover) {
	.event-card__link:hover .event-card__image {
		opacity: .7;
	}
}

@media (max-width: 768px) {
	.card__body-sp .event-card__image {
		height: auto;
		border-radius: 5px;
	}

	.event-card__meta {
		flex-direction: column;
		align-items: flex-start;
	}

	/* .u-sp（.event-card__meta/.badgeと同じ詳細度で、かつ後方で定義されているためdisplayが上書きされてしまう）に負けないよう明示する */
	.event-card__meta.u-sp {
		display: flex;
		gap: 5px;
	}

	.event-card__tag.u-sp {
		display: inline-block;
	}
}

/* =====================================================
interview
===================================================== */

.interview {
	padding-block: 5rem;
}

.interview__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

.interview__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.4rem;
	margin-bottom: 4rem;
}

.interview__label {
	color: var(--color-interview);
}

@media (max-width: 768px) {
	.interview {
		padding-block: 4rem;
	}

	.interview__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.2rem;
		margin-bottom: 3.2rem;
	}
}

/* =====================================================
interview-card
===================================================== */

.interview-card__image {
	width: 100%;
	height: 240px;
	aspect-ratio: 37 / 24;
	object-fit: cover;
}

.interview-card__meta {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

.interview-card__badge {
	padding: .4rem 1.2rem;
	font-size: clamp(1rem, 0.98rem + 0.0625vw, 1.1rem);
	background: var(--color-interview);
}

.interview-card__tags::before {
	background-image: url(../img/icon-interview01.svg);
}

.interview-card__company {
	display: flex;
	align-items: baseline;
	gap: 1.2rem;
	margin-top: .8rem;
	font-size: clamp(1.2rem, 1.16rem + 0.125vw, 1.4rem);
	color: var(--color-text3);
	border-top: 1px solid #CFD0D1;
	padding-top: 1rem;
}

.interview-card__company::before {
	width: 1.4rem;
	margin: 0 0.2rem;
	height: 2rem;
	background-image: url(../img/icon-interview02.svg);
}

.inner-page .interview-card__company {
	align-items: flex-start;
}

.inner-page .interview-card__company::before {
	width: 1.6rem;
	height: 2rem;
	background-image: url(../img/icon-interview03.svg);
}

@media (hover: hover) {
	.interview-card__link:hover .interview-card__image {
		opacity: .7;
	}
}
@media (max-width: 768px) {
	.more-btn-sp {
		display: flex;
		flex-wrap: wrap;
		gap: 1.6rem;
		margin: 4rem auto 0;
	}
	.more-btn-sp .button {
		max-width: 80%;
		width: 100%;
		margin: 0 auto;
	}
}

/* =====================================================
whitepaper
===================================================== */

.whitepaper {
	padding-block: 5rem;
}

.whitepaper__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

.whitepaper__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.4rem;
	margin-bottom: 4rem;
}

.whitepaper__label {
	color: var(--color-whitepaper);
}

@media (max-width: 768px) {
	.whitepaper {
		padding-block: 8rem;
	}

	.whitepaper__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.2rem;
		margin-bottom: 3.2rem;
	}
}

/* =====================================================
whitepaper-card
===================================================== */

.whitepaper-card__title {
	border-bottom: none;
}
.whitepaper-card__image {
	width: 100%;
	height: 240px;
	aspect-ratio: 37 / 24;
	object-fit: cover;
}

.whitepaper-card__badge {
	padding: .4rem 1.2rem;
	font-size: clamp(1rem, 0.98rem + 0.0625vw, 1.1rem);
	background: var(--color-whitepaper);
}

.whitepaper-card__tag {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-top: 1.2rem;
	padding-top: 1.2rem;
	font-size: clamp(1.2rem, 1.16rem + 0.125vw, 1.4rem);
	color: var(--color-text3);
	border-top: 1px solid #CFD0D1;
}

.whitepaper-card__tag::before {
	content: "";
	flex-shrink: 0;
	width: 1.8rem;
	height: 1.8rem;
	background: url(../img/icon-whitepaper01.svg) no-repeat center / contain;
}

@media (hover: hover) {
	.whitepaper-card__link:hover .whitepaper-card__image {
		opacity: .7;
	}

}

@media (max-width: 768px) {
	.whitepaper-card__image {
		height: auto;
		border-radius: 5px;
	}
	.whitepaper-card .card__body-sp {
		border: none;
	}
}


/* =====================================================
   ARCHIVE / LIST PAGES — 一覧ページ共通パーツ
   column-archive: column.html / event-archive: event.html
   interview-archive: interview.html / whitepaper-archive: whitepaper.html
   event-filter: event.html専用
===================================================== */

/* =====================================================
column-archive
===================================================== */

.column-archive {
	padding-block: 0 10rem;
}

.column-archive__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

.column-archive__list {
	margin-top: 4rem;
}

@media (max-width: 768px) {
	.column-archive {
		padding-block: 0 6rem;
	}

	.column-archive__list {
		margin-top: 3.2rem;
	}
}

/* =====================================================
event-archive
===================================================== */

.event-archive {
	padding-block: 0 10rem;
}

.event-archive__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

.event-archive__list {
	margin-top: 4rem;
}

@media (max-width: 768px) {
	.event-archive {
		padding-block: 0 6rem;
	}

	.event-archive__list {
		margin-top: 3.2rem;
	}

	/* .event-card__body {
		padding-bottom: 1rem;
	} */

	.event-card__body .card__body-sp .card__title {
		padding: 0;
		margin: 0;
	}

	.event-card__body .card__body-sp {
		align-items: center;
		gap: 15px;
		padding-bottom: 0;
		border: none;
	}

	.event-card__body-sp-content {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
		gap: .8rem;
	}

	.event-card__body .card__title span {
		-webkit-line-clamp: 3;
	}

	.event-card__body .card__body-sp .card__thumb {
		flex: 0 0 140px;
		width: 140px;
	}

	.event-card__body .card__body-sp .event-card__image {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/* =====================================================
interview-archive
===================================================== */

.interview-archive {
	padding-block: 0 10rem;
}

.interview-archive__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

.interview-archive__list {
	margin-top: 4rem;
}

@media (max-width: 768px) {
	.interview-archive {
		padding-block: 0 6rem;
	}

	.interview-archive__list {
		margin-top: 3.2rem;
	}
}

/* =====================================================
whitepaper-archive
===================================================== */

.whitepaper-archive {
	padding-block: 0 10rem;
}

.whitepaper-archive__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

.whitepaper-archive__list {
	margin-top: 4rem;
}

@media (max-width: 768px) {
	.whitepaper-archive {
		padding-block: 0 6rem;
	}

	.whitepaper-archive__list {
		margin-top: 3.2rem;
	}
}

/* =====================================================
event-filter
===================================================== */

.event-filter {
	margin-bottom: 8rem;
	padding: 4rem;
	border-radius: 1rem;
	backdrop-filter: blur(10px) brightness(100%);
	background: rgba(255, 255, 255, .65);
	box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.16);
}

.event-filter__head {
	display: flex;
	align-items: center;
	gap: .8rem;
	font-size: clamp(2rem, 1.85rem + 0.39vw, 2.6rem);
	font-weight: 700;
}

.event-filter__head img {
	width: 2.8rem;
}

.event-filter__group {
	margin-top: 2.8rem;
}

.event-filter__group-head {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: clamp(1.5rem, 1.44rem + 0.1875vw, 1.8rem);
	font-weight: 700;
}

.event-filter__group-head img {
	width: 1.8rem;
}

.event-filter__options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 1.6rem;
	margin-top: 1.2rem;
}

.event-filter__options-divider {
	width: 1px;
	height: 1.6rem;
	background: #CFD0D1;
}

.event-filter__checkbox {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	font-size: clamp(1.4rem, 1.32rem + 0.25vw, 1.8rem);
	font-weight: 700;
	color: var(--color-text3);
	cursor: pointer;
}

.event-filter__checkbox input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.8rem;
	height: 1.8rem;
	appearance: none;
	position: relative;
	background: #fff;
	border: 1.5px solid var(--color-gray);
	transition: border-color var(--transition);
}

.event-filter__checkbox input[type="checkbox"]:checked {
	border-color: var(--color-dark);
}

.event-filter__checkbox input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: .2rem;
	left: .5rem;
	width: .5rem;
	height: .9rem;
	border: solid var(--color-dark);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.event-filter__actions {
	display: flex;
	align-items: center;
	gap: 2.4rem;
	margin-top: 3.2rem;
	padding-top: 3rem;
	border-top: 1px solid #CFD0D1;
}

.event-filter__submit {
	min-height: 5.2rem;
	padding-inline-start: 2.8rem;
	padding-inline-end: 4.8rem;
	border-radius: 999px;
}

.event-filter__clear {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: clamp(1.2rem, 1.16rem + 0.125vw, 1.4rem);
	font-weight: 700;
	color: var(--color-text3);
	transition: all .3s;
}

.event-filter__clear img {
	display: block;
}

.event-filter__clear span {
	display: inline-block;
	font-size: clamp(1.2rem, 1.28rem + 0.25vw, 1.8rem);
	color: var(--color-gray);
	text-decoration: underline;
	transition: 0.3s;
}

@media (hover: hover) {
	.event-filter__clear:hover {
		opacity: .7;
	}
}

@media (max-width: 768px) {
	.event-filter {
		padding: 2rem 1.5rem;
		margin-bottom: 5rem;
	}

	.event-filter__head img {
		width: 2.2rem;
	}

	.event-filter__options {
		gap: 1rem 1.2rem;
	}

	.event-filter__actions {
		align-items: stretch;
		flex-direction: column;
		gap: 1.6rem;
	}

	.event-filter__submit {
		font-size: clamp(1.2rem, 1.2rem + 0.25vw, 1.8rem);
		padding-inline: 2rem 4rem;
	}

	.event-filter__clear {
		justify-content: center;
	}
}


/* =====================================================
   DETAIL PAGES — column-detail.html / event-detail.html
                  interview-detail.html / whitepaper-detail.html
===================================================== */

/* =====================================================
article-head
===================================================== */

.article-head {
	position: relative;
	z-index: 2;
	padding-block: 2rem 1rem;
}

.article-head__badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.6rem;
}

.article-head__type {
	padding: .4rem 1.6rem;
	font-size: clamp(1.2rem, 1.16rem + 0.125vw, 1.4rem);
	background: var(--color-column);
	border-radius: 6px;
}

.article-head__type--event {
	background: var(--color-event);
}

.article-head__type--interview {
	background: var(--color-interview);
}

.article-head__type--whitepaper {
	background: var(--color-whitepaper);
}

.article-head__divider {
	width: 1px;
	height: 1.8rem;
	background: #CFD0D1;
}

.article-head__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.article-head__category {
	padding: .4rem 1.6rem;
	font-size: clamp(1.3rem, 1.23rem + 0.19vw, 1.6rem);
	font-weight: bold;
	color: var(--color-text3);
	background: #fff;
	border: 1px solid var(--color-gray);
	border-radius: 6px;
	line-height: 1.34;
}

.article-head__title {
	margin-top: 3rem;
	font-size: clamp(2.4rem, 2.01rem + 1.04vw, 4rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text);
}

.article-head__meta {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 2.4rem;
	margin-top: 2.4rem;
}

.article-head__author {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

/* .u-pc/.u-sp と同じ詳細度のため、display指定がユーティリティ側に上書きされないよう明示する */
@media (min-width: 769px) {
	.article-head__author.u-pc {
		display: flex;
	}
}

@media (max-width: 768px) {
	.article-head__badges {
		gap: .8rem;
	}
	.article-head__type {
		padding: .2rem 1.6rem;
	}
	.article-head__author.u-sp {
		display: flex;
		margin-block: 3rem 4rem;
	}
	.article-head__categories {
		gap: .6rem;
	}
	.article-head__category {
		padding: .3rem .8rem;
		font-size: clamp(1rem, 1rem + 0.125vw, 1.6rem);
	}
}

.article-head__avatar {
	flex-shrink: 0;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: var(--color-column);
}
.article-head__author-info {
	line-height: 1.3;
}

.article-head__author-name {
	font-weight: 700;
	font-size: clamp(1.6rem, 1.52rem + 0.25vw, 2rem);
}

.article-head__author-org {
	margin-top: 1rem;
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
	font-weight: 600;
	color: var(--color-gray);
}

.article-head__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
}

.article-head__date {
	display: flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--color-text3);
	border-radius: .6rem;
	color: var(--color-text4);
	font-size: clamp(1.3rem, 1.2rem + 0.3125vw, 1.6rem);
	font-weight: 700;
	line-height: 1.5;
}

.article-head__date-label {
	padding: .4rem 3rem;
	font-size: clamp(1.3rem, 1.23rem + 0.19vw, 1.6rem);
	font-weight: 700;
	color: #fff;
	background: var(--color-text3);
	letter-spacing: .3em;
	text-align: center;
}

.article-head__date-value {
	padding-inline: 1rem 2.2rem;
	font-size: clamp(1.4rem, 1.3rem + 0.26vw, 1.8rem);
	letter-spacing: .08em;
}

@media (max-width: 768px) {
	.article-head {
		padding-block: 2rem 2.4rem;
	}

	.article-head__title {
		margin-top: 1.6rem;
		font-size: clamp(2rem, 1.8rem + 1vw, 2.6rem);
	}

	.article-head__meta {
		margin-top: 1.6rem;
	}

	.article-head__dates {
		flex-wrap: nowrap;
		gap: .6rem;
	}

	.article-head__date-label {
		padding: .2rem 1rem;
		font-size: clamp(1rem, 1rem + 0.3125vw, 1.6rem);
		letter-spacing: .1em;
	}

	.article-head__date-value {
		padding-inline: .6rem 1.2rem;
		font-size: clamp(1.1rem, 1.05rem + 0.13vw, 1.3rem);
		letter-spacing: 0;
	}
}

/* =====================================================
article-layout
===================================================== */

.article-layout {
	display: grid;
	max-width: calc(1260px + 4rem);
	margin-inline: auto;
	padding-inline: 2rem;
	grid-template-columns: 1fr;
	grid-template-areas:
		"main"
		"related"
		"aside";
	gap: 6rem;
	padding-block: 0 10rem;
}

@media (max-width: 768px) {
	.article-layout {
		padding-inline: 1.6rem;
	}
}

.article-layout__main {
	grid-area: main;
	min-width: 0;
}

.article-layout__aside {
	grid-area: aside;
	min-width: 0;
}

/* .article-layout__asideは構造（グリッド配置・幅）のみを担い、
   背景色などの見た目はページ種別ごとの修飾クラスで個別に拡張する。
   例）event-detail.html → --event、whitepaper-detail.html → --whitepaper */
.article-layout__aside--event,
.article-layout__aside--whitepaper {
	padding: 2.8rem;
	border-radius: 1rem;
	background: #fff;
	border: 1px solid #CECECE;
}

@media (max-width: 768px) {
	.article-layout__aside--event,
	.article-layout__aside--whitepaper {
		padding: 2.4rem 2rem;
	}
}

.article-layout__related {
	grid-area: related;
	max-width: 1240px;
	margin-inline: auto;
	width: 100%;
}

.article-layout__related .section-heading {
	color: var(--color-text);
	margin-top: .5rem;
	line-height: 1.5;
}

@media (min-width: 769px) {
	.article-layout {
		grid-template-columns: minmax(0, 870fr) minmax(0, 310fr);
		grid-template-areas:
			"main aside"
			"related related";
		column-gap: 5.5rem;
		row-gap: 8rem;
		align-items: start;
	}

	/* event-detail.htmlはmain最大780px・aside最大420pxに固定する */
	.article-layout--event {
		grid-template-columns: minmax(0, 780px) minmax(0, 420px);
	}

	/* whitepaper-detail.htmlも同様にmain最大780px・aside最大420pxに固定する */
	.article-layout--whitepaper {
		grid-template-columns: minmax(0, 780px) minmax(0, 420px);
	}

	/* 追従を復活させる場合はコメントを外す */
	/*
	.article-layout__aside {
		position: sticky;
		top: calc(var(--header-height) + 2rem);
	}
	*/

	/* event-detail.htmlのようにasideがフォームの場合に追従させたい場合はコメントを外す */
	/*
	.article-layout--event .article-layout__aside {
		position: sticky;
		top: calc(var(--header-height) + 2rem);
	}
	*/
}

@media (max-width: 768px) {
	.article-layout {
		gap: 5rem;
		padding-block: 0 6rem;
	}

	/* event-detail.htmlはSPで main → aside(フォーム) → related の順で表示する */
	.article-layout--event {
		grid-template-areas:
			"main"
			"aside"
			"related";
	}

	/* whitepaper-detail.htmlも同様にSPで main → aside(フォーム) → related の順で表示する */
	.article-layout--whitepaper {
		grid-template-areas:
			"main"
			"aside"
			"related";
	}
}

/* interview-detail.htmlはサイドバーを持たないため、main/relatedのみの1カラム構成にする */
.article-layout--interview {
	grid-template-columns: 1fr;
	grid-template-areas:
		"main"
		"related";
}

/* =====================================================
article-head__event-meta（event-detail.html専用の日時・形式・タグ行）
===================================================== */

.article-head__event-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin-top: 2rem;
	font-size: clamp(1.3rem, 1.24rem + 0.19vw, 1.6rem);
	font-weight: 700;
	color: var(--color-text4);
}

/* =====================================================
event-detail
===================================================== */

.event-detail__hero {
	border-radius: 1rem;
	overflow: hidden;
}

.event-detail__hero img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.event-detail__section:not(:first-child) {
	margin-top: 6rem;
}

.event-detail__text {
	margin-top: 2.4rem;
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
	font-weight: 600;
	line-height: 1.9;
	color: var(--color-text3);
}

.event-detail__overview {
	margin-top: 2.4rem;
}

.event-detail__overview-row {
	display: flex;
	gap: 2.4rem;
	padding-block: .7rem;
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
	font-weight: 600;
}

.event-detail__overview-row dt {
	flex: 0 0 9rem;
	font-weight: 700;
}

.event-detail__overview-row dd {
	/* color: var(--color-text); */
}

.event-detail__program {
	margin-top: 2.4rem;
}

.event-detail__program-item {
	display: flex;
	gap: 2.4rem;
	padding-block: 2rem;
	border-bottom: 2px solid #CECECE;
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
}

.event-detail__program-item:first-child {
	padding-top: 0;
}

.event-detail__program-time {
	flex: 0 0 7rem;
	font-weight: 600;
}

.event-detail__program-title {
	font-weight: 600;
}

.event-detail__program-speaker {
	font-size: clamp(1.3rem, 1.4rem + 0.19vw, 1.8rem);
	font-weight: 600;
	color: #707070;
}

@media (max-width: 768px) {
	.event-detail__section:not(:first-child) {
		margin-top: 4rem;
	}

	.event-detail__text {
		font-size: clamp(1.2rem, 1.3rem + 0.26vw, 2rem);
	}

	.event-detail__overview-row {
		gap: 1.6rem;
		font-size: clamp(1.2rem, 1.3rem + 0.26vw, 2rem);
	}

	.event-detail__overview-row dt {
		flex-basis: 7rem;
	}

	.event-detail__program-item {
		gap: 1.6rem;
		font-size: clamp(1.2rem, 1.3rem + 0.26vw, 2rem);
		padding-block: 1rem;
		border-bottom: 1px solid #CECECE;
	}

	.event-detail__program-speaker {
		font-size: clamp(1rem, 1.3rem + 0.26vw, 2rem);
	}

	.event-detail__program-time {
		flex-basis: 5.5rem;
	}
}

/* =====================================================
event-form-iframe
===================================================== */

/* 実装時は外部フォームサービスのiframeに差し替え予定の仮表示。高さは実際のフォームの想定分に合わせて調整する */
.event-form-iframe {
	display: block;
	width: 100%;
	height: 90rem;
	border: none;
	border-radius: .6rem;
}

/* =====================================================
article-body
===================================================== */

.article-body__hero {
	border-radius: 1rem;
	overflow: hidden;
}

.article-body__hero img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.article-body__content {
	margin-top: 4rem;
	font-size: clamp(1.5rem, 1.46rem + 0.125vw, 1.7rem);
	line-height: 1.7;
	color: var(--color-text3);
}

.article-body__content p {
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
}

.article-body__content > * + * {
	margin-top: 2.4rem;
}

.article-body__content strong {
	font-weight: 700;
}

@media (max-width: 768px) {
	.article-body__content p {
		font-size: clamp(1.2rem, 1.3rem + 0.26vw, 2rem);
	}
}

/*
 * コラム/イベント・セミナー/インタビュー/お役立ち情報、各投稿タイプの詳細ページ見出しは
 * 色違いだけでデザインが共通のため、下線+アクセントバーの見た目は.detail-headingに集約する。
 * 投稿タイプごとの余白（例：コラム本文中のCMS見出しの上マージン）は
 * .article-body__heading--lv2側など、各コンテキストのクラスで個別に持たせる。
 */
.detail-heading {
	position: relative;
	padding-bottom: 1.6rem;
	font-size: clamp(2rem, 1.76rem + 0.65vw, 3rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text);
	border-bottom: 4px solid #CFD0D1;
}

.detail-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 5.2rem;
	height: 4px;
	background: var(--color-column);
}

.detail-heading--column::after {
	background: var(--color-column);
}

.detail-heading--event::after {
	background: var(--color-event);
}

.detail-heading--interview::after {
	background: var(--color-interview);
}

.detail-heading--whitepaper::after {
	background: var(--color-whitepaper);
}

@media (max-width: 768px) {
	.detail-heading::after {
		width: 3rem;
	}
}

/*
 * コラム記事の見出しはCMS上の見出しレベル（見出し2〜5）に対応するクラスで装飾する。
 * 実際に出力されるhタグのレベルが変わってもスタイルが崩れないよう、
 * タグ名ではなくクラス名（--lv2〜--lv5）を基準にスタイルを当てる。
 * --lv2の下線+アクセントバーの見た目は.detail-heading（detail-heading--column併用）が担い、
 * ここでは自由記述本文特有の上マージンのみを持たせる。
 */
.article-body__heading {
	font-weight: 700;
	color: var(--color-text);
}

.article-body__heading--lv2 {
	margin-top: 8rem !important;
}

.article-body__heading--lv3 {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-top: 8rem !important;
	font-size: clamp(1.8rem, 1.65rem + 0.39vw, 2.4rem);
}

.article-body__heading--lv3::before {
	content: "";
	flex-shrink: 0;
	width: 1.4rem;
	height: 1.4rem;
	background: var(--color-column);
}

.article-body__heading--lv4 {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-top: 8rem !important;
	font-size: clamp(1.7rem, 1.53rem + 0.45vw, 2.4rem);
}

.article-body__heading--lv4::before {
	content: "";
	flex-shrink: 0;
	width: 4px;
	height: 1.8rem;
	background: var(--color-column);
}

.article-body__heading--lv5 {
	margin-top: 8rem !important;
	font-size: clamp(1.6rem, 1.41rem + 0.52vw, 2.4rem);
}

@media (max-width: 768px) {
	.article-body__heading--lv2 {
		margin-top: 4.8rem !important;
	}
	.article-body__heading--lv3,
	.article-body__heading--lv4 {
		margin-top: 4rem !important;
	}
	.article-body__heading--lv5 {
		margin-top: 5rem !important;
	}
}

.article-body__content blockquote {
	padding-left: 2rem;
	border-left: 4px solid var(--color-column);
	color: var(--color-text3);
	margin: 5rem 0;
}

.article-layout--interview .article-body__content blockquote {
	border-left-color: var(--color-interview);
}

.article-body__note + .article-body__note {
	margin-top: .4rem;
}

.article-body__list {
	display: flex;
	flex-wrap: wrap;
	column-gap: 3rem;
	row-gap: .5rem;
	margin-top: 1.5rem;
}

.article-body__list li {
	position: relative;
	width: 100%;
	padding-left: 1.8rem;
	font-weight: 600;
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
}

.article-body__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1rem;
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: var(--color-column);
}

.article-body__list--ordered li {
	padding-left: 2.6rem;
	counter-increment: article-list;
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
}

.article-body__list--ordered {
	counter-reset: article-list;
}

.article-body__list--ordered li::before {
	content: counter(article-list) ".";
	width: auto;
	height: auto;
	top: 0;
	border-radius: 0;
	background: none;
	font-weight: 700;
	color: var(--color-text);
}

.article-body__list--col2 li {
	width: calc(50% - 2rem);
}

/* whitepaper-detail.htmlの「こんな方におすすめ」チェックリスト用 */
.article-body__list--check li {
	padding-left: 3rem;
}

.article-body__list--check li::before {
	left: .2rem;
	top: .5em;
	width: 1.6rem;
	height: .9rem;
	border-radius: 0;
	background: none;
	border-left: 3px solid var(--color-whitepaper);
	border-bottom: 3px solid var(--color-whitepaper);
	transform: translateY(-50%) rotate(-45deg);
}

@media (max-width: 768px) {
	.article-body__list li {
		font-size: clamp(1.2rem, 1.3rem + 0.26vw, 2rem);
	}
}

.article-body__figure {
	margin-top: 8rem;
}

@media (max-width: 768px) {
	.article-body__figure {
		margin-top: 4rem;
	}
}

.article-body__point {
	padding: 3rem;
	background: #F0F0F0;
	border-radius: 1rem;
	font-weight: bold;
	border: 1px solid var(--color-gray);
	margin-top: 5rem;
}

.article-body__point-title {
	font-size: clamp(2rem, 1.9rem + 0.26vw, 2.4rem) !important;
	font-weight: 700;
	margin-bottom: 1.5rem;
}

.article-body__table-wrap {
	overflow-x: auto;
}

.article-body__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.article-body__table th,
.article-body__table td {
	padding: 1.6rem 2rem;
	text-align: left;
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
	border: 1px solid var(--color-gray);
	background-color: #fff;
	font-weight: 600;
}

.article-body__table th {
	font-weight: 700;
}

@media (max-width: 768px) {
	.article-body__table th,
	.article-body__table td {
		padding: .5rem;
		font-size: clamp(1.2rem, 1.3rem + 0.26vw, 2rem);
	}
}

/* 実画像が入る場合は<div>を<img class="article-body__figure-placeholder">に差し替えるだけで済むようにしておく */
.article-body__figure-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #F1F1F1;
	border-radius: 1rem;
	object-fit: cover;
	font-size: clamp(1.6rem, 1.52rem + 0.25vw, 2rem);
	color: var(--color-gray);
}

.article-body__figure figcaption {
	margin-top: 1.2rem !important;
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
	font-weight: 600;
	color: var(--color-gray);
}

@media (max-width: 768px) {
	.article-body__content {
		margin-top: 3rem;
	}

	.article-body__point {
		padding: 2rem 1.6rem;
	}

	.article-body__figure figcaption {
		font-size: clamp(1.2rem, 1.3rem + 0.26vw, 2rem);
	}
}

/* =====================================================
article-side
===================================================== */

.article-side {
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

.article-side__widgets {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	padding: 3rem;
	border-radius: 1rem;
	backdrop-filter: blur(10px) brightness(100%);
	background: rgba(255, 255, 255, .65);
	border: 1px solid #F7F7F7;
}

.article-side__title {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: clamp(2rem, 1.9rem + 0.26vw, 2.4rem);
	font-weight: 700;
	color: var(--color-text);
}

.article-side__title::before {
	content: "";
	width: 2rem;
	height: 4px;
	background: var(--color-main);
}

.article-side__nav {
	margin-top: 1.6rem;
}

.article-side__nav-item {
	position: relative;
	display: flex;
	align-items: center;
	padding: 1.8rem 1rem;
	border-bottom: 1px solid #CFD0D1;
}

.article-side__nav-item:first-child {
	border-top: 1px solid #CFD0D1;
}

.article-side__nav-link {
	font-size: clamp(1.5rem, 1.43rem + 0.19vw, 1.8rem);
	font-weight: 700;
	color: var(--color-text3);
	white-space: nowrap;
}

.article-side__nav-link span {
	color: var(--color-text3);
}

.article-side__nav-link--column span {
	color: var(--color-column);
}

.article-side__nav-link--event span {
	color: var(--color-event);
}

.article-side__nav-link--whitepaper span {
	color: var(--color-whitepaper);
}

.article-side__nav-link--interview span {
	color: var(--color-interview);
}

.article-side__nav-icon {
	position: absolute;
	top: 50%;
	right: .5rem;
	transform: translateY(-50%);
	width: auto;
	height: 3.8vw;
	max-height: 60px;
	pointer-events: none;
}

@media (max-width: 768px) {
	.article-side__widgets {
		padding: 3rem 2rem;
		box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.16);
	}

	.article-side__nav-icon {
		height: 14vw;
	}
	.article-side__title::before {
		content: "";
		width: 1rem;
		height: 3px;
		background: var(--color-main);
	}
}

.article-side__category-list {
	margin-top: 1.6rem;
	padding-inline: 1.6rem;
}

.article-side__category-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1rem;
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
	font-weight: 600;
	transition: color var(--transition);
}

.article-side__category-name {
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition);
	line-height: 1;
}

.article-side__category-item.is-current a {
	color: var(--color-main);
}

.article-side__category-item.is-current .article-side__category-name {
	border-bottom-color: var(--color-main);
}

.article-side__category-arrow {
	flex-shrink: 0;
	width: 1.4rem;
	height: .93rem;
	background-color: currentColor;
	clip-path: polygon(0% 42%, 70% 42%, 70% 0%, 100% 50%, 70% 100%, 70% 58%, 0% 58%);
}

.article-side__ranking {
	margin-top: 1.6rem;
}

.article-side__ranking-item {
	display: flex;
	gap: 1.2rem;
	padding: 1.6rem 2rem 1.6rem 1.6rem;
	border-bottom: 1px solid #EFEFEF;
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
	font-weight: 600;
}

.article-side__ranking-item:first-child {
	padding-top: 0;
}

.article-side__ranking-number {
	flex-shrink: 0;
	font-weight: 700;
	color: var(--color-text3);
}

.article-side__ranking-link {
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
	color: var(--color-text3);
	line-height: 1.6;
	transition: color var(--transition);
}

.article-side__ranking-text {
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition);
}

.article-side__ranking-item.is-current .article-side__ranking-link {
	color: var(--color-main);
}

.article-side__ranking-item.is-current .article-side__ranking-text {
	border-bottom-color: var(--color-main);
}

/* 実画像が入る場合は<div>を<img class="article-side__banner">に差し替えるだけで済むようにしておく */
.article-side__banner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	background: #E5E5E5;
	color: var(--color-gray);
	font-weight: 700;
	object-fit: cover;
	aspect-ratio: 1.94 / 1;
}

@media (hover: hover) {
	.article-side__nav-item:hover {
		opacity: .7;
	}

	.article-side__ranking-link:hover {
		color: var(--color-main);
	}

	.article-side__ranking-link:hover .article-side__ranking-text {
		border-bottom-color: var(--color-main);
	}

	.article-side__category-item a:hover {
		color: var(--color-main);
	}

	.article-side__category-item a:hover .article-side__category-name {
		border-bottom-color: var(--color-main);
	}
}

/* =====================================================
related
===================================================== */

.related__list {
	margin-top: 4rem;
}

.related-card__image {
	width: 100%;
	height: 240px;
	aspect-ratio: 37 / 24;
	object-fit: cover;
}

.related-card__title {
	color: var(--color-text5);
}

.related-card__meta {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

.related-card__badge {
	padding: .4rem 1.2rem;
	font-size: clamp(1rem, 0.98rem + 0.0625vw, 1.1rem);
}

.related-card__badge--column {
	background: var(--color-column);
}

.related-card__badge--event {
	background: var(--color-event);
}

.related-card__badge--interview {
	background: var(--color-interview);
}

.related-card__badge--whitepaper {
	background: var(--color-whitepaper);
}

.related-card__tags::before {
	background-image: url(../img/icon-column01.svg);
}

@media (hover: hover) {
	.related-card__link:hover .related-card__image {
		opacity: .7;
	}
}

@media (max-width: 768px) {
	.related-card__image {
		height: auto;
		border-radius: 5px;
	}
}


/* =====================================================
   UTILITY
===================================================== */

/* =====================================================
utility
===================================================== */

.u-sp {
	display: none;
}

.u-pc {
	display: block;
}

.u-w100 {
	width: 100%;
}

.u-ta-center {
	text-align: center;
}

.u-ta-left {
	text-align: left;
}

.u-ta-right {
	text-align: right;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
}

@media (max-width: 768px) {
	.u-sp {
		display: block;
	}

	.u-pc {
		display: none;
	}
}

@media (min-width: 769px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}



/* =====================================================
20260909 修正
===================================================== */
.card__image,
.pickup-card__image,
.event-pickup-card__image,
.whitepaper-pickup-card__image,
.related-card__image {
	object-position: top;
	width: 100%;
    height: 100%;
	aspect-ratio: 20 / 12 !important;
}
.interview-card__image {
	object-fit: cover;
	aspect-ratio: 16 / 9 !important;
}
.card__body {
	padding-block: 1.5rem 2rem;
}
.archive, .entry {
    padding-block: 0 0 !important;
}

@media (max-width: 1120px) {
	.header__nav {
		align-items: flex-start;
		justify-content: flex-start;
		padding: 2rem;
	}

	.header__menu {
		text-align: left;
	}
}