/**
 * トップページをスマホで短くする（2026-10-31 改善案 1）
 *
 * スマホ（767px 以下）でトップが約 14,500px（画面 17 枚分）あった。中身（文章・リンク）は変えず、見せ方だけを変える。
 * PC・タブレットの見た目は変えない（1 だけ、グループで包んだことによる余白の補正が PC にも効く）。
 * 読み込みはトップページだけ（responsive.php）。
 *   1. 上部のバナー 4 つ：横長 2 つは全幅、正方形 2 つ（ECサイト・100周年）は 2 列に並べる
 *   2. 紹介の帯 5 つ（About us・Our services・CSR・Solution・Recruit）：左に小さな写真、右に見出しと本文 2 行の行にする
 *   3. 「わたしたちが選ばれる4つの理由」：左に小さなアイコン、本文は 2 行で止めて「続きを読む」で開く（top-compact.js）
 *   4. VIEW MORE の上下の余白をそろえる
 *   5. SOLUTION のタブ：対談企画秘話を外し（全幅）、スマホは各タブ 1 件
 *   6. 「このような悩みを解決します！」：1 列にして、アイコンを左に小さく
 */

/* ------------------------------------------------------------
 * 1. 上部のバナー（本文のグループ .jh-banner-strip。2026-10-31 に 4 つのバナーを包んだ）
 * ------------------------------------------------------------ */
