/* MIRAQCEED テーマ。色と大きさは #112 のデモ（content/hp/top-demo-infobox-html-motion/body.html）に合わせる */

:root {
	--mq-key: #0e7c86;
	--mq-key-dark: #0a5f67;
	--mq-key-vivid: #14a0ab;
	--mq-pale: #e6f2f3;
	--mq-ink: #111111;
	--mq-logo-gray: #3e3a39;
	--mq-light: #f4f5f5;
	--mq-line: #dddddd;
	--mq-en: "Helvetica Neue", Arial, sans-serif;
	--mq-header-h: 88px;
	--mq-gutter: 40px;
	/* VK Blocks・VK ExUnit が使う色（Lightning が出していたもの） */
	--vk-color-primary: var(--mq-key);
	--vk-color-primary-dark: var(--mq-key-dark);
	--vk-color-primary-vivid: var(--mq-key-vivid);
	--vk-color-text-body: var(--mq-ink);
	--vk-color-text-link: var(--mq-key);
	--vk-color-text-link-hover: var(--mq-key-dark);
	--vk-color-border: rgba(0, 0, 0, .12);
	--vk-color-border-hr: rgba(0, 0, 0, .12);
	--vk-margin-elem: 1.5rem;
	--vk-size-text: 16px;
	--vk-size-radius: 4px;
}

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--mq-header-h); }
body {
	margin: 0;
	color: var(--mq-ink);
	background: #ffffff;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.04em;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--mq-key); }
a:hover { color: var(--mq-key-dark); }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.mq-skip:focus {
	z-index: 1000; top: 8px; left: 8px;
	width: auto; height: auto; padding: 8px 16px;
	clip: auto; background: #ffffff; color: var(--mq-ink);
}
.mq-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--mq-gutter); }
.mq-inner--wide { max-width: 1520px; }

