/**
 * 画面の幅ごとの表示の調整（2026-10-31）
 *
 * 読み込みはテーマとプラグインの CSS の後（responsive.php）。
 * スマホ（575px 以下）・タブレット（991px 以下）の手当てが中心。PC にも効くのは
 * 1-2（コンテンツ幅の上限）、2-2（ヘッダー）、8（余白の段階）だけ。
 */

/* ------------------------------------------------------------
 * 1. 本文の幅
 * カスタマイザーの「コンテナの最大幅」の xs（575px 以下）に 320 が入っていて、
 * スマホでも本文が 320px（左右の余白を除くと 290px）に固定されていた。
 * その値は responsive.php で外し、ここで左右の余白を 20px にそろえる。
 * ------------------------------------------------------------ */
@media (max-width: 575.98px) {
	:root {
		--vk-width-container-padding: 20px;
	}
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ------------------------------------------------------------
 * 1-2. コンテンツ幅の上限
 * テーマのコンテンツ幅（--vk-width-container。タブレット 840px・PC 1140px／1280px）は、
 * 画面がそれより狭くてもその値のまま使われ、全幅の帯の中身（vk-bg-offset など）が画面より広くなって
 * 左右の端に張り付いていた（820px で「このような悩みを解決します！」が左端から 0px）。画面の幅を上限にする
 * ------------------------------------------------------------ */
@media (768px <= width < 992px) {
	html:root body {
		--vk-width-container: min(840px, 100svw);
	}
}
@media (992px <= width < 1200px) {
	html:root body {
		--vk-width-container: min(1140px, 100svw);
	}
}
@media (1200px <= width) {
	html:root body {
		--vk-width-container: min(1280px, 100svw);
	}
}
/* タブレットの左右の余白はテーマの既定（15px）では狭いので 24px にする（スマホは 20px） */
@media (576px <= width < 992px) {
	html:root body {
		--vk-width-container-padding: 24px;
	}
	.container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ------------------------------------------------------------
 * 2. 改行の位置
 * 見出しは行の長さをそろえる（最後の行に 1〜2 文字だけ残らないように）。
 * 本文には text-wrap: pretty を使わない（iPhone の Safari では段落の全行が短く詰められ、右に大きな空きができた）。
 * .jh-phrase は phrase-break.js が付ける。文節の切れ目（<wbr>）以外では改行しない。
 * タブレット（991px 以下）までが対象。タブレットも段組みの列が細く、単語の途中で切れていた。
 * ------------------------------------------------------------ */
@media (max-width: 991.98px) {
	h1, h2, h3, h4, h5, h6,
	dt, th, figcaption,
	.vk_button_link_txt,
	.postList_title, .media-heading, .vk_post_title,
	li.jh-phrase {
		text-wrap: balance;
	}
	/* 表のセルなどに word-break: break-word が付いているので !important で上書きする */
	.jh-phrase {
		word-break: keep-all !important;
		overflow-wrap: normal !important;
	}
	/* 開きかっこと次の 1 文字（phrase-break.js が包む）。Safari は keep-all のとき「「」の直後で改行することがある */
	.jh-nobr {
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------
 * 2-2. ヘッダー（PC のメニューが入りきらない幅）
 * ロゴ 276px＋メニュー 8 項目 926px＋すき間で、本文の幅 1250px（画面 1280px）ちょうど。
 * それより狭い画面ではロゴが押しつぶされて見えなくなっていた（1009px でロゴの幅 5px）。
 * - 1200〜1279px：メニューの左右の余白を詰めて収める
 * - 1199px 以下：メニューをしまい、スマホと同じハンバーガーにする（テーマの切り替えは 992px）
 * ------------------------------------------------------------ */
@media (992px < width) {
	.site-header--layout--nav-float .site-header-logo {
		flex-shrink: 0;
		width: auto;
	}
}
@media (1200px <= width < 1280px) {
	.device-pc .global-nav-list > li > a {
		padding-left: 1em;
		padding-right: 1em;
	}
	.site-header--layout--nav-float .site-header-logo {
		margin-right: 1em;
	}
}
@media (992px < width < 1200px) {
	body .site-header .global-nav {
		display: none !important;
	}
	body.device-pc .vk-mobile-nav-menu-btn,
	body.device-pc .vk-mobile-nav {
		display: block;
	}
}

/* ------------------------------------------------------------
 * 3. ページ上部の見出し（ページヘッダー）
 * 28px のままだと、お知らせなどの長い題名が 5 行になる
 * ------------------------------------------------------------ */
@media (max-width: 575.98px) {
	.page-header-title {
		font-size: clamp(1.5rem, 6.4vw, 1.75rem);
	}
	.single .page-header-title {
		font-size: 1.375rem;
		line-height: 1.5;
	}
}

/* ------------------------------------------------------------
 * 4. 表
 * ------------------------------------------------------------ */
@media (max-width: 575.98px) {
	/* 「列の幅を固定」の表は、狭い画面では列が均等割りになり本文の列が細くなるので、中身に合わせる */
	.wp-block-table table.has-fixed-layout {
		table-layout: auto;
	}

	/* 採用情報の募集要項：項目名（【職　種】など）の列は折り返さず、残りを本文に回す */
	.page-id-3980 .wp-block-table td:first-child {
		width: 1%;
		white-space: nowrap;
	}

	/* 企業情報の会社概要・支社：スマホでは項目名と内容が縦に積まれるので、
	   項目名（PC では右寄せ）を左寄せの小見出しにして、内容とひとまとまりに見せる */
	.page-id-1066 .wp-block-table td.has-text-align-right {
		padding-bottom: 0;
		border-bottom: 0;
		text-align: left;
		font-size: 0.875rem;
		color: #777;
	}
	.page-id-1066 .wp-block-table td.has-text-align-right + td {
		padding-top: 0.25rem;
	}
}

/* ------------------------------------------------------------
 * 5. お問い合わせフォーム（追加 CSS の幅指定がスマホで狭すぎる）
 * ------------------------------------------------------------ */
@media (max-width: 767.98px) {
	/* 追加 CSS は後から出力されるので、.wpcf7 を付けて優先度を上げる */
	.wpcf7 table.CF7_table {
		width: 100%;
	}
	.wpcf7 p.CF7_table_under,
	.wpcf7 p.CF7_table_under_center {
		width: auto;
	}
}

/* ------------------------------------------------------------
 * 6. トップページ
 * ------------------------------------------------------------ */
@media (max-width: 767.98px) {
	/* 「SOLUTION」の透かし文字（本文のカスタム CSS で 15vw）が画面の右からはみ出す */
	.home p[style*="#00000012"] {
		font-size: clamp(40px, 12vw, 120px);
	}
}
@media (max-width: 575.98px) {
	/* 「このような悩みを解決します！」の 2 列のカード：左右の余白（1.25rem）を詰めて、文字の幅を広げる */
	.home .vk_gridColumn_item_inner[style*="padding-top:3.5rem"] {
		padding-right: 0.75rem !important;
		padding-left: 0.75rem !important;
	}
}

/* ------------------------------------------------------------
 * 7. ドローン撮影
 * プラン例の白い枠（左右 2.4em）と「ご注意点」の枠（左右 3em）の余白が PC 用のままで、
 * スマホでは中の文が 1 行 10 文字ほどまで細くなる。余白はブロックの style 属性なので !important で上書きする
 * ------------------------------------------------------------ */
@media (max-width: 575.98px) {
	.page-id-11543 .wp-block-group[style*="padding-right:2.4em"] {
		padding-right: 1em !important;
		padding-left: 1em !important;
	}
	.page-id-11543 .wp-block-column[style*="padding-right:3em"] {
		padding-right: 1.25em !important;
		padding-left: 1.25em !important;
	}
}

/* ------------------------------------------------------------
 * 8. 上下の余白の段階
 * 余白はほとんどが VK Blocks の「余白の段階」（--vk-margin-sm〜xxl）で決まる。スペーサーの高さと、
 * ブロックの「上下の余白」設定（vk_block-margin-*）の両方がこの値を使う。
 * 設定（VK Blocks の余白設定）はスマホでも lg 4rem（56px）あり、前後の要素の余白と足されて
 * 100〜150px の空白になっていた。段階そのものを、画面の幅に合わせて締める（sm 以下は変えない）。
 *   スマホ      md 3→2rem   lg 4→2.5rem  xl 6→3.5rem  xxl 9→5rem
 *   タブレット  md 4→3rem   lg 5→3.5rem  xl 6→4.5rem  xxl 9→6rem
 *   PC          lg 6→5rem   xxl 9→7rem（md・xl はそのまま）
 * 高さを直接書いたスペーサー（style="height:80px" など）は、段階の lg と同じ高さを上限にする。
 * VK の設定は :root と body に出力されるので、それより強い html:root body で上書きする。
 * ------------------------------------------------------------ */
@media (max-width: 575.98px) {
	html:root body {
		--vk-margin-md: 2rem;
		--vk-margin-lg: 2.5rem;
		--vk-margin-xl: 3.5rem;
		--vk-margin-xxl: 5rem;
	}
	.vk_spacer-display-mobile,
	.wp-block-spacer {
		max-height: 2.5rem;
	}
}
@media (576px <= width < 992px) {
	html:root body {
		--vk-margin-md: 3rem;
		--vk-margin-lg: 3.5rem;
		--vk-margin-xl: 4.5rem;
		--vk-margin-xxl: 6rem;
	}
	.vk_spacer-display-tablet,
	.wp-block-spacer {
		max-height: 3.5rem;
	}
}
@media (992px <= width) {
	html:root body {
		--vk-margin-lg: 5rem;
		--vk-margin-xxl: 7rem;
	}
	.vk_spacer-display-pc,
	.wp-block-spacer {
		max-height: 6rem;
	}
}

/* 次の要素が上に食い込んでくる帯（vk-block-top-over：カードの並びを帯に重ねる作り）は、
   帯の高さが食い込む量（14rem など）を前提に作られている。帯の中だけ余白を元の値に戻す
   （縮めると、帯の見出しがカードの下に隠れる） */
:where(.wp-block-group, .wp-block-cover, .vk_outer, .wp-block-vk-blocks-outer):has(+ [class*="vk-block-top-over"]) [class*="vk_spacer-display"],
:where(.wp-block-group, .wp-block-cover, .vk_outer, .wp-block-vk-blocks-outer):has(+ [class*="vk-block-top-over"]) .wp-block-spacer {
	max-height: none;
}
@media (max-width: 575.98px) {
	:where(.wp-block-group, .wp-block-cover, .vk_outer, .wp-block-vk-blocks-outer):has(+ [class*="vk-block-top-over"]) {
		--vk-margin-md: 3rem;
		--vk-margin-lg: 4rem;
		--vk-margin-xl: 6rem;
		--vk-margin-xxl: 9rem;
	}
}
@media (576px <= width < 992px) {
	:where(.wp-block-group, .wp-block-cover, .vk_outer, .wp-block-vk-blocks-outer):has(+ [class*="vk-block-top-over"]) {
		--vk-margin-md: 4rem;
		--vk-margin-lg: 5rem;
		--vk-margin-xl: 6rem;
		--vk-margin-xxl: 9rem;
	}
}
@media (992px <= width) {
	:where(.wp-block-group, .wp-block-cover, .vk_outer, .wp-block-vk-blocks-outer):has(+ [class*="vk-block-top-over"]) {
		--vk-margin-lg: 6rem;
		--vk-margin-xxl: 9rem;
	}
}

/* ------------------------------------------------------------
 * 9. 画面いっぱいの高さの帯（ソリューション）
 * 7 つの帯が「画面の高さ（100vh）＋上下 192px の余白」で、スマホでは中身の少ない画面が続く。
 * スマホ・タブレットでは中身の高さに合わせる。先頭のイラストの帯（has-parallax。背景画像だけで中身が無い）は除く
 * ------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.page-id-4768 .wp-block-cover:not(.has-parallax)[style*="min-height:100vh"] {
		min-height: 0 !important;
	}
	.page-id-4768 .wp-block-cover[style*="padding-top:192px"] {
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	}
	.page-id-4768 .wp-block-cover[style*="padding-top:96px"] {
		padding-top: 3rem !important;
		padding-bottom: 3.5rem !important;
	}
	.page-id-4768 .wp-block-cover[style*="padding-top:36px"] {
		padding-bottom: 3.5rem !important;
	}
}

/* ------------------------------------------------------------
 * 10. トップ「東横INN」の帯（タブレット）
 * 右の画像の列（本文のカスタム CSS で幅 100vw）が、画面 782〜991px では左の見出しの上にかぶさり、
 * 「東横INN OPEN」が画像の下に隠れていた。この幅ではスマホと同じく縦に積む
 * ------------------------------------------------------------ */
@media (782px <= width < 992px) {
	.home .wp-block-group.alignfull.has-link > .wp-block-columns:has(> .wp-block-column > .wp-block-columns.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}
	.home .wp-block-group.alignfull.has-link > .wp-block-columns:has(> .wp-block-column > .wp-block-columns.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ------------------------------------------------------------
 * 11. 背景写真が無くなった帯の文字色（全幅）
 * トップ「わたしたちが選ばれる4つの理由」は、背景写真（bg-3pr）の上に白い見出しを置く作りだが、
 * 写真がサーバーに無く（2026-10 のメディア整理の調査で「参照先が存在しない」とされたもの）、薄い水色の上で読めなかった。
 * すぐ上の「このような悩みを解決します！」と同じ色にする。写真を戻すときはこの指定を外す
 * （「私たちにご相談ください」の背景動画 contact.mp4 は、CTA 投稿 1950 から動画を外して色の帯にした。2026-10-31）
 * ------------------------------------------------------------ */
.home .vk-headding-lp mark.has-white-color {
	color: #333 !important;
}

/* ------------------------------------------------------------
 * 12. 事業紹介：画像から各サービスの見出しまでの間隔をそろえる
 * 「Web制作のご紹介」だけ作りが違い（段組みではなく画像の下に見出し）、画像との間が 28px と狭かった。
 * スマホで段組みが縦に積まれると「アプリ制作」は 84px、「印刷・製本」は 56px とばらついていたので、56px にそろえる
 * ------------------------------------------------------------ */
.page-id-995 .vk_outer_container > h3.is-style-vk-heading-plain {
	margin-top: 56px !important;
}
@media (max-width: 781.98px) {
	.page-id-995 .vk-cols--reverse:not(.are-vertically-aligned-center) > .wp-block-column:has(> h3.is-style-vk-heading-plain:first-child) {
		padding-top: 0 !important;
	}
	.page-id-995 .vk-cols--reverse:not(.are-vertically-aligned-center) > .wp-block-column > h3.is-style-vk-heading-plain:first-child {
		margin-top: 28px !important;
	}
}