/* PC・タブレット：グループで包むと、先頭の採用バナー（画像）の下の余白（figure の 1em）が消えるので戻す */
@media (768px <= width) {
	.home .jh-banner-strip > figure.wp-block-image {
		margin-bottom: 1em;
	}
}
@media (max-width: 767.98px) {
	.home .jh-banner-strip {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.home .jh-banner-strip > .vk_spacer {
		display: none;
	}
	.home .jh-banner-strip > * {
		min-width: 0;
		margin: 0 !important;
	}
	/* 採用（126日）：全幅・1 段目 */
	.home .jh-banner-strip > figure.wp-block-image {
		grid-column: 1 / -1;
		order: 1;
	}
	/* ECサイト・100周年：正方形を 2 列で 2 段目 */
	.home .jh-banner-strip > .wp-block-columns:has(a[href*="theshop.jp"]) {
		order: 2;
	}
	.home .jh-banner-strip > .wp-block-columns:has(a[href*="/100th/"]) {
		order: 3;
	}
	/* コンテンツ一覧：全幅・3 段目 */
	.home .jh-banner-strip > .wp-block-columns:has(a[href*="/content/"]) {
		grid-column: 1 / -1;
		order: 4;
	}
	.home .jh-banner-strip .wp-block-column,
	.home .jh-banner-strip .wp-block-columns {
		margin: 0 !important;
	}
	.home .jh-banner-strip .wp-block-columns:has(a[href*="theshop.jp"]) figure,
	.home .jh-banner-strip .wp-block-columns:has(a[href*="theshop.jp"]) img {
		width: 100%;
		height: auto;
		margin: 0;
	}
	/* 100周年はカバー（高さ 350px 固定）なので、正方形に合わせる */
	.home .jh-banner-strip .wp-block-columns:has(a[href*="/100th/"]) .wp-block-cover {
		min-height: 0 !important;
		aspect-ratio: 1 / 1 !important;
	}
	/* バナーそのものがリンクなので、100周年の「VIEW MORE」と直前の余白はスマホでは出さない */
	.home .jh-banner-strip + .vk_spacer,
	.home .jh-banner-strip ~ .wp-block-vk-blocks-button:has(a[href*="/100th/"]) {
		display: none;
	}
}

/* ------------------------------------------------------------
 * 2. 紹介の帯 5 つ（About us〜Recruit。英語の飾り見出し h2.heading-decoration を持つ帯）
 * スマホでは 1 つ 650〜800px あった。グラデーションの背景をやめ、写真＋見出し＋本文 2 行の行にする
 * ------------------------------------------------------------ */
@media (max-width: 767.98px) {
	.home .entry-body > .wp-block-group.vk-bg-offset:has(h2.heading-decoration) {
		border-top: 1px solid #e5e5e5;
		padding: 20px 0 !important;
	}
	.home .entry-body > .wp-block-group.vk-bg-offset:has(h2.heading-decoration) + .vk_spacer:has(+ .wp-block-group.vk-bg-offset h2.heading-decoration) {
		display: none;
	}
	/* グラデーションの背景と帯の背景色 */
	.home .vk-bg-offset:has(h2.heading-decoration) > .vk-bg-offset-bg,
	.home .vk-bg-offset:has(h2.heading-decoration) .vk_outer-background-area {
		display: none !important;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) .vk_outer,
	.home .vk-bg-offset:has(h2.heading-decoration) .vk_outer > div,
	.home .vk-bg-offset:has(h2.heading-decoration) .vk_outer_container {
		padding: 0 !important;
		margin: 0 auto !important;
		max-width: calc(100% - var(--vk-width-container-padding) * 2) !important;
		background: none !important;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) .vk_outer > div {
		max-width: none !important;
	}
	/* 写真（左・112px）と文（右）の 2 列 */
	.home .vk-bg-offset:has(h2.heading-decoration) .wp-block-columns {
		display: grid !important;
		grid-template-columns: 112px 1fr;
		gap: 0 16px;
		align-items: start;
		margin: 0 !important;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) .wp-block-column {
		margin: 0 !important;
		padding: 0 !important;
		min-width: 0;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) .wp-block-column:has(> figure) {
		grid-column: 1;
		grid-row: 1;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) .wp-block-column:has(> h2) {
		grid-column: 2;
		grid-row: 1;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) figure {
		margin: 0 !important;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) figure img {
		width: 112px !important;
		height: 84px !important;
		object-fit: cover;
		border-radius: 4px;
		box-shadow: none !important;
	}
	/* 英語の見出し（About us など）は小さなラベルに、日本語（企業情報など）を見出しに */
	.home .vk-bg-offset:has(h2.heading-decoration) h2.heading-decoration {
		margin: 0 0 2px !important;
		padding: 0 !important;
		border: 0 !important;
		font-size: 12px !important;
		line-height: 1.4;
		letter-spacing: 0.06em;
		color: var(--vk-color-primary, #8160fc) !important;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) h2.heading-decoration::before,
	.home .vk-bg-offset:has(h2.heading-decoration) h2.heading-decoration::after {
		display: none !important;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) h2 + p {
		margin: 0 0 4px !important;
		font-size: 16px !important;
		font-weight: 700;
		line-height: 1.4;
		color: #222 !important;
	}
	/* 英語の副題（One team など）はスマホでは省く */
	.home .vk-bg-offset:has(h2.heading-decoration) .wp-block-column:has(> h2) > h3 {
		display: none;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) .wp-block-column:has(> h2) > p.wp-block-paragraph {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin: 0 0 6px !important;
		font-size: 13px !important;
		line-height: 1.65;
		color: #555 !important;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) .vk_spacer {
		display: none;
	}
	/* VIEW MORE はテキストのリンクにする */
	.home .vk-bg-offset:has(h2.heading-decoration) .vk_button {
		margin: 0 !important;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) .vk_button .vk_button_link {
		display: inline-flex;
		align-items: center;
		min-height: 0;
		padding: 2px 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		color: var(--vk-color-primary, #8160fc) !important;
		font-size: 13px !important;
		font-weight: 700;
	}
	.home .vk-bg-offset:has(h2.heading-decoration) .vk_button .vk_button_link_txt {
		color: inherit !important;
	}
}

/* ------------------------------------------------------------
 * 3. 「わたしたちが選ばれる4つの理由」のカード
 * 1 枚 360px 前後あった。アイコンを左に小さく、本文は 2 行で止める（「続きを読む」は top-compact.js）
 * ------------------------------------------------------------ */
@media (max-width: 767.98px) {
	.home .vk-block-top-over-lg .vk_gridColumn_item {
		margin-bottom: 12px !important;
	}
	.home .vk-block-top-over-lg .vk_gridColumn_item_inner {
		display: grid;
		grid-template-columns: 52px 1fr;
		gap: 0 14px;
		padding: 18px 18px 16px !important;
		text-align: left;
	}
	.home .vk-block-top-over-lg .vk_gridColumn_item_inner > * {
		grid-column: 2;
		margin: 0 !important;
	}
	.home .vk-block-top-over-lg .vk_gridColumn_item_inner > .vk_icon {
		grid-column: 1;
		grid-row: 1 / span 4;
		align-self: start;
	}
	.home .vk-block-top-over-lg .vk_icon_frame {
		justify-content: flex-start;
		text-align: left !important;
	}
	.home .vk-block-top-over-lg .vk_icon_border {
		width: 52px !important;
		height: 52px !important;
	}
	.home .vk-block-top-over-lg .vk_icon_font {
		font-size: 26px !important;
	}
	.home .vk-block-top-over-lg p.vk-label {
		justify-self: start;
		padding: 1px 10px !important;
		font-size: 11px !important;
	}
	.home .vk-block-top-over-lg .vk_heading_title {
		margin: 4px 0 6px !important;
		text-align: left !important;
		font-size: 15px !important;
	}
	.home .vk-block-top-over-lg .vk_gridColumn_item_inner > p.wp-block-paragraph {
		font-size: 13px;
		line-height: 1.7;
	}
	.home .vk-block-top-over-lg .jh-clamp {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.home .vk-block-top-over-lg .jh-more {
		justify-self: start;
		margin-top: 6px !important;
		padding: 0;
		border: 0;
		background: none;
		color: var(--vk-color-primary, #8160fc);
		font-size: 13px;
		font-weight: 700;
		cursor: pointer;
	}
}

/* ------------------------------------------------------------
 * 4. ボタンの上下の余白（スマホ）
 * 「VIEW MORE」の上にスペーサー 35px＋前の段の余白、下に margin-top 100px のスペーサーがあり、
 * ボタンだけが離れて浮いて見えた。上は前の段の余白だけ（約 30px）、下は 48px にそろえる
 * ------------------------------------------------------------ */
@media (max-width: 767.98px) {
	.home .entry-body > .vk_spacer:has(+ .wp-block-vk-blocks-button) {
		display: none;
	}
	.home .entry-body > .wp-block-vk-blocks-button + .vk_spacer {
		height: 48px;
	}
	.home .entry-body > .wp-block-vk-blocks-button + .vk_spacer > * {
		height: 0 !important;
		max-height: none !important;
		margin-top: 0 !important;
	}
	/* SOLUTION の帯の中の VIEW MORE の下（35px） */
	.home .entry-body > .wp-block-group > .wp-block-vk-blocks-button + style + .vk_spacer,
	.home .entry-body > .wp-block-group > .wp-block-vk-blocks-button + .vk_spacer {
		height: 20px;
	}
	.home .entry-body > .wp-block-group > .wp-block-vk-blocks-button + style + .vk_spacer > *,
	.home .entry-body > .wp-block-group > .wp-block-vk-blocks-button + .vk_spacer > * {
		height: 0 !important;
		max-height: none !important;
		margin-top: 0 !important;
	}
}

/* ------------------------------------------------------------
 * 5. SOLUTION のタブの記事
 * 「対談企画秘話 ボクは休憩、まかせたAI。」（/sp/sp003/）はトップに出さない（全幅。山田さんの指示 2026-10-31）。
 * スマホでは記事が 1 列に縦に並ぶので、各タブ 1 件（いちばん新しいもの）だけにする。記事そのものは残る
 * ------------------------------------------------------------ */
.home .vk_tab .vk_post:has(a[href$="/sp/sp003/"]) {
	display: none !important;
}
@media (max-width: 767.98px) {
	.home .vk_tab .vk_tab_bodys_body .vk_post:not(:has(a[href$="/sp/sp003/"])) ~ .vk_post {
		display: none !important;
	}
}

/* ------------------------------------------------------------
 * 6. 「このような悩みを解決します！」（スマホ）
 * 2 列のカードで、上に大きな丸いアイコン（72px）が飛び出す作り。1 枚 235px で 3 段あった。
 * 1 列に縦に並べ、アイコンを左に小さく（44px）、右に見出しと説明を置く
 * ------------------------------------------------------------ */
@media (max-width: 767.98px) {
	.home .vk_gridColumn:has(.vk-icon-top-over) .vk_gridColumn_item {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin-bottom: 10px !important;
	}
	.home .vk_gridColumn:has(.vk-icon-top-over) .vk_gridColumn_item_inner {
		position: relative;
		display: grid;
		grid-template-columns: 44px 1fr;
		align-items: center;
		gap: 0 14px;
		padding: 14px 16px !important;
	}
	.home .vk_gridColumn:has(.vk-icon-top-over) .vk-icon-top-over {
		position: static !important;
		transform: none !important;
		grid-column: 1;
		margin: 0 !important;
	}
	.home .vk_gridColumn:has(.vk-icon-top-over) .vk_icon_border {
		width: 44px !important;
		height: 44px !important;
	}
	.home .vk_gridColumn:has(.vk-icon-top-over) .vk_icon_font {
		font-size: 20px !important;
	}
	.home .vk_gridColumn:has(.vk-icon-top-over) .wp-block-vk-blocks-heading {
		grid-column: 2;
		margin: 0 !important;
	}
	.home .vk_gridColumn:has(.vk-icon-top-over) .vk_heading {
		margin: 0 !important;
	}
	.home .vk_gridColumn:has(.vk-icon-top-over) .vk_heading_title {
		margin: 0 0 2px !important;
		font-size: 15px !important;
		text-align: left !important;
	}
	.home .vk_gridColumn:has(.vk-icon-top-over) .vk_heading_subtext {
		margin: 0 !important;
		font-size: 12px !important;
		line-height: 1.6;
		text-align: left !important;
	}
	/* 帯の下の余白（カードの下の margin 4rem の名残） */
	.home .vk_gridColumn:has(.vk-icon-top-over) {
		margin-bottom: 0 !important;
	}
}