/**
 * May9で共通利用する表示の基本部品。
 *
 * フェーズ3以降、ページやコンポーネント固有の規則をこのファイルへ追加する。
 * 実装途中にArkheの管理画面やテーマ表示を誤って上書きしないよう、
 * セレクタにはmay9の名前空間を使用する。
 */

/* 親テーマの標準本文を含め、公開画面の書体を統一する。 */
body:not(.wp-admin) {
	font-family: var(--may9-font-sans);
	font-weight: var(--may9-font-weight-medium);
}

/* ボタン単位の指定色は優先し、未指定の文字色だけ黒を継承する。 */
body,
.editor-styles-wrapper {
	--arkb-btn-color--text: var(--may9-color-ink);
}

.ark-block-button .ark-block-button__link {
	font-weight: 700;
}

.may9-container {
	box-sizing: border-box;
	width: min(calc(100% - (var(--may9-page-gutter) * 2)), var(--may9-content-width));
	margin-inline: auto;
}

.may9-section {
	padding-block: var(--may9-section-space);
}

.may9-button {
	display: inline-flex;
	min-width: 216px;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 4px 24px;
	border: 2px solid var(--may9-color-accent);
	border-radius: var(--may9-radius-pill);
	background: var(--may9-color-accent);
	color: var(--may9-color-ink);
	font-family: var(--may9-font-sans);
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
}

.may9-button:focus-visible {
	outline: 3px solid var(--may9-color-link);
	outline-offset: 3px;
}

.may9-button--outline {
	background: var(--may9-color-surface);
}

.may9-button--white {
	border-color: var(--may9-color-surface);
	background: var(--may9-color-surface);
}

#header.l-header {
	height: 80px;
	border: 0;
	background: var(--may9-color-surface);
	box-shadow: none;
}

#header .l-header__body {
	height: 100%;
	max-width: calc(var(--may9-content-width) + (var(--may9-page-gutter) * 2));
	padding-inline: var(--may9-page-gutter);
}

#header .l-header__logo {
	justify-content: flex-start;
}

#header .c-headLogo__img {
	display: block;
}

/* メニューの開閉アニメーションは保ち、背景色そのものは不透明にする。 */
#drawer_menu.p-drawer {
	background: var(--may9-color-accent);
	color: var(--may9-color-ink);
}

#header .c-gnav {
	gap: 30px;
	font-size: 15px;
}

#header .c-gnav__a {
	padding-inline: 0;
	color: var(--may9-color-ink);
	font-family: var(--may9-font-sans);
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

#header .c-gnav__a::after {
	display: none;
}