/* ---------- ヘッダー ---------- */
.mq-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .96);
	transition: box-shadow .3s;
}
.admin-bar .mq-header { top: 32px; }
.mq-header.is-scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, .08); }
.mq-header__inner {
	display: flex; align-items: center; gap: 32px;
	height: var(--mq-header-h);
	padding: 0 var(--mq-gutter);
}
.mq-header__logo { display: block; flex: none; line-height: 0; }
.mq-header__logo img { display: block; width: auto; height: 52px; }
.mq-header__nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.mq-nav__list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mq-nav__list > li { position: relative; }
.mq-nav__list a {
	display: block; padding: 8px 14px;
	color: var(--mq-ink); text-decoration: none;
	font-size: 15px; font-weight: bold; line-height: 1.6;
	transition: color .3s;
}
.mq-nav__list > li > a { position: relative; }
.mq-nav__list > li > a::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
	height: 2px; background: var(--mq-key);
	transform: scaleX(0); transition: transform .3s;
}
.mq-nav__list > li:hover > a::after,
.mq-nav__list > .current-menu-item > a::after,
.mq-nav__list > .current-menu-ancestor > a::after { transform: scaleX(1); }
.mq-nav__list a:hover { color: var(--mq-key); }
.mq-nav__list .sub-menu {
	position: absolute; top: 100%; left: 0;
	min-width: 260px; margin: 0; padding: 12px 0;
	list-style: none; background: #ffffff;
	border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.mq-nav__list li:hover > .sub-menu,
.mq-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mq-nav__list .sub-menu a { padding: 10px 24px; font-size: 14px; font-weight: normal; }
.mq-nav__sub-toggle { display: none; }
.mq-header__cta {
	flex: none; display: inline-flex; align-items: center;
	padding: 12px 28px; border-radius: 999px;
	background: linear-gradient(90deg, var(--mq-key-dark), var(--mq-key) 60%, var(--mq-key-vivid));
	color: #ffffff !important; text-decoration: none;
	font-size: 14px; font-weight: bold; letter-spacing: 0.08em;
	transition: opacity .3s;
}
.mq-header__cta:hover { opacity: .85; }
.mq-header__toggle { display: none; }

/* ---------- 見出し・ボタン（デモと同じ） ---------- */
.mq-ttl { margin: 0 0 64px; padding: 0; border: none; background: none; }
.mq-ttl__en { display: block; margin: 0; font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: 0.02em; font-family: var(--mq-en); }
.mq-ttl__mark,
.mq-front .mq-ttl__mark { display: inline-block; width: 1.15em; height: auto; margin-left: 0.16em; vertical-align: -0.2em; object-fit: contain; }
.mq-ttl__ja { display: block; margin-top: 16px; font-size: 14px; font-weight: bold; color: var(--mq-key); }
.mq-more {
	display: inline-flex; align-items: center; gap: 16px; margin-top: 48px;
	color: var(--mq-ink); text-decoration: none;
	font-size: 14px; font-weight: bold; letter-spacing: 0.15em; font-family: var(--mq-en);
}
.mq-more::after {
	content: ""; display: block; width: 48px; height: 48px;
	border: 1px solid var(--mq-ink); border-radius: 50%;
	background: linear-gradient(var(--mq-ink), var(--mq-ink)) center/14px 1px no-repeat;
	transition: background-color .3s;
}
.mq-more:hover { color: var(--mq-ink); }
.mq-more:hover::after { background-color: var(--mq-pale); }

/* ---------- トップ ---------- */
.mq-front { overflow: hidden; }
.mq-front img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mq-sec { padding: 140px 0; }
/* ファーストビューは白い背景（商品ごとの色をまとめて見せるため、白く透明な感じに。みふゆさんの決定 2026-11-03） */
.mq-hero { position: relative; padding: 24px 0 72px; }
.mq-hero__img { position: relative; overflow: hidden; padding: 40px 0; }
.mq-hero__track { display: flex; align-items: center; width: max-content; animation: mq-flow 90s linear infinite; will-change: transform; }
.mq-hero__card { position: relative; flex: none; height: min(36vh, 400px); margin-right: 40px; overflow: hidden; }
.mq-hero__card:nth-child(3n+1) { height: min(48vh, 540px); aspect-ratio: 1776/886; transform: rotate(-4deg); margin: 0 72px 0 32px; }
.mq-hero__card:nth-child(3n+2) { aspect-ratio: 1536/1024; clip-path: polygon(0.6% 0, 99.9% 1.5%, 99.3% 100%, 0 98.3%); }
.mq-hero__card:nth-child(3n) { aspect-ratio: 1446/948; }
.mq-front .mq-hero__card:nth-child(3n) img { object-fit: contain; }
@keyframes mq-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-hero__track { animation: none; } }
.mq-hero__txt { margin-top: 32px; padding: 0 var(--mq-gutter); }
.mq-hero__copy { margin: 0; padding: 0; border: none; line-height: 0; }
.mq-front .mq-hero__copy img,
.mq-front .mq-about__big img { width: 60%; max-width: none; height: auto; margin: 0 auto; }
/* コピーの下の 2 行（名刺と同じ文）。1 文字ずつ浮かび上がる → 線が左から走る → 2 行目が出る */
.mq-hero__lead { margin: 28px 0 0; text-align: center; }
.mq-hero__lead1 { position: relative; display: inline-block; padding-bottom: 14px; font-size: 28px; font-weight: 800; line-height: 1.5; letter-spacing: 0.08em; color: var(--mq-key); }
.mq-hero__lead1::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
	background: var(--mq-key); /* 会社概要（COMPANY）の線と同じ単色の青緑（みふゆさんの指示 2026-10-20） */
	transform: scaleX(0); transform-origin: left; animation: mq-lead-line 0.8s cubic-bezier(0.65, 0, 0.35, 1) 1.5s forwards;
}
.mq-hero__char { display: inline-block; opacity: 0; animation: mq-lead-char 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(0.4s + var(--i) * 0.05s) forwards; }
.mq-hero__lead2 { display: block; margin-top: 16px; font-size: 17px; font-weight: bold; letter-spacing: 0.06em; color: var(--mq-logo-gray); opacity: 0; animation: mq-lead-up 0.9s ease-out 2.1s forwards; }
@keyframes mq-lead-char { from { opacity: 0; transform: translateY(0.6em) rotate(8deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mq-lead-line { to { transform: scaleX(1); } }
@keyframes mq-lead-up { from { opacity: 0; transform: translateY(12px); letter-spacing: 0.3em; } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.mq-hero__char, .mq-hero__lead2 { opacity: 1; animation: none; }
	.mq-hero__lead1::after { transform: none; animation: none; }
}
.mq-mission { padding: 140px 0 100px; }
.mq-mission .mq-inner { max-width: none; }
.mq-mission__body { margin: 0; font-size: 18px; line-height: 1.9; font-weight: bold; letter-spacing: 0.02em; text-align: center; }
.mq-mission__ttl { margin: 0 0 48px; padding: 0; border: none; background: none; font-size: 32px; font-weight: 800; line-height: 1.6; text-align: center; color: var(--mq-ink); }
.mq-mission__body p { margin: 0 0 24px; }
.mq-mission__body p:last-child { margin-bottom: 0; }
/* 節の見出しの下のリード文（#168） */
.mq-sec__lead { margin: -24px 0 56px; font-size: 16px; line-height: 2; }
.mq-sec--light { background: var(--mq-light); }

.mq-svc { display: grid; gap: 48px; }
.mq-svc__item {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center;
	padding: 88px 72px; border-radius: 32px; background: var(--mq-light);
}
.mq-svc__catch { margin: 0 0 12px; font-size: 15px; font-weight: bold; color: var(--mq-key); }
.mq-svc__name { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.5; color: var(--mq-ink); }
.mq-svc__desc { margin: 32px 0 0; font-size: 16px; line-height: 2; }
.mq-svc__desc p { margin: 0 0 12px; }
.mq-svc__btn {
	display: inline-flex; align-items: center; gap: 32px; min-width: 360px; margin-top: 40px;
	padding: 22px 32px 22px 48px; border-radius: 8px;
	background: linear-gradient(90deg, var(--mq-key-dark), var(--mq-key) 60%, var(--mq-key-vivid));
	box-shadow: 0 12px 32px rgba(14, 124, 134, .25);
	color: #ffffff !important; text-decoration: none;
	font-size: 17px; font-weight: bold; line-height: 1.6; letter-spacing: 0.06em; text-align: center;
	transition: opacity .3s, transform .3s;
}
.mq-svc__btn span { flex: 1; }
.mq-svc__btn::after { content: ""; flex: none; width: 10px; height: 10px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(45deg); }
.mq-svc__btn:hover { opacity: .85; transform: translateY(-2px); }
.mq-front .mq-svc__img img { height: auto; object-fit: contain; transition: transform .5s; }
.mq-svc__item:hover .mq-svc__img img { transform: scale(1.04); }
.mq-front .mq-svc__img--tall img { max-width: 440px; margin: 0 auto; }
/* 番号・主な特徴・画像の無いサービス（#168） */
.mq-svc__no { margin: 0 0 4px; font-size: 40px; font-weight: 800; line-height: 1; color: var(--mq-key); font-family: var(--mq-en); }
.mq-svc__name + .mq-svc__catch { margin: 12px 0 0; font-size: 18px; }
.mq-svc__feat { margin-top: 24px; padding: 24px 28px; border-radius: 12px; background: #ffffff; }
.mq-svc__feat-ttl { margin: 0 0 8px; font-size: 14px; font-weight: bold; color: var(--mq-key); }
.mq-svc__feat ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.mq-svc__feat li { position: relative; margin: 0; padding-left: 1.4em; font-size: 15px; line-height: 1.7; font-weight: bold; }
.mq-svc__feat li::before { content: "✓"; position: absolute; left: 0; color: var(--mq-key); }
.mq-svc__item--noimg { grid-template-columns: 1fr; }
.mq-svc__item--noimg > div { max-width: 880px; }
.mq-sec--light .mq-values li { border-top-color: var(--mq-key); }
.mq-about__text { max-width: 880px; margin: 0 auto; font-size: 17px; line-height: 2; text-align: center; }
.mq-about__text p { margin: 0 0 24px; }
.mq-about__big--end { margin: 56px 0 72px; }
/* トップの終わりの CONTACT（ほかのページの帯の代わり。#168） */
.mq-cta { padding: 120px 0; background: var(--mq-ink); color: #ffffff; text-align: center; }
.mq-cta .mq-ttl { margin-bottom: 32px; }
.mq-cta .mq-ttl__en { font-size: 96px; color: #ffffff; }
.mq-cta .mq-ttl__ja { font-size: 20px; color: #ffffff; }
.mq-cta__p { margin: 0; font-size: 16px; line-height: 2; }
.mq-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 16px; }
.mq-svc__btn--sub { background: #ffffff; box-shadow: none; color: var(--mq-ink) !important; }
.mq-svc__btn--sub::after { border-color: var(--mq-ink); }
.mq-cta__note { margin: 32px 0 0; font-size: 14px; opacity: .8; }

.mq-about__photo { aspect-ratio: 3/1; margin-bottom: 72px; overflow: hidden; }
.mq-about__block { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 72px 0; border-top: 1px solid #cccccc; }
.mq-about__label { font-size: 20px; font-weight: 800; letter-spacing: 0.1em; font-family: var(--mq-en); }
.mq-about__label span { display: block; margin-top: 4px; font-size: 12px; font-weight: bold; letter-spacing: 0.04em; color: var(--mq-key); font-family: inherit; }
.mq-about__block--wide { grid-template-columns: 1fr; gap: 24px; }
.mq-about__big { margin: 0; line-height: 0; }
.mq-about__mid { margin: 0; font-size: 28px; line-height: 1.7; font-weight: 800; }
.mq-about__p { margin: 24px 0 0; font-size: 16px; }
.mq-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: v; }
.mq-values li { margin: 0; padding-top: 20px; border-top: 4px solid var(--mq-ink); counter-increment: v; }
.mq-values li::before { content: "0" counter(v); display: block; font-size: 13px; font-weight: bold; color: var(--mq-key); font-family: var(--mq-en); }
.mq-values strong { display: block; margin-top: 8px; font-size: 20px; line-height: 1.6; }
.mq-values p { margin: 12px 0 0; font-size: 14px; }
.mq-msg { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.mq-front .mq-msg__photo img { height: auto; }
.mq-msg__sign { margin-top: 32px; font-size: 14px; }
.mq-msg__sign strong { display: block; margin-top: 4px; font-size: 22px; letter-spacing: 0.2em; }

.mq-sec--dark { background: var(--mq-logo-gray); color: #ffffff; }
.mq-sec--dark .mq-ttl__en,
.mq-sec--dark .mq-ttl__ja,
.mq-sec--dark .mq-more { color: #ffffff; }
.mq-sec--dark .mq-more::after { border-color: #ffffff; background: linear-gradient(#ffffff, #ffffff) center/14px 1px no-repeat; }
.mq-sec--dark .mq-more:hover::after { background-color: var(--mq-key); }
.mq-company { margin: 0; }
.mq-company div { display: grid; grid-template-columns: 240px 1fr; gap: 0 30px; }
.mq-company dt, .mq-company dd { margin: 0; padding: 40px 30px; border-bottom: 4px solid var(--mq-key); }
.mq-company div:first-child dt, .mq-company div:first-child dd { border-top: 4px solid var(--mq-key); }
.mq-company dt { font-weight: bold; font-size: 15px; border-color: var(--mq-key); }
.mq-company dd { font-size: 16px; }

/* ---------- お知らせなどの一覧 ---------- */
.mq-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mq-line); }
.mq-list__item a {
	display: flex; gap: 40px; align-items: baseline;
	padding: 28px 0; border-bottom: 1px solid var(--mq-line);
	color: var(--mq-ink); text-decoration: none; transition: color .3s;
}
.mq-list__item time { flex: none; width: 9em; font-size: 13px; color: #555555; font-family: var(--mq-en); letter-spacing: 0.08em; }
.mq-list__item span { font-size: 15px; font-weight: bold; line-height: 1.7; }
.mq-list__item a:hover { color: var(--mq-key); }

.mq-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 0; padding: 0; list-style: none; }
.mq-card a { display: block; color: var(--mq-ink); text-decoration: none; }
.mq-card__img { aspect-ratio: 3/2; overflow: hidden; border-radius: 16px; background: var(--mq-light); }
.mq-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mq-card a:hover .mq-card__img img { transform: scale(1.04); }
.mq-card__title { margin: 16px 0 0; font-weight: bold; }

.mq-archive { padding-top: 24px; padding-bottom: 140px; }
.mq-empty { margin: 0 0 32px; }
.navigation.pagination { margin-top: 56px; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 12px;
	border: 1px solid var(--mq-line); border-radius: 999px;
	color: var(--mq-ink); text-decoration: none; font-family: var(--mq-en);
}
.page-numbers.current { background: var(--mq-ink); border-color: var(--mq-ink); color: #ffffff; }
a.page-numbers:hover { border-color: var(--mq-key); color: var(--mq-key); }
.mq-search { display: flex; max-width: 560px; margin: 0 0 40px; }
.mq-search input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid #cccccc; border-right: none; border-radius: 8px 0 0 8px; font: inherit; }
.mq-search button { padding: 12px 24px; border: none; border-radius: 0 8px 8px 0; background: var(--mq-ink); color: #ffffff; font: inherit; font-weight: bold; cursor: pointer; }

/* ---------- 固定ページ・記事の上の見出し ---------- */
.mq-pagehead { padding: 96px 0 56px; }
.mq-pagehead__en { margin: 0; font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: 0.02em; font-family: var(--mq-en); }
.mq-pagehead__ja { margin: 16px 0 0; padding: 0; border: none; background: none; font-size: 16px; font-weight: bold; line-height: 1.6; color: var(--mq-key); }
.mq-pagehead__en + .mq-pagehead__ja { font-size: 15px; }
.mq-pagehead__ja:first-child { font-size: 40px; color: var(--mq-ink); }
.mq-crumb ol { display: flex; flex-wrap: wrap; margin: 32px 0 0; padding: 0; list-style: none; font-size: 12px; color: #777777; }
.mq-crumb li + li::before { content: "/"; margin: 0 10px; color: #bbbbbb; }
.mq-crumb a { color: #777777; text-decoration: none; }
.mq-crumb a:hover { color: var(--mq-key); }

/* ---------- 本文（ブロックエディタで作ったページ） ---------- */
.mq-content { padding-bottom: 120px; }
.mq-content::after { content: ""; display: table; clear: both; }
.mq-content > * { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: var(--mq-gutter); padding-right: var(--mq-gutter); }
.mq-content > .alignwide { max-width: 1400px; }
.mq-content > .alignfull { max-width: none; padding-left: 0; padding-right: 0; }
.mq-content > [class*="wp-block-"][class*="has-background"],
.mq-content > .wp-block-cover,
.mq-content > .vk_outer { padding-left: 0; padding-right: 0; }
/* #157: VK の「幅いっぱい」の背景の帯が 1140px で切れていた（LINE・デジタルマーケティングのページ） */
.mq-content > .vk_outer-width-full { max-width: none; margin-left: 0; margin-right: 0; }
.mq-content > .wp-block-cover:not(.alignfull):not(.alignwide),
.mq-content > [class*="has-background"]:not(.alignfull):not(.alignwide) { max-width: calc(1140px - var(--mq-gutter) * 2); }
.mq-content .alignfull > .wp-block-cover__inner-container,
.mq-content .alignfull.wp-block-group > *,
.mq-content .vk_outer-width-full .vk_outer_container { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: var(--mq-gutter); padding-right: var(--mq-gutter); }
.mq-content p, .mq-content ul, .mq-content ol, .mq-content table, .mq-content figure { margin-top: 0; margin-bottom: 1.5em; }
.mq-content h2:not([class*="is-style-vk-heading"]):not(.vk_heading_title),
.mq-content h2.wp-block-heading:not([class*="is-style-vk-heading"]) {
	margin: 2.5em auto 1em; font-size: 30px; line-height: 1.5; font-weight: 800;
}
.mq-content h3:not([class*="is-style-vk-heading"]):not(.vk_heading_title) { margin: 2em auto .8em; font-size: 22px; line-height: 1.6; font-weight: 800; }
.mq-content h4:not([class*="is-style-vk-heading"]):not(.vk_heading_title) { margin: 1.8em auto .6em; font-size: 18px; font-weight: 800; }
.mq-content > :first-child { margin-top: 0; }
/* #157: 幅を決め打ちした埋め込み（地図など）と長い URL で、スマホが横にはみ出さないようにする */
.mq-content { overflow-wrap: break-word; }
.mq-content iframe, .mq-content embed, .mq-content video { max-width: 100%; }
.mq-content table { width: 100%; border-collapse: collapse; }
.mq-content th, .mq-content td { padding: 16px; border: 1px solid var(--mq-line); text-align: left; vertical-align: top; }
.mq-content th { background: var(--mq-light); }
.mq-content .wp-block-image img { border-radius: 4px; }
.mq-content .wp-block-button__link { border-radius: 999px; padding: 14px 32px; font-weight: bold; }
.mq-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) { background: var(--mq-key); color: #ffffff; }
.mq-content input[type="text"], .mq-content input[type="email"], .mq-content input[type="tel"], .mq-content input[type="url"], .mq-content textarea, .mq-content select {
	width: 100%; padding: 12px 16px; border: 1px solid #cccccc; border-radius: 8px; font: inherit;
}
/* #183: お問い合わせの内容の選択欄も、ほかの入力欄と同じ白にする（ブラウザの既定だと灰色になる） */
.mq-content select { background-color: #ffffff; color: inherit; }
.mq-content input[type="submit"] {
	padding: 16px 56px; border: none; border-radius: 999px;
	background: var(--mq-key); color: #ffffff; font: inherit; font-weight: bold; letter-spacing: 0.1em; cursor: pointer;
}
.mq-content input[type="submit"]:hover { background: var(--mq-key-dark); }

.mq-entry__head { max-width: 1140px; padding-top: 0; padding-bottom: 40px; }
.mq-entry__date { font-size: 13px; color: #555555; font-family: var(--mq-en); letter-spacing: 0.08em; }
.mq-entry__title { margin: 8px 0 0; font-size: 32px; line-height: 1.5; font-weight: 800; }
.mq-entry--single .mq-content { padding-bottom: 56px; }
.mq-entry__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1140px; padding-bottom: 120px; border-top: 1px solid var(--mq-line); }
.mq-entry__nav > div:last-child { text-align: right; }
.mq-entry__nav .mq-more { margin-top: 32px; }
.mq-entry__nav a:not(.mq-more) { display: inline-block; margin-top: 32px; color: var(--mq-ink); font-weight: bold; text-decoration: none; }
.mq-entry__nav a:not(.mq-more):hover { color: var(--mq-key); }

/* ---------- お問い合わせの帯・フッター ---------- */
.mq-contact { display: block; padding: 120px 0; background: var(--mq-ink); color: #ffffff; text-decoration: none; transition: background-color .3s; }
.mq-contact:hover { background: var(--mq-key); color: #ffffff; }
.mq-contact .mq-ttl { margin: 0; }
.mq-contact .mq-ttl__en { font-size: 96px; }
.mq-contact .mq-ttl__ja { color: #ffffff; }
.mq-contact__p { margin: 32px 0 0; font-size: 15px; }
/* #112 のデモの下書きは本文の最後に自前の CONTACT を持つ。テーマの帯と二つ並ぶので、本文の方を出さない（みふゆさんの指示） */
.mq-content .mq-contact { display: none; }
/* 同じデモの、流れる写真に重ねたロゴも出さない（ヘッダーのロゴと二つになるため。みふゆさんの指示）。デモの CSS が後から読まれるので一段強く指定する */
.mq-content .mq .mq-head__logo { display: none; }

.mq-footer { padding: 88px 0 32px; background: var(--mq-light); font-size: 14px; }
.mq-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; }
.mq-footer__logo { display: inline-block; line-height: 0; }
.mq-footer__logo img { width: auto; height: 44px; mix-blend-mode: multiply; }
.mq-footer__name { margin: 24px 0 4px; font-weight: bold; }
.mq-footer__addr { margin: 0; color: #555555; }
.mq-footer__menus { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.mq-footer__nav ul { margin: 0; padding: 0; list-style: none; }
.mq-footer__nav > ul { columns: 2; column-gap: 40px; }
.mq-footer__nav--sub > ul { columns: 1; }
.mq-footer__nav li { break-inside: avoid; }
.mq-footer__nav a { display: inline-block; padding: 6px 0; color: var(--mq-ink); text-decoration: none; font-weight: bold; }
.mq-footer__nav .sub-menu a { padding: 2px 0 2px 1em; font-weight: normal; font-size: 13px; color: #555555; }
.mq-footer__nav a:hover { color: var(--mq-key); }
/* #157: フッターのメニューにも開け閉めのボタンが付き、スマホでページの右上に「+」が出ていた */
.mq-footer__nav .mq-nav__sub-toggle { display: none; }
.mq-footer__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--mq-line); }
.mq-footer__copy { margin: 0; font-size: 12px; color: #777777; font-family: var(--mq-en); letter-spacing: 0.1em; }
.mq-footer__top { color: var(--mq-ink); text-decoration: none; font-size: 12px; font-weight: bold; letter-spacing: 0.15em; font-family: var(--mq-en); }

/* ---------- 小さい画面 ---------- */
@media (max-width: 1100px) {
	:root { --mq-header-h: 64px; }
	.mq-header__logo img { height: 38px; }
	.mq-header__toggle {
		display: block; position: relative; z-index: 2; margin-left: auto;
		width: 48px; height: 48px; padding: 0; border: none; background: none; cursor: pointer;
	}
	.mq-header__toggle-bar, .mq-header__toggle-bar::before, .mq-header__toggle-bar::after {
		position: absolute; left: 12px; width: 24px; height: 2px; background: var(--mq-ink); transition: transform .3s, background-color .3s;
	}
	.mq-header__toggle-bar { top: 23px; }
	.mq-header__toggle-bar::before, .mq-header__toggle-bar::after { content: ""; left: 0; }
	.mq-header__toggle-bar::before { top: -8px; }
	.mq-header__toggle-bar::after { top: 8px; }
	.is-nav-open .mq-header__toggle-bar { background: transparent; }
	.is-nav-open .mq-header__toggle-bar::before { transform: translateY(8px) rotate(45deg); }
	.is-nav-open .mq-header__toggle-bar::after { transform: translateY(-8px) rotate(-45deg); }
	.mq-header__nav {
		position: fixed; top: var(--mq-header-h); left: 0; right: 0; bottom: 0;
		display: block; margin: 0; padding: 24px var(--mq-gutter) 48px;
		overflow-y: auto; background: #ffffff;
		opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
	}
	.admin-bar .mq-header__nav { top: calc(var(--mq-header-h) + 46px); }
	.is-nav-open .mq-header__nav { opacity: 1; visibility: visible; }
	.is-nav-open { overflow: hidden; }
	.mq-nav__list { display: block; }
	.mq-nav__list > li { border-bottom: 1px solid var(--mq-line); }
	.mq-nav__list a { padding: 16px 48px 16px 0; font-size: 16px; }
	.mq-nav__list > li > a::after { display: none; }
	.mq-nav__list .sub-menu {
		position: static; display: none; min-width: 0; padding: 0 0 12px;
		box-shadow: none; border-radius: 0; opacity: 1; visibility: visible; transform: none;
	}
	.mq-nav__list .is-sub-open > .sub-menu { display: block; }
	.mq-nav__list .sub-menu a { padding: 10px 0 10px 16px; }
	.mq-nav__sub-toggle {
		display: block; position: absolute; top: 8px; right: 0;
		width: 44px; height: 44px; padding: 0; border: none; background: none; cursor: pointer;
	}
	.mq-nav__sub-toggle::before, .mq-nav__sub-toggle::after {
		content: ""; position: absolute; top: 21px; left: 14px; width: 16px; height: 2px; background: var(--mq-ink); transition: transform .3s;
	}
	.mq-nav__sub-toggle::after { transform: rotate(90deg); }
	.is-sub-open > .mq-nav__sub-toggle::after { transform: rotate(0); }
	.mq-header__cta { display: flex; justify-content: center; margin-top: 32px; padding: 16px; font-size: 16px; }
}
@media (max-width: 782px) {
	.admin-bar .mq-header { top: 46px; }
}
@media (max-width: 900px) {
	:root { --mq-gutter: 20px; }
	.mq-sec { padding: 88px 0; }
	.mq-ttl { margin-bottom: 40px; }
	.mq-ttl__en { font-size: 44px; }
	.mq-hero { padding: 8px 0 56px; }
	.mq-hero__img { padding: 32px 0; }
	.mq-hero__card { height: min(30vh, 220px); margin-right: 20px; }
	.mq-hero__card:nth-child(3n+1) { height: min(40vh, 300px); margin: 0 40px 0 16px; }
	.mq-hero__txt { margin-top: 36px; }
	.mq-front .mq-hero__copy img, .mq-front .mq-about__big img { width: 100%; }
	.mq-hero__lead { margin-top: 28px; }
	.mq-hero__lead1 { padding-bottom: 10px; font-size: 17px; letter-spacing: 0.04em; }
	.mq-hero__lead2 { margin-top: 12px; font-size: 13px; letter-spacing: 0.02em; }
	.mq-mission { padding: 88px 0 64px; }
	.mq-mission__body { text-align: left; }
	.mq-mission__ttl { margin-bottom: 32px; font-size: 22px; text-align: left; }
	.mq-mission__body br { display: none; }
	.mq-sec__lead { margin: -16px 0 32px; font-size: 15px; }
	.mq-svc__no { font-size: 32px; }
	.mq-svc__name + .mq-svc__catch { font-size: 16px; }
	.mq-svc__feat { padding: 20px; }
	.mq-svc__feat ul { grid-template-columns: 1fr; }
	.mq-about__text { font-size: 15px; text-align: left; }
	.mq-about__big--end { margin: 40px 0 48px; }
	.mq-cta { padding: 80px 0; }
	.mq-cta .mq-ttl__en { font-size: 56px; }
	.mq-cta .mq-ttl__ja { font-size: 17px; }
	.mq-cta__p { font-size: 15px; text-align: left; }
	.mq-cta__p br { display: none; }
	.mq-cta__btns .mq-svc__btn { width: 100%; }
	.mq-list__item a { flex-direction: column; gap: 4px; padding: 20px 0; }
	.mq-svc { gap: 24px; }
	.mq-svc__item { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px 40px; border-radius: 20px; }
	.mq-svc__img { order: -1; }
	.mq-front .mq-svc__img--tall img { max-width: 280px; }
	.mq-svc__name { font-size: 24px; }
	.mq-svc__desc { margin-top: 20px; font-size: 15px; }
	.mq-svc__btn { display: flex; min-width: 0; gap: 16px; margin-top: 28px; padding: 18px 24px; font-size: 15px; }
	.mq-about__photo { aspect-ratio: 2/1; margin-bottom: 48px; }
	.mq-about__block { grid-template-columns: 1fr; gap: 20px; padding: 48px 0; }
	.mq-about__mid { font-size: 20px; }
	.mq-values { grid-template-columns: 1fr; }
	.mq-msg { grid-template-columns: 1fr; gap: 32px; }
	.mq-msg__photo { max-width: 280px; }
	.mq-company div { grid-template-columns: 90px 1fr; gap: 0 12px; }
	.mq-company dt, .mq-company dd { padding: 20px 4px; }
	.mq-contact { padding: 80px 0; }
	.mq-contact .mq-ttl__en { font-size: 56px; }
	.mq-pagehead { padding: 56px 0 32px; }
	.mq-pagehead__en { font-size: 40px; }
	.mq-pagehead__ja:first-child { font-size: 26px; }
	.mq-crumb ol { margin-top: 20px; }
	.mq-content { padding-bottom: 80px; }
	.mq-content h2:not([class*="is-style-vk-heading"]):not(.vk_heading_title) { font-size: 24px; }
	.mq-entry__title { font-size: 24px; }
	.mq-entry__nav { grid-template-columns: 1fr 1fr; padding-bottom: 80px; }
	.mq-entry__nav .mq-more { display: none; }
	.mq-cards { grid-template-columns: 1fr; gap: 32px; }
	.mq-archive { padding-bottom: 88px; }
	.mq-footer { padding-top: 56px; }
	.mq-footer__inner, .mq-footer__menus { grid-template-columns: 1fr; gap: 32px; }
	.mq-footer__nav > ul { columns: 1; }
	.mq-footer__bottom { margin-top: 48px; }
}

/* ---------- トップ: 今西みふゆさんの見本画像に合わせた並びと文字の大きさの比率（#171） ----------
   色・書体・ボタン・カードの角丸などの見た目は上のまま。並び・余白・大きさだけをここで上書きする */
.mq-front .mq-sec { padding: 96px 0; }
.mq-icon { display: block; width: 56px; height: 56px; color: var(--mq-key); }
/* ファーストビュー: 筆文字のすぐ下に「アイデアを、ビジネスを動かす力に。」 */
.mq-hero { padding-bottom: 24px; }
.mq-front .mq-hero__copy img { width: 68%; }
.mq-hero__lead { margin-top: 24px; }
.mq-hero__lead1 { font-size: 32px; }
/* 会社の紹介文・3 つのこと・見出し */
.mq-mission { padding: 24px 0 72px; text-align: center; }
.mq-mission .mq-inner { max-width: 1200px; }
.mq-mission__intro { margin: 0; font-size: 17px; line-height: 2.1; }
.mq-points { display: grid; grid-template-columns: repeat(3, 1fr); margin: 48px 0 0; padding: 0; list-style: none; }
.mq-points span { white-space: nowrap; }
.mq-points li { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 8px 24px; text-align: left; font-size: 18px; font-weight: bold; line-height: 1.7; }
.mq-points li + li { border-left: 1px solid var(--mq-line); }
.mq-mission__ttl { margin: 48px 0 0; font-size: 30px; line-height: 1.6; color: var(--mq-key); }
.mq-mission__body { margin: 16px 0 0; font-size: 17px; font-weight: normal; line-height: 2; }
/* 見出し: 英語と日本語を横に並べる（英語を小さく、日本語を大きく） */
.mq-ttl--side { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 64px; margin-bottom: 40px; }
.mq-ttl--side .mq-ttl__en { font-size: 44px; }
.mq-ttl--side .mq-ttl__ja { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.5; color: var(--mq-ink); }
.mq-ttl--center { margin-bottom: 56px; text-align: center; }
.mq-ttl--center .mq-ttl__en { font-size: 26px; color: var(--mq-key); }
.mq-ttl--center .mq-ttl__ja { margin-top: 12px; font-size: 34px; font-weight: 800; line-height: 1.5; color: var(--mq-ink); }
.mq-ttl--small { margin-bottom: 24px; }
.mq-ttl--small .mq-ttl__en { font-size: 40px; }
.mq-ttl--small .mq-ttl__ja { margin-top: 10px; font-size: 14px; }
/* サービス */
.mq-sec--svc .mq-inner--wide { max-width: 1280px; }
/* 英語の見出しの右に、日本語の見出しとリード文を縦に並べる */
.mq-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 64px; margin-bottom: 48px; }
.mq-head .mq-ttl--side { display: contents; }
.mq-head__lead { grid-column: 2; margin: 16px 0 0; font-size: 16px; line-height: 2; }
.mq-svc { gap: 32px; }
.mq-svc__item {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.25fr) 340px; grid-template-areas: "body img img" "feat feat act";
	gap: 24px 32px; align-items: center; padding: 48px 56px; border-radius: 24px;
}
.mq-svc__body { grid-area: body; }
.mq-svc__img { grid-area: img; }
.mq-svc__feat { grid-area: feat; }
.mq-svc__act { grid-area: act; text-align: right; }
.mq-svc__item--noimg { grid-template-columns: minmax(0, 1fr) minmax(0, 0.25fr) 340px; grid-template-areas: "body body body" "feat feat act"; }
.mq-svc__item--noimg > div { max-width: none; }
.mq-svc__no { margin: 0; font-size: 28px; }
.mq-svc__name { margin-top: 4px; font-size: 26px; line-height: 1.5; }
.mq-svc__name + .mq-svc__catch { margin: 16px 0 0; font-size: 31px; letter-spacing: 0.02em; font-weight: 800; line-height: 1.5; }
.mq-svc__desc { margin: 16px 0 0; font-size: 17px; line-height: 1.9; }
.mq-svc__feat {
	display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px 32px;
	margin: 0; padding: 0; border-radius: 0; background: none; list-style: none;
}
.mq-svc__feat li { position: relative; margin: 0; padding-left: 1.6em; font-size: 16px; line-height: 1.7; font-weight: bold; }
.mq-svc__feat li::before { content: "✓"; position: absolute; left: 0; color: var(--mq-key); font-weight: 800; }
.mq-svc__act .mq-svc__btn { display: flex; width: 100%; min-width: 0; gap: 16px; margin-top: 0; padding: 18px 24px 18px 32px; font-size: 16px; white-space: nowrap; }
.mq-front .mq-svc__img img { max-height: 340px; }
.mq-front .mq-svc__img--tall img { max-width: 360px; }
/* 大切にしていること: アイコン・2 行の見出し・短い文を、縦線で区切った 3 列に */
.mq-sec--approach .mq-values { gap: 0; }
.mq-sec--approach .mq-values li { display: flex; flex-direction: column; align-items: center; padding: 0 32px; border-top: none; text-align: center; }
.mq-sec--approach .mq-values li + li { border-left: 1px solid #cccccc; }
.mq-sec--approach .mq-values li::before { content: none; }
.mq-sec--approach .mq-values strong { margin-top: 20px; font-size: 22px; line-height: 1.6; }
.mq-sec--approach .mq-values p { margin-top: 16px; font-size: 15px; line-height: 2; }
/* お知らせ・会社概要・お問い合わせ: 見出しを左、中身を右に */
.mq-side { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }
.mq-side .mq-more { margin-top: 0; }
/* 左の列は幅が 280px なので、文字の幅が広い環境で Q マークが下の行に落ちないよう、見出しを 1 行に固定する（#174。みふゆさん 11/3 13:38） */
.mq-side .mq-ttl__en { white-space: nowrap; }
.mq-side__more { margin: 24px 0 0; text-align: right; }
.mq-sec--news .mq-list__item a { padding: 20px 0; }
.mq-sec--about { padding-top: 40px; }
.mq-about { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.mq-front .mq-about__photo { aspect-ratio: 5/2; margin: 0; border-radius: 12px; }
.mq-about__text { max-width: none; margin: 0; font-size: 16px; line-height: 2.1; text-align: left; }
.mq-front .mq-about__big { margin: 24px 0 0; }
.mq-front .mq-about__big img { width: 90%; margin: 0; }
.mq-msg { grid-template-columns: 200px 220px minmax(0, 1fr); gap: 48px; margin-top: 64px; }
.mq-msg .mq-about__label { padding-top: 56px; }
.mq-msg .mq-about__p { margin: 0 0 16px; font-size: 16px; line-height: 2; }
.mq-front .mq-msg__photo img { border-radius: 12px; }
.mq-msg__sign { margin-top: 16px; }
.mq-sec--company { padding: 64px 0; }
.mq-sec--company .mq-ttl { margin-bottom: 24px; }
/* 左の列に社名・代表者・所在地、右の列に設立・事業内容 */
.mq-sec--company .mq-company { columns: 2; column-gap: 48px; }
.mq-sec--company .mq-company div { grid-template-columns: 80px 1fr; gap: 0 20px; break-inside: avoid; }
.mq-sec--company .mq-company dt,
.mq-sec--company .mq-company dd,
.mq-sec--company .mq-company div:first-child dt,
.mq-sec--company .mq-company div:first-child dd { padding: 16px 0; border-top: none; border-bottom: 1px solid var(--mq-key); font-size: 15px; line-height: 1.8; }
.mq-cta { padding: 64px 0; text-align: left; }
.mq-cta .mq-ttl { margin: 0; }
.mq-cta .mq-ttl__en { font-size: 40px; }
.mq-cta .mq-ttl__ja { font-size: 14px; font-weight: normal; }
.mq-cta .mq-side { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.mq-cta__btns { justify-content: flex-end; margin: 0; }
.mq-cta__btns .mq-svc__btn { min-width: 320px; margin: 0; }

@media (max-width: 1100px) {
	.mq-head__lead { margin-left: 0; }
	.mq-msg { grid-template-columns: 1fr 220px; }
	.mq-msg .mq-about__label { grid-column: 1 / -1; padding-top: 0; }
	.mq-msg > div:last-child { grid-column: 1 / -1; }
	.mq-cta .mq-side { grid-template-columns: 1fr; }
	.mq-cta__btns { justify-content: flex-start; }
}
@media (max-width: 900px) {
	.mq-front .mq-sec { padding: 64px 0; }
	.mq-icon { width: 44px; height: 44px; }
	.mq-front .mq-hero__copy img { width: 100%; }
	.mq-hero__lead1 { font-size: 19px; }
	.mq-mission { padding: 16px 0 48px; }
	.mq-mission__intro { font-size: 15px; text-align: left; }
	.mq-mission__intro br { display: none; }
	.mq-points { grid-template-columns: 1fr; margin-top: 32px; }
	.mq-points li { justify-content: flex-start; padding: 16px 0; font-size: 16px; }
	.mq-points li + li { border-left: none; border-top: 1px solid var(--mq-line); }
	.mq-mission__ttl { margin-top: 32px; font-size: 21px; text-align: left; }
	.mq-mission__body { font-size: 15px; text-align: left; }
	.mq-ttl--side { display: block; margin-bottom: 28px; }
	.mq-head { display: block; }
	.mq-head .mq-ttl--side { display: block; margin-bottom: 12px; }
	.mq-points span { white-space: normal; }
	.mq-points br { display: none; }
	.mq-ttl--side .mq-ttl__en { font-size: 30px; }
	.mq-ttl--side .mq-ttl__ja { margin-top: 12px; font-size: 21px; }
	.mq-ttl--center .mq-ttl__en { font-size: 20px; }
	.mq-ttl--center .mq-ttl__ja { font-size: 23px; }
	.mq-ttl--small .mq-ttl__en { font-size: 30px; }
	.mq-head { margin-bottom: 32px; }
	.mq-head__lead { font-size: 15px; }
	.mq-head__lead br { display: none; }
	.mq-svc__item, .mq-svc__item--noimg { grid-template-columns: 1fr; grid-template-areas: "img" "body" "feat" "act"; gap: 20px; padding: 32px 20px; }
	.mq-svc__name { font-size: 20px; }
	.mq-svc__name + .mq-svc__catch { font-size: 21px; letter-spacing: 0; }
	.mq-svc__desc { font-size: 15px; }
	.mq-svc__desc br { display: none; }
	.mq-svc__feat { grid-template-rows: none; grid-auto-flow: row; grid-auto-columns: auto; gap: 6px; }
	.mq-svc__feat li { font-size: 15px; }
	.mq-svc__act { text-align: left; }
	.mq-svc__act .mq-svc__btn { display: flex; min-width: 0; padding: 18px 24px; }
	.mq-front .mq-svc__img--tall img { max-width: 280px; }
	.mq-sec--approach .mq-values li { padding: 32px 0; }
	.mq-sec--approach .mq-values li + li { border-left: none; border-top: 1px solid #cccccc; }
	.mq-sec--approach .mq-values strong { font-size: 19px; }
	.mq-side { grid-template-columns: 1fr; gap: 16px; }
	.mq-about { grid-template-columns: 1fr; gap: 28px; }
	.mq-about__text { font-size: 15px; }
	.mq-about__text br { display: none; }
	.mq-front .mq-about__big img { width: 100%; }
	.mq-msg { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
	.mq-msg__photo { max-width: 220px; }
	.mq-sec--company { padding: 56px 0; }
	.mq-sec--company .mq-company { columns: 1; }
	.mq-sec--company .mq-company div { grid-template-columns: 80px 1fr; gap: 0 12px; }
	.mq-cta { padding: 56px 0; }
	.mq-cta .mq-ttl__en { font-size: 32px; }
	.mq-cta__btns .mq-svc__btn { width: 100%; min-width: 0; }
}

/* ---------- トップ: 余白を広げる（今西みふゆさん 2026-11-03 13:07「全体的に詰まっている感じ」、#173） ----------
   文字の大きさ・並びは #171 のまま。段と段、段の中の要素の間を広げる */
.mq-front .mq-sec { padding: 144px 0; }
/* 「筆文字のコピー → アイデアを、… → 紹介文」と「3 つの点 → ビジネスをもっと自由に、… → 本文」は
   それぞれ一塊なので、塊の中の間は #171 のまま（みふゆさん 2026-11-03 13:13・13:14、#173）。塊と塊の間だけ広げる */
/* 3 つの点〜本文の塊を下へずらす: 上（紹介文との間）を広げ、下（サービスとの間）を詰める（みふゆさん 2026-11-03 13:20、#173） */
.mq-mission { padding-bottom: 56px; }
.mq-points { margin-top: 128px; }
.mq-head { margin-bottom: 80px; }
.mq-head__lead { margin-top: 24px; line-height: 2.2; }
.mq-svc { gap: 64px; }
.mq-sec--svc .mq-inner--wide { max-width: 1360px; }
.mq-svc__item, .mq-svc__item--noimg { grid-template-columns: minmax(0, 1fr) minmax(0, 0.1fr) 340px; gap: 48px 56px; padding: 80px 72px; }
.mq-svc__name + .mq-svc__catch { margin-top: 24px; }
.mq-svc__desc { margin-top: 24px; line-height: 2.1; }
.mq-svc__feat { gap: 14px 48px; }
.mq-ttl--center { margin-bottom: 96px; }
.mq-ttl--center .mq-ttl__ja { margin-top: 20px; }
.mq-sec--approach .mq-values li { padding: 8px 24px; }
/* 説明文の 1 行（最長 18 字）が列に収まらず「け、」「す。」だけの行ができていたので、余白を詰め、
   幅が足りないときも言葉の切れ目（<wbr>）でだけ折り返す（#181。みふゆさん 11/4 12:57） */
.mq-sec--approach .mq-values p { word-break: keep-all; overflow-wrap: anywhere; }
.mq-sec--approach .mq-values strong { margin-top: 32px; }
.mq-sec--approach .mq-values p { margin-top: 24px; line-height: 2.2; }
.mq-side { gap: 80px; }
.mq-sec--news .mq-list__item a { padding: 28px 0; }
.mq-side__more { margin-top: 40px; }
.mq-sec--about { padding-top: 144px; }
.mq-ttl--side { margin-bottom: 64px; }
/* オフィスの写真と下の筆文字のコピーを外したので、紹介文だけを 1 段で置く（#173） */
.mq-about { display: block; }
.mq-about > div { display: block; max-width: 880px; }
.mq-about__text { line-height: 2.4; }
.mq-front .mq-about__big { margin: 0; }
.mq-front .mq-about__big img { width: 100%; }
.mq-msg { gap: 64px; margin-top: 128px; padding-top: 96px; border-top: 1px solid var(--mq-line); }
.mq-msg .mq-about__label { padding-top: 0; }
.mq-msg .mq-about__p { margin-bottom: 24px; line-height: 2.2; }
.mq-msg__sign { margin-top: 32px; }
.mq-sec--company { padding: 112px 0; }
.mq-sec--company .mq-ttl { margin-bottom: 40px; }
.mq-sec--company .mq-company { column-gap: 80px; }
.mq-sec--company .mq-company dt,
.mq-sec--company .mq-company dd,
.mq-sec--company .mq-company div:first-child dt,
.mq-sec--company .mq-company div:first-child dd { padding: 24px 0; }
.mq-cta { padding: 112px 0; }
@media (max-width: 1100px) {
	.mq-svc__item, .mq-svc__item--noimg { padding: 64px 48px; }
	.mq-about > div { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 900px) {
	.mq-front .mq-sec { padding: 96px 0; }
	.mq-mission { padding-bottom: 32px; }
	.mq-points { margin-top: 80px; }
	.mq-head { margin-bottom: 48px; }
	.mq-svc { gap: 40px; }
	.mq-svc__item, .mq-svc__item--noimg { grid-template-columns: 1fr; gap: 28px; padding: 40px 24px 44px; }
	/* スマホは写真を「01 ｜ サービス名」の帯の上ではなく、説明の下に置き、帯から始まるようにする（#185。今西みふゆさん 11/5 13:25） */
	.mq-svc__item { grid-template-areas: "body" "img" "feat" "act"; }
	.mq-svc__img { order: 0; }
	.mq-svc__feat { gap: 10px; }
	.mq-ttl--center { margin-bottom: 56px; }
	.mq-sec--approach .mq-values li { padding: 40px 0; }
	.mq-side { gap: 28px; }
	.mq-sec--about { padding-top: 96px; }
	.mq-ttl--side { margin-bottom: 40px; }
	.mq-about > div { gap: 40px; }
	.mq-about__text { line-height: 2.2; }
	.mq-msg { gap: 28px; margin-top: 80px; padding-top: 64px; }
	.mq-sec--company { padding: 80px 0; }
	.mq-sec--company .mq-company dt,
	.mq-sec--company .mq-company dd,
	.mq-sec--company .mq-company div:first-child dt,
	.mq-sec--company .mq-company div:first-child dd { padding: 18px 0; }
	.mq-cta { padding: 80px 0; }
}

/* ---------- トップ: ABOUT MIRAQCEED と代表メッセージを、画面いっぱいの色の面にする（#175 の 4） ----------
   今西みふゆさん 2026-11-03 15:01「色の面（カラーはうちのカラーを使って）でやってほしい」。
   色はこのサイトのキーカラー（#0e7c86。ボタン・線・見出しと同じ）。文字は白（白との比は約 4.9:1）。
   白（NEWS）→ キーカラー（ABOUT・MESSAGE）→ 濃いグレー（COMPANY）の切り替わりでメリハリを出す。
   写真は重ねない（ABOUT のオフィスの写真はみふゆさんの指示で外した。#173）。使ってよい写真が届いたら #175 の 5 で足す */
.mq-sec--about { background: var(--mq-key); color: #ffffff; }
.mq-sec--about .mq-ttl__en,
.mq-sec--about .mq-ttl__ja,
.mq-sec--about .mq-about__text,
.mq-sec--about .mq-about__label,
.mq-sec--about .mq-about__label span,
.mq-sec--about .mq-about__p,
.mq-sec--about .mq-msg__sign { color: #ffffff; }
.mq-sec--about .mq-about__label span { opacity: .85; }
.mq-sec--about .mq-msg { border-top-color: rgba(255, 255, 255, .35); }
/* 見出しの Q マーク（白い丸に載せていた）は、みふゆさんの 2026-11-03 15:11「変だから削除」で front-page.php から外した。
   白い丸と 1 行固定の指定も合わせて消した */

/* ---------- トップ: 英字の見出しを約 2 倍にし、日本語は英字の下に小さく添える（#175 の 2） ----------
   今西みふゆさん 2026-11-03 15:15「2.見出しの大きさも変えて下さい」。
   いままで: OUR SERVICES・ABOUT は英字 44px の右に日本語 30px、OUR APPROACH は英字 26px の下に日本語 34px、
   NEWS・COMPANY・CONTACT は英字 40px。→ 英字はどれも 88px（NEWS・COMPANY・CONTACT は左の列に収まるよう 80px）、
   日本語は英字の下に 18px。Q マークは英字の後ろに残す（大きさは英字に合わせて 1.15em のまま） */
.mq-front .mq-ttl__en { font-size: 88px; line-height: 1.05; letter-spacing: 0.01em; }
.mq-front .mq-ttl__ja { margin: 24px 0 0; font-size: 18px; font-weight: bold; line-height: 1.7; }
/* 横並びをやめて、英字の下に日本語を置く */
.mq-front .mq-ttl--side,
.mq-front .mq-head .mq-ttl--side { display: block; }
.mq-front .mq-ttl--side .mq-ttl__ja,
.mq-front .mq-ttl--center .mq-ttl__ja { color: var(--mq-key); }
.mq-front .mq-ttl--center .mq-ttl__en { color: var(--mq-ink); }
/* サービスの見出しの下のリード文も、見出しの下に置く */
.mq-front .mq-head { display: block; }
.mq-front .mq-head__lead { max-width: 880px; margin: 40px 0 0; }
/* ABOUT・代表メッセージ（色の面）の上は白のまま */
.mq-front .mq-sec--about .mq-ttl__ja { color: #ffffff; }
/* NEWS・COMPANY・CONTACT: 左の列の幅を見出しに合わせる */
.mq-front .mq-ttl--small .mq-ttl__en { font-size: 80px; }
.mq-front .mq-ttl--small .mq-ttl__ja { margin-top: 16px; font-size: 16px; }
.mq-front .mq-sec--news .mq-side { grid-template-columns: auto minmax(0, 1fr); }
/* COMPANY は英字が長く、右の表が細くなるので、見出しを上・表を下に置く */
.mq-front .mq-sec--company .mq-side { grid-template-columns: 1fr; gap: 48px; }
.mq-front .mq-sec--company .mq-side > div:first-child { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.mq-front .mq-sec--company .mq-ttl { margin-bottom: 0; }
@media (max-width: 1100px) {
	.mq-front .mq-ttl__en { font-size: 72px; }
	.mq-front .mq-ttl--small .mq-ttl__en { font-size: 64px; }
}
@media (max-width: 900px) {
	/* スマホ（横 390）: 30px → 44px。画面の幅に収まる大きさまで */
	.mq-front .mq-ttl__en,
	.mq-front .mq-ttl--small .mq-ttl__en { font-size: 44px; }
	.mq-front .mq-ttl__ja { margin-top: 16px; font-size: 16px; }
	.mq-front .mq-head__lead { margin-top: 28px; }
	.mq-front .mq-sec--news .mq-side { grid-template-columns: 1fr; }
	.mq-front .mq-sec--company .mq-side { gap: 32px; }
}

/* ---------- トップ: サービスの左の文字を、デザインのある組み方にする（#175 の 3） ----------
   今西みふゆさん 2026-11-03 15:22「画像はそのままでいいので、左の文字をデザイン性のある見せ方にしたい」。
   画像・特徴・ボタン・文章は変えない。左の 4 つ（番号・名前・キャッチ・説明）の見せ方だけを変える:
   - 番号: 見出しと同じ英字の書体で大きく（96px）、キーカラーの縁取りだけの数字に。右へ細い線を伸ばす
   - 名前: キーカラーの丸い札（文字は白）
   - キャッチ: いちばん大きく濃い文字にし、下半分にキーカラーの薄いマーカーを引く
   - 説明: 左にキーカラーの縦線を引き、少し灰色にして、キャッチより一段下げる */
/* 番号と名前は、キーカラーのグラデーションの帯に白い文字で入れ、帯の右端を斜めに切って網点を添える（#185。今西みふゆさん 11/5 13:20 の見本を当社の色にしたもの）。
   角を丸めず、斜めの端と網点で「見出しの飾り」と分かるようにし、四角・矢印のボタンと見分けられるようにする */
.mq-front .mq-svc__name {
	--mq-band-a: #3d7a22; --mq-band-b: #4f9a30; --mq-band-c: #6bbe45; --mq-band-dot: #6bbe45;
	position: relative; isolation: isolate;
	display: inline-flex; align-items: center; gap: 16px; margin: 0; padding: 10px 52px 10px 22px;
	max-width: calc(100% - 72px);
	color: #ffffff; font-size: 17px; font-weight: bold; line-height: 1.6; letter-spacing: 0.06em;
}
.mq-front .mq-svc__name::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, var(--mq-band-a), var(--mq-band-b) 55%, var(--mq-band-c));
	clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
}
.mq-front .mq-svc__name::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% - 10px); width: 96px; z-index: -1;
	background-image: radial-gradient(circle, var(--mq-band-dot) 1.7px, transparent 2.2px);
	background-size: 8px 8px; background-position: 0 1px;
	transform: skewX(-27deg);
	-webkit-mask-image: linear-gradient(90deg, #000 15%, transparent 95%); mask-image: linear-gradient(90deg, #000 15%, transparent 95%);
}
.mq-front .mq-svc__name .mq-svc__no {
	display: flex; align-items: center; gap: 16px; margin: 0;
	font-family: var(--mq-en); font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: 0.04em; color: #ffffff;
}
.mq-front .mq-svc__name .mq-svc__no::after { content: ""; width: 1px; height: 22px; background: rgba(255, 255, 255, .55); }
/* 帯の色はロゴの若葉の緑（#6bbe45、brand/logo）。白い文字が読めるよう左を濃い緑（#3d7a22）にし、右端で若葉の色にする（#187。今西みふゆさん 11/5 13:37 に 3 案から 3）を選んだ）。
   説明の左の線・ボタンはキーカラー（青緑）のまま */
/* スマホで「フ／ォーム担当」のように割れないよう、折り返すのはシリーズ名と担当名の間（半角スペース）だけにする。入りきらない長い名前だけは途中で折る */
.mq-front .mq-svc__name-txt { word-break: keep-all; overflow-wrap: anywhere; }
.mq-front .mq-svc__name + .mq-svc__catch { margin: 28px 0 0; font-size: 34px; font-weight: 800; line-height: 1.6; letter-spacing: 0.02em; color: var(--mq-ink); }
/* キャッチの下のマーカー（青緑の線）はやめた（#188。今西みふゆさん 11/5 13:48「この線引いてるのはやめてみてください」） */
.mq-front .mq-svc__catch span { background: none; display: inline; }
.mq-front .mq-svc__desc { margin: 28px 0 0; padding-left: 20px; border-left: 3px solid var(--mq-key); font-size: 16px; line-height: 2; color: #555555; }
@media (max-width: 1100px) {
	.mq-front .mq-svc__name + .mq-svc__catch { font-size: 30px; }
}
@media (max-width: 900px) {
	.mq-front .mq-svc__name { gap: 12px; padding: 8px 40px 8px 16px; max-width: calc(100% - 48px); font-size: 15px; letter-spacing: 0.04em; }
	.mq-front .mq-svc__name::before { clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); }
	.mq-front .mq-svc__name::after { width: 64px; }
	.mq-front .mq-svc__name .mq-svc__no { gap: 12px; font-size: 20px; }
	.mq-front .mq-svc__name .mq-svc__no::after { height: 18px; }
	.mq-front .mq-svc__name + .mq-svc__catch { margin-top: 20px; font-size: 20px; letter-spacing: 0; }
	.mq-front .mq-svc__desc { margin-top: 20px; padding-left: 16px; font-size: 15px; }
}

/* ---------- トップ: CONTACT の見出しがボタンにかかる・日本語が 2 行に割れるのを直す（#175） ----------
   今西みふゆさん 2026-11-03 15:27「CONTACT がボタンにかかってしまっているのと、お気軽に。が一列でない」。
   原因: 英字を 80px にしたので、左の列（見出し）が英字より細くなり、1 行固定の英字がボタンの上にはみ出していた。
   左右に並べると幅が足りない（英字 約 520px＋ボタン 2 つ 約 690px）ので、COMPANY と同じく見出しを上・ボタンを下に置く。
   日本語は 1 行に固定。スマホで幅が足りないときは「から、」の後ろでだけ折り返す（mq-nobr） */
.mq-front .mq-cta .mq-side { grid-template-columns: 1fr; gap: 48px; }
.mq-front .mq-cta .mq-ttl__ja { white-space: nowrap; }
.mq-front .mq-cta__btns { justify-content: flex-start; }
.mq-nobr { display: inline-block; }
/* ---------- トップ: CONTACT のボタンを見出しの右横に置く（PC） ----------
   今西みふゆさん 2026-11-05 13:00「PC の CONTACT のお問い合わせボタンは、CONTACT の右横にしましょうか。バランス良いように」。
   #183 でボタンが「お問い合わせはこちら」1 つになり、見出しの下に置くと右側が空いていた。
   見出し（英字 約 390px）とボタン（320px）は横に並べても収まるので、PC（901px 以上）では見出しを左・ボタンを右端に置き、
   上下は見出しの真ん中にそろえる。スマホ（900px 以下）は今のまま見出しの下にボタン。
   同日 13:04「パッと見た時に、CONTACT から離れている感じ」→ 右端ではなく見出しのすぐ右に寄せる（間は 80px） */
@media (min-width: 901px) {
	.mq-front .mq-cta .mq-side { grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 80px; }
	.mq-front .mq-cta__btns { justify-content: flex-start; }
}
@media (max-width: 900px) {
	.mq-front .mq-cta .mq-side { gap: 32px; }
	/* スマホ（横 390）でも 1 行に収まるよう 14px に。それより狭い画面だけ「から、」の後ろで折り返す */
	.mq-front .mq-cta .mq-ttl__ja { font-size: 14px; letter-spacing: 0; white-space: normal; }
}