#header .c-gnav__a:hover {
	text-decoration: underline;
	text-decoration-color: var(--may9-color-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

#header .c-gnav__a:focus-visible,
#header .c-headLogo:focus-visible,
.l-footer .wp-block-site-logo a:focus-visible,
.l-footer__nav a:focus-visible {
	outline: 3px solid var(--may9-color-link);
	outline-offset: 4px;
}

#header .c-iconBtn:focus-visible,
.p-drawer__close:focus-visible {
	outline: 3px solid var(--may9-color-link);
	outline-offset: 3px;
}

.may9-page-title {
	display: flex;
	height: 260px;
	align-items: center;
	background: var(--may9-color-surface-muted);
	color: var(--may9-color-ink);
}

.may9-page-title__heading {
	margin: 0;
	font-family: var(--may9-font-sans);
	font-size: 32px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-page-title__subtitle {
	margin: 5px 0 0;
	font-family: var(--may9-font-sans);
	font-size: 16px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 2;
}

/* 自前のセクション余白がある画面では、本文コンテナの上下余白を重ねない。 */
.l-content__body:has(.may9-about-intro, .may9-faq-page, .may9-works-archive, .may9-reading, .may9-privacy, .may9-contact),
body.single-post .l-content__body {
	margin-block: 0;
}

.may9-home-hero,
.may9-home-about {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
}

.may9-home-hero {
	position: relative;
	height: 550px;
	overflow: hidden;
	background: var(--may9-color-ink);
	color: var(--may9-color-surface);
}

.may9-home-hero > .wp-block-group__inner-container {
	position: relative;
	height: 100%;
	display: flow-root;
}

/* 親テーマの段落・ブロック余白をMVの外側へ持ち出さない。 */
.may9-home-hero .may9-home-hero__content {
	margin-block: 0;
}

.c-postContent > .may9-home-about {
	margin-block: 0;
}

.may9-home-hero__image {
	position: absolute;
	top: 0;
	right: 0;
	width: 62.8125%;
	height: 100%;
	margin: 0;
}

.may9-home-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.may9-home-hero__content {
	position: relative;
	z-index: 1;
	padding-top: 123px;
}

.may9-home-hero__title {
	box-sizing: border-box;
	width: fit-content;
	margin: 0;
	padding-inline: 7px;
	background: linear-gradient(to bottom, transparent 7px, var(--may9-color-accent) 7px 56px, transparent 56px);
	color: var(--may9-color-ink);
	font-family: var(--may9-font-sans);
	font-size: 40px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-home-hero__text {
	margin: 20px 0 0;
	font-family: var(--may9-font-sans);
	font-size: 20px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.8;
}

.c-postContent .may9-home-hero__text {
	margin: 20px 0 0;
}

.may9-home-hero .wp-block-buttons {
	margin-top: 20px;
}

.may9-home-button.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color) {
	display: inline-flex;
	min-width: 216px;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 4px 24px;
	border: 2px solid var(--may9-color-accent);
	border-radius: var(--may9-radius-pill);
	background-color: var(--may9-color-accent);
	color: var(--may9-color-ink);
	font-family: var(--may9-font-sans);
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
	text-decoration: none;
}

.may9-home-button.wp-block-button .wp-block-button__link:focus-visible {
	outline: 3px solid var(--may9-color-link);
	outline-offset: 3px;
}

.may9-home-about {
	padding-block: 80px;
	background: var(--may9-color-surface-muted);
	color: var(--may9-color-ink);
}

.may9-home-about__inner > .wp-block-group__inner-container {
	display: flex;
	gap: 50px;
	flex-direction: column;
}

/* Flex・Gridのgapだけで間隔を作り、テーマのブロック間マージンを足さない。 */
.may9-home-about__inner > .wp-block-group__inner-container > *,
.may9-home-services > .wp-block-group__inner-container > *,
.may9-home-services__list > .wp-block-group__inner-container > * {
	margin-block: 0;
}

.may9-home-about__title,
.may9-home-services__title,
.may9-home-profile__title,
.may9-home-profile__name,
.may9-home-service__title {
	margin: 0;
	font-family: var(--may9-font-sans);
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-home-about__title {
	font-size: 32px;
}

.may9-home-about__lead {
	margin: 5px 0 0;
	font-family: var(--may9-font-sans);
	font-size: 18px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 2;
}

.c-postContent .may9-home-about__lead {
	margin: 5px 0 0;
}

.may9-home-about__intro .wp-block-buttons {
	margin-top: 20px;
}

.may9-home-services > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: max-content 720px;
	align-items: start;
	justify-content: space-between;
}

.may9-home-services__title,
.may9-home-profile__title {
	font-size: 24px;
}

.may9-home-services__list > .wp-block-group__inner-container {
	display: flex;
	gap: 30px;
	flex-direction: column;
}

.may9-home-service > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 222px 1fr;
	gap: 20px;
	align-items: start;
}

.may9-home-service__title {
	font-size: 18px;
}

.may9-home-service__title {
	width: fit-content;
	max-width: 100%;
	align-self: start;
	text-decoration-color: var(--may9-color-accent);
	text-decoration-line: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 6px;
	text-underline-offset: -3px;
}

.may9-home-service__text,
.may9-home-profile__text,
.may9-home-profile__role {
	margin: 0;
	font-family: var(--may9-font-sans);
	font-size: 14px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 1.8;
}

/* テーマの「見出しの次の段落」の上余白を、この横並びの説明文には適用しない。 */
.c-postContent .may9-home-service__text {
	margin-block: 0;
}

.may9-home-profile {
	overflow: hidden;
	padding: 30px 40px;
	border-radius: var(--may9-radius-card);
	background: var(--may9-color-surface);
}

.may9-home-profile > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.may9-home-profile__body {
	width: 792px;
}

.may9-home-profile__name-row > .wp-block-group__inner-container {
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin-top: 0;
}

.c-postContent .may9-home-profile__name-row {
	margin-block: 15px 0;
}

.c-postContent .may9-home-profile__role {
	margin-block: 0;
}

.may9-home-profile__name {
	font-size: 18px;
}

.may9-home-profile__role {
	color: var(--may9-color-text);
	line-height: 1.5;
}

.c-postContent .may9-home-profile__text {
	margin-top: 15px;
	line-height: 1.5;
}

.may9-home-profile__image {
	width: 197px;
	height: 197px;
	margin: 0;
	flex: 0 0 auto;
}

.may9-home-profile__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.may9-home-works,
.may9-home-information {
	color: var(--may9-color-ink);
}

.may9-home-works {
	background-color: var(--may9-color-surface);
}

/* 背景付きグループにArkheが加える内側余白・最大幅を二重適用しない。 */
.c-postContent > .may9-home-works.has-background {
	margin-block: 0;
	padding: 80px 0;
}

.c-postContent > .may9-home-works.has-background > .wp-block-group__inner-container {
	width: 100%;
	max-width: none;
}

.may9-home-section-heading__title {
	margin: 0;
	font-family: var(--may9-font-sans);
	font-size: 32px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-home-section-heading__text {
	margin: 5px 0 0;
	font-family: var(--may9-font-sans);
	font-size: 16px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 2;
}

.c-postContent .may9-home-section-heading__text {
	margin-block: 5px 0;
}

.may9-home-works .ark-block-postList {
	margin-top: 40px;
}

.may9-home-works .p-postList.-type-card {
	display: grid;
	margin: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.may9-home-works .p-postList.-type-card .p-postList__item {
	min-width: 0;
	margin: 0;
	padding: 0;
	background: var(--may9-color-surface-muted);
	box-shadow: var(--may9-shadow-card);
}

.may9-home-works .p-postList.-type-card .p-postList__link {
	display: flex;
	height: 100%;
	color: var(--may9-color-ink);
	flex-direction: column;
}

.may9-home-information .p-postList__link:focus-visible {
	outline: 3px solid var(--may9-color-link);
	outline-offset: 3px;
}

.may9-home-works .p-postList__link:not(:focus-visible) {
	outline: none;
}

.may9-home-works .p-postList__link:focus-visible {
	outline: 3px solid var(--may9-color-accent);
	outline-offset: 3px;
}

.may9-home-works .p-postList__link:hover .p-postList__title {
	text-decoration: none;
}

.may9-home-works .p-postList__thumb,
.may9-home-works .c-postThumb__figure {
	width: 100%;
	margin: 0;
	aspect-ratio: 8 / 5;
	overflow: hidden;
}

.may9-home-works .c-postThumb__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.may9-home-works .p-postList.-type-card .p-postList__body {
	display: flex;
	padding: 16px 16px 24px;
	gap: 5px;
	flex: 1 1 auto;
	flex-direction: column;
}

.may9-home-works .p-postList .p-postList__title {
	margin: 0;
	font-family: var(--may9-font-sans);
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-home-works .p-postList__excerpt {
	margin: 0;
	font-family: var(--may9-font-sans);
	font-size: 12px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 1.5;
}

/* URLは外部リンクにせず、カードの詳細ページへのリンクを維持する。 */
.may9-home-works .may9-work-card__site,
.may9-works-archive__detail-query .may9-work-card__site {
	margin: 0;
	color: var(--may9-color-link);
	font-family: var(--may9-font-sans);
	font-size: 14px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.may9-works-archive__detail-query .may9-work-card__site {
	margin: 0 16px 5px;
}

/* ページ送りの構成・文言は同期パターンで編集し、見た目だけを補う。 */
.may9-works-archive .may9-works-archive__pagination {
	display: flex;
	margin: 40px 0 0;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 16px;
}

.may9-works-archive__pagination .wp-block-query-pagination-numbers {
	display: flex;
	margin: 0;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.may9-works-archive__pagination a,
.may9-works-archive__pagination .current {
	display: inline-flex;
	min-width: 40px;
	min-height: 40px;
	margin: 0;
	padding: 4px 12px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--may9-color-accent);
	border-radius: var(--may9-radius-pill);
	color: var(--may9-color-ink);
	text-decoration: none;
}

.may9-works-archive__pagination .current,
.may9-works-archive__pagination a:hover {
	background: var(--may9-color-accent);
}

/* Arkheの数字リンク既定値より優先し、前後ボタンと同じ寸法にそろえる。 */
.may9-works-archive .may9-works-archive__pagination .page-numbers:not(.dots) {
	box-sizing: border-box;
	font-size: inherit;
	line-height: 1.5;
}

.may9-works-archive__pagination a:focus-visible {
	outline: 2px solid var(--may9-color-ink);
	outline-offset: 3px;
}

.may9-home-works .p-postList__excerpt p {
	margin: 0;
}

.may9-home-works .p-postList__meta:empty,
.may9-home-works .p-postList--notfound,
.may9-home-information .p-postList--notfound {
	display: none;
}

.may9-home-works__actions {
	display: flex;
	margin-top: 40px;
	gap: 20px;
	justify-content: center;
}
.may9-home-information {
	background: var(--may9-color-surface);
}

.may9-home-information .ark-block-postList {
	margin-top: 30px;
}

.may9-home-information .p-postList.-type-simple {
	margin: 0;
	border-color: var(--may9-color-border);
}

.may9-home-information .p-postList.-type-simple .p-postList__link {
	min-height: 57px;
	padding: 0;
	border-color: var(--may9-color-border);
}

.may9-home-information .p-postList.-type-simple .p-postList__body {
	display: grid;
	min-height: 57px;
	align-items: center;
	grid-template-columns: 150px minmax(0, 720px);
	gap: 20px;
}

.may9-home-information .p-postList__meta,
.may9-home-information .p-postList__times {
	margin: 0;
	/* 親テーマの薄色ユーティリティによる日付の透過を解除する。 */
	opacity: 1;
	font-family: var(--may9-font-sans);
	font-size: 16px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
	color: var(--may9-color-ink);
}

.may9-home-information .c-postMetas__icon {
	display: none;
}

.may9-home-information .c-postTimes__item {
	white-space: nowrap;
	color: var(--may9-color-ink);
}

.may9-home-information .p-postList .p-postList__title {
	margin: 0;
	font-family: var(--may9-font-sans);
	font-size: 14px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 1.8;
}
.may9-home-information .p-postList__link:hover .p-postList__title {
	text-decoration: underline;
	text-decoration-color: var(--may9-color-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.may9-home-information__actions {
	margin-top: 30px;
	justify-content: center;
}

/* 「May9について」は本文をブロックで管理し、配置と装飾だけを子テーマで補う。 */
.may9-about-intro,
.may9-about-details,
.may9-about-faq,
.may9-about-site-info {
	max-width: none;
	color: var(--may9-color-ink);
	font-family: var(--may9-font-sans);
}

/* Arkheの全幅計算と二重にずらさず、背景を画面幅、内容を中央幅に分ける。 */
.c-postContent > .may9-about-intro,
.c-postContent > .may9-about-details,
.c-postContent > .may9-about-faq,
.c-postContent > .may9-about-site-info {
	left: 50% !important;
	width: 100vw !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	transform: translateX(-50%);
}

/* Arkheがブロック間へ加える余白を外し、このページのgapとmarginへ一元化する。 */
.may9-about-intro .wp-block-group__inner-container > *,
.may9-about-details .wp-block-group__inner-container > *,
.may9-about-faq .wp-block-group__inner-container > *,
.may9-about-site-info .wp-block-group__inner-container > * {
	margin-top: 0;
	margin-bottom: 0;
}

.may9-about-intro {
	min-height: 832px;
	padding-block: 136px 80px;
	background: var(--may9-color-surface);
}

.may9-about-intro__inner {
	position: relative;
}

.may9-about-intro__content {
	position: relative;
	z-index: 1;
	width: 548px;
}

.may9-about-intro__title {
	width: fit-content;
	margin: 0;
	padding-inline: 5px;
	background: linear-gradient(to bottom, transparent 13px, var(--may9-color-accent) 13px 55px, transparent 55px);
	font-family: var(--may9-font-sans);
	font-size: 40px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-about-intro__lead {
	margin: 20px 0 0;
	font-size: 20px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.8;
}

.may9-about-intro__text {
	margin: 20px 0 0;
	font-size: 14px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 1.8;
}

/* 標準余白の解除より優先し、MV内で必要な要素間20pxは残す。 */
.may9-about-intro__content > .wp-block-group__inner-container > .may9-about-intro__lead,
.may9-about-intro__content > .wp-block-group__inner-container > .may9-about-intro__text,
.may9-about-intro__content > .wp-block-group__inner-container > .wp-block-buttons {
	margin-block: 20px 0;
}

.may9-about-intro__image {
	position: absolute;
	top: -136px;
	right: -95px;
	width: 780px;
	margin: 0;
	pointer-events: none;
}

.may9-about-intro__image img {
	display: block;
	width: 100%;
	height: auto;
}

.may9-about-details,
.may9-about-site-info {
	padding-block: 80px;
	background: var(--may9-color-surface-muted);
}

.may9-about-details > .wp-block-group__inner-container > .may9-container > .wp-block-group__inner-container {
	display: flex;
	gap: 80px;
	flex-direction: column;
}

.may9-about-section-row > .wp-block-group__inner-container,
.may9-about-faq__inner > .wp-block-group__inner-container,
.may9-about-site-info__inner > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 346px minmax(0, 720px);
	gap: 22px;
	justify-content: space-between;
}

.may9-about-section-row__title,
.may9-about-faq__aside h2,
.may9-about-site-info__inner > .wp-block-group__inner-container > h2 {
	margin: 0;
	font-size: 24px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-about-section-row__body > .wp-block-group__inner-container,
.may9-about-site-info__body > .wp-block-group__inner-container {
	display: flex;
	gap: 30px;
	flex-direction: column;
}

.may9-about-service > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 222px minmax(0, 1fr);
	gap: 20px;
}

.may9-about-marker-title {
	width: fit-content;
	max-width: 100%;
	margin: 0;
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
	text-decoration-color: var(--may9-color-accent);
	text-decoration-line: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 7px;
	text-underline-offset: -4px;
}

.may9-about-service p,
.may9-about-card p,
.may9-about-profile p,
.may9-about-site-info p {
	margin: 0;
	font-size: 14px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 1.5;
}

/* 詳細説明の行間はトップの「できること」と揃える。 */
.may9-about-service p,
.may9-about-card p {
	line-height: 1.8;
}

.may9-about-card-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px 20px;
}

.may9-about-card > .wp-block-group__inner-container {
	display: flex;
	gap: 10px;
	flex-direction: column;
}

.may9-about-profile__body > .wp-block-group__inner-container {
	display: flex;
	gap: 15px;
	align-items: flex-start;
	flex-direction: column;
}

.may9-about-profile__image {
	width: 223px;
	height: 223px;
	margin: 0;
}

.may9-about-profile__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.may9-about-profile__content > .wp-block-group__inner-container {
	display: flex;
	gap: 15px;
	flex-direction: column;
}

.may9-about-profile__name-row > .wp-block-group__inner-container {
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.may9-about-profile__name-row h3,
.may9-about-profile__name-row p {
	margin: 0;
}

.may9-about-profile__name-row h3 {
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
}

.may9-about-faq {
	padding-block: 80px;
	background: var(--may9-color-surface);
}

.may9-about-faq__aside > .wp-block-group__inner-container {
	display: flex;
	gap: 44px;
	flex-direction: column;
}

.may9-about-faq__image {
	width: 257px;
	height: 258px;
	margin: 0 auto;
}

.may9-about-faq__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}





.may9-about-faq__body .wp-block-buttons {
	/* 項目とボタンの間隔も親グループのgapへ集約する。 */
	margin-top: 0;
}

/* FAQは固定ページのQ&Aブロックを編集元とし、Figmaの2カラム配置だけを補う。 */
.may9-faq-page {
	max-width: none;
	padding-block: 80px;
	color: var(--may9-color-ink);
	background: var(--may9-color-surface);
	font-family: var(--may9-font-sans);
}

.c-postContent > .may9-faq-page {
	left: 50% !important;
	width: 100vw !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	transform: translateX(-50%);
}

.may9-faq-page .wp-block-group__inner-container > * {
	margin-top: 0;
	margin-bottom: 0;
}

.may9-faq-page__inner > .wp-block-group__inner-container {
	display: flex;
	gap: 35px;
	flex-direction: column;
}

.may9-faq-page__header > .wp-block-group__inner-container {
	display: flex;
	gap: 40px;
	align-items: center;
	flex-direction: column;
}

.may9-faq-page__header h2 {
	margin: 0;
	font-size: 32px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-faq-page__nav {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

.may9-faq-page__nav .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color) {
	padding: 0 20px;
	border: 2px solid var(--may9-color-ink);
	border-radius: 24px;
	color: var(--may9-color-ink);
	background-color: var(--may9-color-surface);
	font-size: 20px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 2;
}

.may9-faq-page__image {
	width: 272px;
	height: 272px;
	margin: 0;
}

.may9-faq-page__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.may9-faq-page__list > .wp-block-group__inner-container {
	display: flex;
	gap: 80px;
	flex-direction: column;
}

.may9-faq-page__category {
	scroll-margin-top: 32px;
}

.may9-faq-page__category > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 346px minmax(0, 720px);
	gap: 22px;
	justify-content: space-between;
	align-items: start;
}

.may9-faq-page__category h3 {
	margin: 0;
	font-size: 24px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

/* 同期パターンのQ&Aは、抜粋と全件ページで同じ表示規則を使う。 */
.may9-about-faq__body > .wp-block-group__inner-container,
.may9-faq-page__items > .wp-block-group__inner-container {
	display: flex;
	gap: 40px;
	flex-direction: column;
}







.may9-about-site-info__item h3 {
	margin: 0;
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-about-site-info__item > .wp-block-group__inner-container {
	display: flex;
	gap: 10px;
	flex-direction: column;
}

.may9-about-site-info__item .wp-block-buttons {
	margin-top: 10px;
}

.may9-about-site-info a:not(.wp-block-button__link) {
	color: inherit;
	text-decoration-color: var(--may9-color-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.may9-home-works__actions .is-style-outline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 216px;
	min-height: 48px;
	padding: 4px 24px;
	border: 2px solid var(--may9-color-accent);
	border-radius: var(--may9-radius-pill);
	background: var(--may9-color-surface);
	color: var(--may9-color-ink);
	font-family: var(--may9-font-sans);
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

/* Arkheの枠線スタイルが指定するアクセント文字色だけを上書きする。 */
.may9-home-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: var(--may9-color-ink) !important;
}

.may9-cta {
	height: 420px;
	overflow: hidden;
	background: var(--may9-color-accent);
	color: var(--may9-color-ink);
}

/* Arkhe Toolkitのフッター前ウィジェットで、共通CTAだけを画面幅いっぱいに表示する。 */
.w-before-footer.l-container:has(.may9-before-footer-cta) {
	max-width: none;
	padding-inline: 0;
}

.w-before-footer .c-widget:has(.may9-before-footer-cta),
.may9-before-footer-cta {
	margin: 0;
}

.may9-cta__inner {
	position: relative;
	height: 100%;
}

.may9-cta__content {
	position: relative;
	z-index: 1;
	width: 620px;
	padding-top: 79px;
}

.may9-cta__title {
	margin: 0;
	font-family: var(--may9-font-sans);
	font-size: 32px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-cta .may9-cta__text {
	max-width: 100%;
	margin: 5px 0 0;
	font-family: var(--may9-font-sans);
	font-size: 16px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 2;
	overflow-wrap: anywhere;
	white-space: normal;
	word-break: break-all;
}

.may9-cta .may9-button,
.may9-cta .wp-block-buttons {
	margin-top: 93px;
}

.may9-cta .wp-block-button.may9-cta__button .wp-block-button__link {
	display: inline-flex;
	min-width: 216px;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 4px 24px;
	border: 2px solid var(--may9-color-surface);
	border-radius: var(--may9-radius-pill);
	background-color: var(--may9-color-surface);
	color: var(--may9-color-ink);
	font-family: var(--may9-font-sans);
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
}

.may9-cta .wp-block-button.may9-cta__button .wp-block-button__link:focus-visible {
	outline: 3px solid var(--may9-color-link);
	outline-offset: 3px;
}

.may9-cta__image {
	position: absolute;
	top: 23px;
	right: -45px;
	width: 468px;
	height: 374px;
	margin: 0;
}

/* 小さい画面用の画像配置を上書きせず、PCの余計なmarginだけを外す。 */
@media (min-width: 1280px) {
	.may9-cta .may9-cta__image {
		margin: 0;
	}
}

.may9-cta__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.l-footer {
	min-height: 240px;
	border: 0;
	background: var(--may9-color-surface);
	color: var(--may9-color-ink);
}

.l-footer__inner {
	position: relative;
}

.l-footer__widgets {
	padding: 52px 0 0;
}

.l-footer__widgets > .l-container,
.l-footer__foot > .l-container {
	max-width: calc(var(--may9-content-width) + (var(--may9-page-gutter) * 2));
	padding-inline: var(--may9-page-gutter);
}

.l-footer .w-footer,
.l-footer .c-widget,
.l-footer .wp-block-site-logo {
	margin: 0;
}

.l-footer .may9-footer-logo-widget {
	width: 110px;
}

.l-footer .may9-footer-logo-widget img {
	display: block;
	width: 110px;
	height: 47px;
	object-fit: contain;
}

.l-footer__foot {
	padding: 30px 0 21px;
}

.l-footer__nav {
	justify-content: flex-start;
	margin: 0;
	gap: 30px;
}

.l-footer__nav a {
	padding: 0;
	font-family: var(--may9-font-sans);
	font-size: 15px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.l-footer .c-copyright {
	position: absolute;
	right: var(--may9-page-gutter);
	bottom: 21px;
	margin: 0;
	font-family: var(--may9-font-sans);
	font-size: 16px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 2;
	text-align: right;
}

.may9-works-archive {
	padding-block: 80px;
	color: var(--may9-color-ink);
}

.may9-works-archive .may9-works-archive__section {
	width: 100%;
	max-width: var(--may9-content-width);
	margin-inline: auto;
}

.may9-works-archive__section + .may9-works-archive__section {
	margin-top: 80px;
}

.may9-works-archive__title {
	margin: 0;
	font-size: 32px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-works-archive .may9-works-archive__lead {
	margin: 5px 0 0;
	font-size: 16px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 2;
}

.may9-works-archive__detail-query,
.may9-works-archive__simple-query {
	margin-top: 20px;
}

.may9-works-archive__detail-query .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 20px;
	gap: 20px;
}

.may9-works-archive__detail-query .wp-block-post {
	position: relative;
	min-width: 0;
	margin: 0;
	padding-bottom: 24px;
	background: var(--may9-color-surface-muted);
	box-shadow: var(--may9-shadow-card);
}

.may9-works-archive__detail-query .wp-block-post-featured-image {
	margin: 0 0 16px;
	aspect-ratio: 8 / 5;
	overflow: hidden;
}

.may9-works-archive__detail-query .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.may9-works-archive__detail-query .wp-block-post-title,
.may9-works-archive__detail-query .wp-block-post-excerpt,
.may9-works-archive__detail-query .wp-block-post-terms {
	margin-inline: 16px;
}

.may9-works-archive__detail-query .wp-block-post-title {
	margin-block: 0 5px;
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

/* 表示用の制作・対応時期をタイトル直上へ配置する。 */
.may9-works-archive__detail-query .may9-work-card__period {
	margin: 0 16px 5px;
	color: var(--may9-color-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

.may9-works-archive__detail-query .wp-block-post-title a,
.may9-works-archive__simple-query .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.may9-works-archive__detail-query .wp-block-post-title a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.may9-works-archive__detail-query .wp-block-post:has(a:focus-visible) {
	outline: 3px solid var(--may9-color-accent);
	outline-offset: 4px;
}

.may9-works-archive__detail-query .wp-block-post-title a {
	outline: none;
}

.may9-works-archive__simple-query .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--may9-color-accent);
	text-underline-offset: 4px;
}

.may9-works-archive__detail-query .wp-block-post-title a:hover {
	text-decoration: none;
}

.may9-works-archive__detail-query .wp-block-post-excerpt {
	margin-block: 0 5px;
	font-size: 12px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 1.5;
}

.may9-works-archive__detail-query .wp-block-post-excerpt__excerpt,
.may9-works-archive__detail-query .wp-block-post-terms {
	margin-block: 0;
}

.may9-works-archive__detail-query .wp-block-post-terms,
.may9-works-archive__simple-query .wp-block-post-terms {
	font-size: 12px;
	line-height: 1.5;
}

.may9-works-archive__detail-query .may9-work-card__tags {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.may9-works-archive__detail-query .may9-work-card__tags .wp-block-post-terms__separator {
	display: none;
}

.may9-works-archive__detail-query .may9-work-card__tag {
	padding: 2px 6px;
	border-radius: 4px;
	background: #eee;
}

.may9-works-archive__simple-query .wp-block-post-template {
	margin: 20px 0 0;
	border-top: 1px solid var(--may9-color-border);
	background: var(--may9-color-surface-muted);
}

.may9-works-archive__simple-query .wp-block-post {
	margin: 0;
	padding: 14px 30px;
	border-bottom: 1px solid var(--may9-color-border);
}

.may9-works-archive__simple-query .wp-block-post-date {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.may9-works-archive__simple-query .wp-block-post-title {
	margin: 2px 0;
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-works-archive__simple-query .may9-work-simple__site {
	margin: 2px 0 6px;
	font-size: 14px;
	line-height: 1.5;
}

.may9-works-archive__simple-query .may9-work-simple__site a {
	color: var(--may9-color-link);
	text-decoration: underline;
	overflow-wrap: anywhere;
}

.may9-works-archive__simple-query .may9-work-simple__tags {
	display: flex;
	margin: 0;
	gap: 4px;
	flex-wrap: wrap;
}

.may9-works-archive__simple-query .may9-work-simple__tags .wp-block-post-terms__separator {
	display: none;
}

.may9-works-archive__simple-query .may9-work-card__tag {
	padding: 2px 6px;
	border-radius: 4px;
	background: #eee;
}

.may9-works-archive__actions {
	margin: 24px 0 0;
	gap: 10px;
	justify-content: flex-start;
}

.may9-works-archive .may9-works-archive__actions .may9-works-archive__button .wp-block-button__link {
	display: inline-flex;
	min-width: 216px;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 4px 24px;
	border: 2px solid var(--may9-color-accent);
	border-radius: var(--may9-radius-pill);
	background: var(--may9-color-surface);
	color: var(--may9-color-ink);
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

/* 共通の白ボタン規則より後に指定し、「もっと見る」の黄色を維持する。 */
.may9-works-archive .may9-works-archive__actions .may9-works-archive__button--more .wp-block-button__link {
	background: var(--may9-color-accent);
}

@media (max-width: 1279px) {
	:root {
		--may9-page-gutter: 24px;
	}

	.may9-container {
		width: min(calc(100% - 48px), var(--may9-content-width));
	}

	#header .l-header__body,
	.l-footer__widgets > .l-container,
	.l-footer__foot > .l-container {
		padding-inline: 24px;
	}

	.l-footer .c-copyright {
		right: 24px;
	}

	.may9-cta__image {
		right: -24px;
	}

	.may9-home-services > .wp-block-group__inner-container {
		grid-template-columns: minmax(120px, max-content) minmax(0, 720px);
		gap: 48px;
	}

	.may9-home-profile__body {
		width: calc(100% - 221px);
	}
}

@media (max-width: 900px) {
	.may9-home-hero {
		height: auto;
	}

	.may9-home-hero > .wp-block-group__inner-container {
		display: flex;
		height: auto;
		flex-direction: column;
	}

	.may9-home-hero__content {
		order: 1;
		padding-block: 56px 48px;
	}

	.may9-home-hero__image {
		position: relative;
		width: 100%;
		height: auto;
		order: 0;
	}

	.may9-home-hero__image img {
		height: auto;
		aspect-ratio: 1608 / 1100;
	}

	.may9-home-services > .wp-block-group__inner-container {
		display: flex;
		gap: 30px;
		flex-direction: column;
	}

	.may9-home-services__list {
		width: 100%;
	}

	.may9-home-profile > .wp-block-group__inner-container {
		gap: 24px;
		align-items: flex-end;
	}

	.may9-home-profile__body {
		width: calc(100% - 180px);
	}

	.may9-home-profile__image {
		width: 156px;
		height: 156px;
	}

	.may9-home-works .p-postList.-type-card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.may9-works-archive__detail-query .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.may9-cta {
		height: auto;
	}

	.may9-cta__inner {
		display: flex;
		height: auto;
		min-height: 420px;
		padding-top: 56px;
		flex-direction: column;
	}

	.may9-cta__content {
		width: min(100%, 620px);
		min-width: 0;
		padding-top: 0;
	}

	.may9-cta .may9-button,
	.may9-cta .wp-block-buttons {
		margin-top: 32px;
	}

	.may9-cta__image {
		position: relative;
		top: auto;
		right: auto;
		width: min(468px, 100%);
		height: auto;
		margin: 24px 0 0 auto;
	}

	.may9-cta__image img {
		height: auto;
	}
}

@media (max-width: 767px) {
	:root {
		--may9-page-gutter: 16px;
	}

	.may9-container {
		width: min(calc(100% - 32px), var(--may9-content-width));
	}

	#header .l-header__body,
	.l-footer__widgets > .l-container,
	.l-footer__foot > .l-container {
		padding-inline: 16px;
	}

	.may9-section {
		padding-block: 56px;
	}

	.may9-home-hero__title {
		padding-inline: 5px;
		background: linear-gradient(to bottom, transparent 6px, var(--may9-color-accent) 6px 47px, transparent 47px);
		font-size: 32px;
	}

	.may9-home-hero__text {
		font-size: 16px;
	}

	.may9-home-about {
		padding-block: 56px;
	}

	.may9-home-about__title {
		font-size: 28px;
	}

	.may9-home-about__lead {
		font-size: 16px;
	}

	.may9-home-service > .wp-block-group__inner-container {
		display: flex;
		gap: 12px;
		flex-direction: column;
	}

	.may9-home-profile {
		padding: 30px 24px;
	}

	.may9-home-profile > .wp-block-group__inner-container {
		align-items: flex-start;
		flex-direction: column;
	}

	.may9-home-profile__body {
		width: 100%;
	}

	.may9-home-profile__image {
		width: 156px;
		height: 156px;
		order: -1;
		align-self: center;
	}

	.may9-home-section-heading__title {
		font-size: 28px;
	}

	.may9-home-section-heading__text br {
		display: none;
	}

	.may9-home-works .p-postList.-type-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.may9-works-archive {
		padding-block: 56px;
	}

	.may9-works-archive__section + .may9-works-archive__section {
		margin-top: 56px;
	}

	.may9-works-archive__title {
		font-size: 28px;
	}

	.may9-works-archive__detail-query .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}

	.may9-home-works__actions {
		align-items: center;
		flex-direction: column;
	}

	.may9-home-works__actions .wp-block-button {
		width: auto;
	}

	.may9-home-works__actions .wp-block-button__link {
		width: 216px;
	}

	.may9-home-information .p-postList.-type-simple .p-postList__body {
		display: flex;
		padding-block: 12px;
		gap: 4px;
		align-items: flex-start;
		flex-direction: column;
	}

	.may9-page-title {
		height: auto;
		min-height: 200px;
		padding-block: 32px;
	}

	.may9-page-title__heading,
	.may9-cta__title {
		font-size: 28px;
	}

	.may9-cta__text br {
		display: none;
	}

	.l-footer {
		min-height: 300px;
	}

	.l-footer__widgets {
		padding-top: 48px;
	}

	.l-footer__foot {
		padding: 28px 0 24px;
	}

	.l-footer__nav {
		align-items: flex-start;
		gap: 10px 24px;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.l-footer .c-copyright {
		position: static;
		margin-top: 48px;
		text-align: right;
	}
}

@media (max-width: 1279px) {
	.may9-about-intro__content {
		width: 50%;
	}

	.may9-about-intro__image {
		right: -24px;
		width: 62%;
	}

	.may9-about-section-row > .wp-block-group__inner-container,
	.may9-about-faq__inner > .wp-block-group__inner-container,
	.may9-about-site-info__inner > .wp-block-group__inner-container,
	.may9-faq-page__category > .wp-block-group__inner-container {
		grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
		gap: 32px;
	}
}

@media (max-width: 900px) {
	.may9-about-intro {
		min-height: 0;
		padding-block: 72px;
	}

	.may9-about-intro__inner > .wp-block-group__inner-container {
		display: flex;
		gap: 40px;
		flex-direction: column;
	}

	.may9-about-intro__content {
		width: min(100%, 620px);
	}

	.may9-about-intro__image {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		order: -1;
	}

	.may9-about-section-row > .wp-block-group__inner-container,
	.may9-about-faq__inner > .wp-block-group__inner-container,
	.may9-about-site-info__inner > .wp-block-group__inner-container,
	.may9-faq-page__category > .wp-block-group__inner-container {
		display: flex;
		gap: 30px;
		flex-direction: column;
	}

	.may9-about-faq__aside > .wp-block-group__inner-container {
		gap: 24px;
	}

	.may9-about-faq__image {
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	.may9-about-intro,
	.may9-about-details,
	.may9-about-faq,
	.may9-about-site-info {
		padding-block: 56px;
	}

	.may9-about-intro__title {
		padding-inline: 4px;
		background: linear-gradient(to bottom, transparent 10px, var(--may9-color-accent) 10px 46px, transparent 46px);
		font-size: 32px;
	}

	.may9-about-intro__lead {
		font-size: 16px;
	}

	.may9-about-intro__text br {
		display: none;
	}

	.may9-about-details > .wp-block-group__inner-container > .may9-container > .wp-block-group__inner-container {
		gap: 56px;
	}

	.may9-about-service > .wp-block-group__inner-container,
	.may9-about-card-grid > .wp-block-group__inner-container,
	.may9-about-profile__body > .wp-block-group__inner-container {
		display: flex;
		gap: 16px;
		flex-direction: column;
	}

	.may9-about-card-grid > .wp-block-group__inner-container {
		gap: 30px;
	}

	.may9-about-profile__image {
		width: 180px;
		height: 180px;
	}

	.may9-about-faq__image {
		width: min(257px, 72vw);
		height: auto;
	}

	.may9-faq-page {
		padding-block: 56px;
	}

	.may9-faq-page__inner > .wp-block-group__inner-container,
	.may9-faq-page__header > .wp-block-group__inner-container {
		gap: 24px;
	}

	.may9-faq-page__nav {
		gap: 12px;
		align-items: stretch;
		flex-direction: column;
	}

	.may9-faq-page__nav .wp-block-button,
	.may9-faq-page__nav .wp-block-button__link {
		width: 100%;
	}

	.may9-faq-page__nav .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color) {
		font-size: 16px;
	}

	.may9-faq-page__image {
		width: min(272px, 72vw);
		height: auto;
	}

	.may9-faq-page__list > .wp-block-group__inner-container {
		gap: 56px;
	}

	.may9-about-faq__body > .wp-block-group__inner-container,
	.may9-faq-page__items > .wp-block-group__inner-container {
		gap: 32px;
	}

}

/* 制作事例詳細は投稿本文を維持し、基本情報と画像だけを2列へ配置する。 */
body.single-works .l-main__body.p-entry {
	display: grid;
	grid-template-columns: minmax(0, 350px) minmax(0, 720px);
	column-gap: 40px;
}

body.single-works .may9-work-details__info {
	grid-column: 1;
	grid-row: 1 / 4;
	min-width: 0;
}

body.single-works .p-entry__head,
body.single-works .p-entry__content,
body.single-works .p-entry__foot {
	grid-column: 2;
	min-width: 0;
}

body.single-works .p-entry__head {
	grid-row: 1;
}

body.single-works .p-entry__head .c-postMetas,
body.single-works .p-entry__foot .c-pnNav {
	display: none;
}

body.single-works .p-entry__thumb {
	margin: 0;
	border: 1px solid var(--may9-color-border);
}

body.single-works .p-entry__thumb__img {
	display: block;
	width: 100%;
	height: auto;
}

body.single-works .p-entry__content {
	grid-row: 2;
	margin: 24px 0 0;
	font-size: 16px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 2;
}

body.single-works .p-entry__content > h2 {
	margin-top: 48px;
	margin-bottom: 16px;
	font-size: 22px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

body.single-works .p-entry__content > h2 + p {
	margin-top: 0;
}

body.single-works .p-entry__content .ark-block-columns__inner {
	display: grid;
	width: 100%;
	margin: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

body.single-works .p-entry__content .ark-block-column {
	width: 100%;
	margin: 0;
	min-width: 0;
}

body.single-works .p-entry__content .ark-block-column h3 {
	font-size: 18px;
	line-height: 1.5;
}

body.single-works .p-entry__content .ark-block-column ul {
	padding-left: 1.25em;
}

body.single-works .p-entry__foot {
	grid-row: 3;
	margin-top: 56px;
	text-align: center;
}

.may9-work-details__title {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-work-details__excerpt,
.may9-work-details__site,
.may9-work-details__date {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.6;
}

.may9-work-details__site a {
	color: var(--may9-color-link);
	text-decoration: underline;
	overflow-wrap: anywhere;
}

.may9-work-details__tags {
	display: flex;
	margin: 0 0 12px;
	padding: 0;
	gap: 4px;
	flex-wrap: wrap;
	list-style: none;
}

.may9-work-details__tags li {
	padding: 2px 6px;
	background: #eee;
	font-size: 12px;
	line-height: 1.5;
}

.may9-work-details__back {
	color: var(--may9-color-ink);
}

@media (max-width: 900px) {
	body.single-works .l-main__body.p-entry {
		grid-template-columns: minmax(0, 1fr);
	}

	body.single-works .may9-work-details__info,
	body.single-works .p-entry__head,
	body.single-works .p-entry__content,
	body.single-works .p-entry__foot {
		grid-column: 1;
		grid-row: auto;
	}

	body.single-works .p-entry__head {
		margin-top: 32px;
	}
}

@media (max-width: 767px) {
	body.single-works .p-entry__content .ark-block-columns__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	body.single-works .p-entry__content > h2 {
		margin-top: 40px;
	}

body.single-works .p-entry__foot {
		margin-top: 40px;
	}
}

.may9-reading {
	width: min(100%, var(--may9-content-width));
	margin-inline: auto;
	padding-block: 80px;
}

.may9-reading__categories {
	margin: 0 0 40px;
	gap: 20px;
}

.may9-reading .may9-reading__category.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	border: 2px solid var(--may9-color-ink);
	border-radius: var(--may9-radius-pill);
	background: var(--may9-color-surface);
	color: var(--may9-color-ink);
	font-size: 20px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 2;
}

body.category-column .may9-reading .may9-reading__category.wp-block-button:nth-child(1) .wp-block-button__link:not(.has-text-color),
body.category-tech .may9-reading .may9-reading__category.wp-block-button:nth-child(2) .wp-block-button__link:not(.has-text-color),
body.category-interview .may9-reading .may9-reading__category.wp-block-button:nth-child(3) .wp-block-button__link:not(.has-text-color) {
	background: var(--may9-color-accent);
}

.may9-reading__query .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.may9-reading__query .wp-block-post {
	position: relative;
	min-width: 0;
	margin: 0;
	padding-bottom: 20px;
	background: var(--may9-color-surface);
	box-shadow: var(--may9-shadow-card);
}

.may9-reading__query .wp-block-post-featured-image {
	margin: 0 0 16px;
	aspect-ratio: 8 / 5;
	overflow: hidden;
}

.may9-reading__query .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.may9-reading__query .wp-block-post-date,
.may9-reading__query .wp-block-post-title,
.may9-reading__query .wp-block-post-terms {
	margin-inline: 16px;
}

.may9-reading__query .wp-block-post-date {
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 1.5;
}

.may9-reading__query .wp-block-post-title {
	margin-block: 0 8px;
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-reading__query .wp-block-post-title a {
	color: var(--may9-color-ink);
	text-decoration: none;
}

.may9-reading__query .wp-block-post-title a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.may9-reading__query .wp-block-post-terms a {
	position: relative;
	padding: 2px 6px;
	background: #eee;
	color: var(--may9-color-ink);
	font-size: 12px;
	text-decoration: none;
}

.may9-reading__query .wp-block-query-pagination {
	display: flex;
	margin-top: 40px;
	gap: 10px;
	justify-content: center;
}

.may9-reading__query .wp-block-query-pagination-numbers {
	display: flex;
	gap: 10px;
}

.may9-reading__query .wp-block-query-pagination a,
.may9-reading__query .wp-block-query-pagination .current {
	display: inline-flex;
	min-width: 40px;
	min-height: 40px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--may9-color-accent);
	border-radius: var(--may9-radius-pill);
	color: var(--may9-color-ink);
	text-decoration: none;
}

.may9-reading__query .wp-block-query-pagination .current {
	background: var(--may9-color-accent);
}

.may9-reading__empty {
	margin: 0;
	text-align: center;
}

/* 親テーマの本文幅制限を外し、他ページと同じ最大1090pxにする。 */
body.single-post .l-main {
	width: min(100%, var(--may9-content-width));
	max-width: var(--may9-content-width);
	margin-inline: auto;
}

body.single-post .l-main__body.p-entry {
	display: grid;
	width: min(100%, var(--may9-content-width));
	grid-template-columns: 350px minmax(0, 1fr);
	column-gap: 40px;
	margin-inline: auto;
	padding-block: 40px 80px;
}

body.single-post .may9-reading-detail__info {
	grid-column: 1;
	grid-row: 1 / span 3;
}

.may9-reading-detail__date {
	display: block;
	font-size: 14px;
	font-weight: var(--may9-font-weight-medium);
}

.may9-reading-detail__title {
	margin: 4px 0 10px;
	font-size: 24px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-reading-detail__categories {
	display: flex;
	margin: 0;
	padding: 0;
	gap: 4px;
	list-style: none;
}

.may9-reading-detail__categories li {
	padding: 2px 6px;
	background: #eee;
	font-size: 12px;
}

body.single-post .may9-reading-detail__image,
body.single-post .p-entry__content,
body.single-post .p-entry__foot {
	grid-column: 2;
	min-width: 0;
}

body.single-post .may9-reading-detail__image {
	margin: 0 0 40px;
}

.may9-reading-detail__image img {
	display: block;
	width: 100%;
	height: auto;
}

body.single-post .p-entry__content {
	/* 画像の下40pxは画像側、本文後の40pxはナビ側で管理する。 */
	margin-block: 0;
	font-size: 16px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 2;
}

.may9-reading-detail__navigation {
	display: flex;
	margin-top: 40px;
	gap: 20px;
	justify-content: space-between;
}

.may9-reading-detail__navigation a,
.may9-reading-detail__navigation span {
	display: inline-flex;
	min-width: 0;
	min-height: 48px;
	flex: 1;
	align-items: center;
	justify-content: center;
	border-radius: var(--may9-radius-pill);
	background: var(--may9-color-accent);
	color: var(--may9-color-ink);
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	text-align: center;
	text-decoration: none;
}

.may9-reading-detail__navigation .is-disabled {
	background: #eee;
	color: #666;
}

@media (max-width: 900px) {
	.may9-reading__query .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.single-post .l-main__body.p-entry {
		grid-template-columns: minmax(0, 1fr);
	}

	body.single-post .may9-reading-detail__info,
	body.single-post .may9-reading-detail__image,
	body.single-post .p-entry__content,
	body.single-post .p-entry__foot {
		grid-column: 1;
		grid-row: auto;
	}

	body.single-post .may9-reading-detail__info {
		margin-bottom: 30px;
	}
}

@media (max-width: 600px) {
	.may9-reading {
		padding-block: 48px;
	}

	.may9-reading__query .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}

	.may9-reading-detail__navigation {
		gap: 8px;
	}

	.may9-reading-detail__navigation a,
	.may9-reading-detail__navigation span {
		padding-inline: 8px;
		font-size: 13px;
	}
}

.may9-privacy {
	width: min(100%, var(--may9-content-width));
	margin-inline: auto;
	padding-block: 80px 117px;
	color: var(--may9-color-ink);
	font-family: var(--may9-font-sans);
}

.may9-privacy .may9-privacy__columns {
	display: grid;
	grid-template-columns: 347px minmax(0, 720px);
	gap: 22px;
	margin: 0;
}

.may9-privacy__heading-column,
.may9-privacy__body {
	min-width: 0;
	margin: 0;
}

.may9-privacy .may9-privacy__title {
	margin: 0;
	font-size: 24px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-privacy__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-size: 14px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 2;
}

.may9-privacy__body > * {
	margin: 0;
}

.may9-privacy__item,
.may9-privacy__item > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* 項目内の間隔はgapへ集約し、段落・リストの標準マージンを重ねない。 */
.may9-privacy .may9-privacy__item > .wp-block-group__inner-container > * {
	margin-block: 0;
}

.may9-privacy .may9-privacy__item-title {
	margin: 0;
	font-size: 16px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-privacy p {
	margin: 0;
	font-size: 14px;
	font-weight: var(--may9-font-weight-medium);
	line-height: 2;
}

@media (max-width: 900px) {
	.may9-privacy .may9-privacy__columns {
		grid-template-columns: 270px minmax(0, 1fr);
		gap: 24px;
	}
}

@media (max-width: 767px) {
	.may9-privacy {
		padding-block: 48px 80px;
	}

	.may9-privacy .may9-privacy__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

/* お問い合わせページはフォームとポリシーを管理画面のブロックから表示する。 */
.may9-contact {
	color: var(--may9-color-ink);
	font-family: var(--may9-font-sans);
}

.may9-contact__form-section {
	box-sizing: border-box;
	width: min(calc(100% - (var(--may9-page-gutter) * 2)), 718px);
	margin-inline: auto;
	padding-block: 80px;
}

.may9-contact__form-section > .wp-block-group__inner-container > * {
	margin-block: 0;
}

.may9-contact__form-section .may9-contact__lead-title {
	margin-bottom: 24px;
	font-size: 24px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-contact__form-section p {
	font-size: 16px;
	line-height: 2;
}

.may9-contact__form-section .wpcf7 {
	margin-top: 45px;
}

.may9-contact-form .may9-contact-form__field {
	position: relative;
	margin-bottom: 24px;
}

.may9-contact-form__field > label {
	position: absolute;
	z-index: 1;
	top: 8px;
	left: 16px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
}

.may9-contact-form__field .wpcf7-form-control-wrap,
.may9-contact-form__field .wpcf7-form-control {
	display: block;
	width: 100%;
}

.may9-contact-form__field .wpcf7-form-control {
	box-sizing: border-box;
	height: 58px;
	padding: 8px 16px;
	border: 1px solid #727272;
	border-radius: 8px;
	background: var(--may9-color-surface);
	color: var(--may9-color-ink);
	font: inherit;
}

.may9-contact-form__field--message .wpcf7-form-control {
	min-height: 200px;
	resize: vertical;
}

.may9-contact-form__type {
	min-width: 0;
	margin: 30px 0 26px;
	padding: 0;
	border: 0;
}

.may9-contact-form__type legend {
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
}

.may9-contact-form__type .wpcf7-radio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px;
}

.may9-contact-form__type .wpcf7-list-item {
	min-width: 0;
	margin: 0;
}

.may9-contact-form__type .wpcf7-list-item label {
	display: block;
	position: relative;
	cursor: pointer;
}

.may9-contact-form__type input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.may9-contact-form__type .wpcf7-list-item-label {
	display: flex;
	box-sizing: border-box;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
	border: 2px solid var(--may9-color-accent);
	border-radius: var(--may9-radius-pill);
	background: var(--may9-color-surface);
	font-size: 14px;
	font-weight: var(--may9-font-weight-bold);
	line-height: 1.5;
	text-align: center;
}

.may9-contact-form__type input:checked + .wpcf7-list-item-label {
	background: var(--may9-color-accent);
}

.may9-contact-form__type input:focus-visible + .wpcf7-list-item-label,
.may9-contact-form__field .wpcf7-form-control:focus-visible,
.may9-contact-form__acceptance input:focus-visible,
.may9-contact-form__submit input:focus-visible {
	outline: 3px solid var(--may9-color-accent);
	outline-offset: 3px;
}

.may9-contact-form__field .wpcf7-form-control:focus {
	border-color: var(--may9-color-accent);
	outline: 3px solid var(--may9-color-accent);
	outline-offset: 3px;
	box-shadow: none;
}

.may9-contact-form__acceptance {
	margin: 26px 0 24px;
	font-size: 14px;
	text-align: center;
}

.may9-contact-form__acceptance .wpcf7-list-item {
	margin: 0;
}

.may9-contact-form__acceptance label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.may9-contact-form__acceptance input {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--may9-color-accent);
}

.may9-contact-form__submit {
	position: relative;
	width: min(100%, 375px);
	margin-inline: auto;
	text-align: center;
}

.may9-contact-form__submit p {
	margin: 0;
}

/* スピナーはボタン内の右側に重ね、非表示時も中央揃えをずらさない。 */
.may9-contact-form__submit .wpcf7-spinner {
	position: absolute;
	top: 50%;
	inset-inline-end: 18px;
	margin: 0;
	transform: translateY(-50%);
}

.may9-contact-form__submit input {
	display: block;
	width: 100%;
	min-height: 58px;
	border: 0;
	border-radius: 50px;
	background: var(--may9-color-accent);
	color: var(--may9-color-ink);
	font: 700 20px/1.5 var(--may9-font-sans);
	cursor: pointer;
}

.may9-contact__privacy-section {
	background: var(--may9-color-surface-muted);
}

.may9-contact > .wp-block-group__inner-container > .may9-contact__privacy-section {
	margin-block: 0;
}

/* PCの配置を維持し、狭い画面で発生する折り返し・画面外へのずれだけを補う。 */
@media (min-width: 768px) and (max-width: 1279px) {
	.may9-about-intro__title {
		max-width: 100%;
		padding: 2px 5px;
		background: var(--may9-color-accent);
		font-size: 32px;
	}
}

@media (max-width: 1279px) {
	.may9-home-hero,
	.may9-home-about {
		width: calc(100vw - var(--ark-scrollbar_width, 0px));
		margin-left: calc(50% - (100vw - var(--ark-scrollbar_width, 0px)) / 2);
	}

	.c-postContent > .may9-about-intro,
	.c-postContent > .may9-about-details,
	.c-postContent > .may9-about-faq,
	.c-postContent > .may9-about-site-info,
	.c-postContent > .may9-faq-page {
		width: calc(100vw - var(--ark-scrollbar_width, 0px)) !important;
	}
}

@media (max-width: 767px) {
	.may9-home-hero__title,
	.may9-about-intro__title {
		max-width: 100%;
		padding: 2px 5px;
		background: var(--may9-color-accent);
		font-size: clamp(20px, 6vw, 28px);
		line-height: 1.5;
	}

	.c-postContent > .may9-home-works.has-background {
		padding-block: 56px;
	}

	.may9-contact__form-section .may9-contact__lead-title {
		font-size: 22px;
	}

	.may9-contact-form__submit input {
		width: 100%;
		max-width: 375px;
	}

	.may9-home-profile__name-row > .wp-block-group__inner-container {
		flex-wrap: wrap;
		gap: 4px 10px;
	}
}

.may9-contact__privacy-section .may9-privacy {
	width: min(calc(100% - (var(--may9-page-gutter) * 2)), var(--may9-content-width));
	margin-inline: auto;
	padding-block: 80px;
}

/* ドロワー表示となる中間幅でもロゴを左へ揃える。 */
@media (max-width: 999px) {
	#header .l-header__body {
		grid-template-columns: [left] 0 [center] 1fr [right] 0 [search] 0 [menu] 40px;
	}

	#header .l-header__center {
		justify-self: start;
	}
}

@media (max-width: 767px) {
	.may9-contact__form-section {
		padding-block: 48px 64px;
	}

	.may9-contact-form__type .wpcf7-radio {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.may9-contact__privacy-section .may9-privacy {
		padding-block: 48px 64px;
	}

	.may9-cta__inner {
		padding-bottom: 40px;
	}

	.may9-cta__image {
		width: min(351px, 75%);
	}

	/* MVのイラストだけ左右いっぱいにし、文章には通常の余白を残す。 */
	.may9-about-intro__inner {
		width: 100%;
	}

	.may9-about-intro__content {
		width: calc(100% - 32px);
		margin-inline: auto;
	}

	.may9-reading__categories {
		gap: 10px;
	}

	.may9-reading .may9-reading__category.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color) {
		min-height: 40px;
		padding-inline: 14px;
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	#header .c-iconBtn.-menuBtn {
		color: var(--may9-color-ink);
	}

	#drawer_menu .c-drawerNav,
	#drawer_menu .c-drawerNav .menu-item {
		border: 0;
	}

	#drawer_menu .c-drawerNav__a,
	#drawer_menu .p-drawer__close {
		font-size: 16px;
		font-weight: var(--may9-font-weight-bold);
	}

	/* ユーザー提供の見本に合わせ、画像に黄色見出しと白い本文帯を重ねる。 */
	.may9-home-hero > .wp-block-group__inner-container {
		display: grid;
	}

	.may9-home-hero__image {
		position: absolute;
		inset: 0 auto auto -8%;
		width: 150%;
		height: 100%;
		transform: none;
	}

	.may9-home-hero__image img {
		height: 100%;
		aspect-ratio: auto;
	}

	.may9-home-hero__content {
		min-height: max(440px, calc((100vw - var(--ark-scrollbar_width, 0px)) * 1.17));
		padding-block: 56px 80px;
	}

	.may9-home-hero::after {
		content: none;
	}

	.c-postContent .may9-home-hero__text {
		margin-top: 88px;
		color: var(--may9-color-ink);
		font-size: 14px;
		line-height: 1.9;
	}

	.may9-home-hero__text-band {
		padding-inline: 3px;
		background: var(--may9-color-surface);
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

	/* 本文グループをスマホだけ透過させ、見出し・画像・本文を並べ替える。 */
	.may9-home-profile__body,
	.may9-home-profile__body > .wp-block-group__inner-container {
		display: contents;
	}

	.may9-home-profile__title {
		order: 0;
		margin: 0;
	}

	.may9-home-profile__image {
		order: 1;
	}

	.c-postContent .may9-home-profile__name-row {
		order: 2;
		margin: 0;
	}

	.c-postContent .may9-home-profile__text {
		order: 3;
		margin: 0;
	}

	.may9-about-intro {
		padding-top: 0;
	}

	.may9-about-intro__lead {
		font-size: 17px;
	}

	.may9-about-intro__text {
		font-size: 12px;
	}

	.may9-about-intro__text br.may9-mobile-sentence-break {
		display: initial;
	}

	.may9-contact__form-section .may9-contact__lead-title {
		font-size: 20px;
	}

	.may9-contact__form-section > .wp-block-group__inner-container > p {
		font-size: 14px;
	}

	/* ラベルは通常フローに残し、入力文字の上下余白を同じにする。 */
	.may9-contact-form__field > label {
		top: 6px;
	}

	.may9-contact-form__field .wpcf7-form-control {
		height: auto;
		min-height: 34px;
		padding: 8px;
		font-size: 16px;
		line-height: 1.5;
	}

	.may9-contact-form__field--message .wpcf7-form-control {
		min-height: 200px;
	}

	.may9-works-archive__simple-query .wp-block-post {
		padding: 14px;
	}
}

/* 見出し背面の光は左を細く、右へ向かって広がる形にする。 */
.may9-home-hero__title,
.may9-about-intro__title {
	padding: 0 0.125em;
	position: relative;
	isolation: isolate;
	background: transparent;
}

.may9-home-hero__title::before,
.may9-about-intro__title::before {
	position: absolute;
	inset: -0.45em 0;
	z-index: -1;
	background: var(--may9-color-accent);
	clip-path: polygon(0 32%, 100% 12%, 100% 88%, 0 76%);
	content: "";
	transform-origin: left center;
}

/* JavaScriptで表示開始を管理する場合だけ隠す。無効時・編集画面は静止表示。 */
.may9-mv-motion .may9-home-hero__title::before,
.may9-mv-motion .may9-about-intro__title::before {
	transform: scaleX(0);
	clip-path: polygon(0 32%, 100% 32%, 100% 76%, 0 76%);
}

.may9-mv-motion .may9-mv-title-text,
.may9-mv-motion .may9-home-hero__text,
.may9-mv-motion .may9-about-intro__lead,
.may9-mv-motion .may9-about-intro__text,
.may9-mv-motion .wp-block-buttons {
	opacity: 0;
}

.is-may9-mv-visible .may9-home-hero__title::before,
.is-may9-mv-visible .may9-about-intro__title::before {
	animation: may9-mv-band-in 0.65s ease-in both, may9-mv-beam-open 0.6s ease-in 1s both;
}

/* 平行な帯→見出し文字→右側の広がり。本文は広がりの完成を待たない。 */
.is-may9-mv-visible .may9-mv-title-text {
	animation: may9-mv-fade-in 0.35s ease-out 0.65s both;
}

.is-may9-mv-visible .may9-home-hero__text,
.is-may9-mv-visible .may9-about-intro__lead,
.is-may9-mv-visible .may9-about-intro__text,
.is-may9-mv-visible .wp-block-buttons {
	animation: may9-mv-fade-in 0.6s ease-out 1s both;
}

@keyframes may9-mv-band-in {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes may9-mv-beam-open {
	from { clip-path: polygon(0 32%, 100% 32%, 100% 76%, 0 76%); }
	to { clip-path: polygon(0 32%, 100% 12%, 100% 88%, 0 76%); }
}

@keyframes may9-mv-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.may9-mv-motion .may9-home-hero__title::before,
	.may9-mv-motion .may9-about-intro__title::before {
		animation: none;
		transform: none;
		clip-path: polygon(0 32%, 100% 12%, 100% 88%, 0 76%);
	}

	.may9-mv-motion .may9-mv-title-text,
	.may9-mv-motion .may9-home-hero__text,
	.may9-mv-motion .may9-about-intro__lead,
	.may9-mv-motion .may9-about-intro__text,
	.may9-mv-motion .wp-block-buttons {
		animation: none;
		opacity: 1;
	}
}

.may9-information-detail__head .c-postTimes {
	color: var(--may9-color-ink);
	font-size: 14px;
	font-weight: var(--may9-font-weight-medium);
}

@media (max-width: 767px) {
	.may9-page-title__subtitle {
		font-size: 14px;
	}

	.may9-home-hero__title,
	.may9-about-intro__title {
		font-size: 7vw;
	}

	.may9-home-hero__content {
		padding-top: 75px;
	}
}