html {
	scroll-behavior: auto !important; /* グローバルsmooth scrollは体感遅延の原因になるため無効化 */
}

/* マーキー（横スライド）演出 */
.ib2-marquee {
	overflow: hidden;
	width: 100%;
}
.ib2-marquee-track {
	display: flex;
	gap: 1rem;
	width: max-content;
	animation: ib2-marquee-scroll 40s linear infinite;
}
.ib2-marquee-item {
	flex: 0 0 auto;
	width: 220px;
	height: 150px;
	overflow: hidden;
	border-radius: 2px;
}
.ib2-marquee-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@keyframes ib2-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}


/* ---------- scroll reveal フォールバック修正 ----------
 * tailwind.css は .reveal / .reveal.is-visible を前提にしているが、
 * 各テンプレートは data-reveal 属性 + reveal-up/left/right/scale クラスのみを付与しており
 * 基底 .reveal クラスが付いていなかった。また main.js が付与するクラス名は "visible" で
 * CSS 側が期待する "is-visible" と不一致だった。属性セレクタで両方まとめて解決する。
 */
[data-reveal] {
	opacity: 0;
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
[data-reveal].is-visible,
[data-reveal].visible {
	opacity: 1;
	transform: none;
}






/* ---------- 文字サイズを全体的に大きく（40代以上の読みやすさを考慮、各段階 約+4px） ---------- */
.text-xs{font-size:1rem !important;}
.text-sm{font-size:1.125rem !important;}
.text-base{font-size:1.25rem !important;}
.text-lg{font-size:1.375rem !important;}
.text-xl{font-size:1.5rem !important;}
.text-2xl{font-size:1.75rem !important;}
.text-3xl{font-size:2.125rem !important;}
.text-4xl{font-size:2.5rem !important;}
.text-5xl{font-size:3.25rem !important;}
.text-6xl{font-size:4rem !important;}
.text-7xl{font-size:4.75rem !important;}
@media (min-width: 768px) {
.md\:text-xs{font-size:1rem !important;}
.md\:text-sm{font-size:1.125rem !important;}
.md\:text-base{font-size:1.25rem !important;}
.md\:text-lg{font-size:1.375rem !important;}
.md\:text-xl{font-size:1.5rem !important;}
.md\:text-2xl{font-size:1.75rem !important;}
.md\:text-3xl{font-size:2.125rem !important;}
.md\:text-4xl{font-size:2.5rem !important;}
.md\:text-5xl{font-size:3.25rem !important;}
.md\:text-6xl{font-size:4rem !important;}
.md\:text-7xl{font-size:4.75rem !important;}
}
@media (min-width: 1024px) {
.lg\:text-xs{font-size:1rem !important;}
.lg\:text-sm{font-size:1.125rem !important;}
.lg\:text-base{font-size:1.25rem !important;}
.lg\:text-lg{font-size:1.375rem !important;}
.lg\:text-xl{font-size:1.5rem !important;}
.lg\:text-2xl{font-size:1.75rem !important;}
.lg\:text-3xl{font-size:2.125rem !important;}
.lg\:text-4xl{font-size:2.5rem !important;}
.lg\:text-5xl{font-size:3.25rem !important;}
.lg\:text-6xl{font-size:4rem !important;}
.lg\:text-7xl{font-size:4.75rem !important;}
}
@media (min-width: 1280px) {
.xl\:text-xs{font-size:1rem !important;}
.xl\:text-sm{font-size:1.125rem !important;}
.xl\:text-base{font-size:1.25rem !important;}
.xl\:text-lg{font-size:1.375rem !important;}
.xl\:text-xl{font-size:1.5rem !important;}
.xl\:text-2xl{font-size:1.75rem !important;}
.xl\:text-3xl{font-size:2.125rem !important;}
.xl\:text-4xl{font-size:2.5rem !important;}
.xl\:text-5xl{font-size:3.25rem !important;}
.xl\:text-6xl{font-size:4rem !important;}
.xl\:text-7xl{font-size:4.75rem !important;}
}


/* ---------- .bg-white が未コンパイルだったため直接定義 ---------- */
.bg-white { background-color: #ffffff; }


/* ---------- お問い合わせフォーム：本家(kaiteki-office.com)のブランドカラーに合わせる ---------- */
.wpcf7-form input[type="submit"] {
	background-color: #D94730 !important;
	color: #ffffff !important;
	border: none;
	border-radius: 0.375rem;
	padding: 0.9rem 2.5rem;
	font-size: 1rem;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background-color .3s ease;
}
.wpcf7-form input[type="submit"]:hover {
	background-color: #b83a26 !important;
}
.wpcf7-form input[type="radio"],
.wpcf7-form input[type="checkbox"] {
	accent-color: #D94730;
}
.wpcf7-form .wpcf7-list-item {
	margin: 0 1.25rem 0.5rem 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.wpcf7-form-control-wrap input[type="text"],
.wpcf7-form-control-wrap input[type="email"],
.wpcf7-form-control-wrap input[type="tel"],
.wpcf7-form-control-wrap textarea {
	width: 100%;
	border: 1px solid oklch(var(--background-300));
	border-radius: 0.375rem;
	padding: 0.65rem 0.9rem;
	margin-top: 0.4rem;
	transition: border-color .2s ease;
}
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
	outline: none;
	border-color: #D94730;
}


/* ---------- pt-10 / md:pt-14 が未コンパイルだったため直接定義（お問い合わせページのフォームカード上余白） ---------- */
.pt-10 { padding-top: 2.5rem; }
@media (min-width: 768px) {
	.md\:pt-14 { padding-top: 3.5rem; }
}


/* ===== header font size up ===== */
header .ib2-nav-link { font-size: 20px !important; }
header a.bg-accent-500 { font-size: 20px !important; }
header a[href^="tel:"] > span:first-child { font-size: 22px !important; }
header a[href^="tel:"] > span:last-child { font-size: 13px !important; }
header a.relative.z-50 span.font-heading { font-size: 24px !important; }
header a.relative.z-50 span.font-label { font-size: 10px !important; }
header .ib2-mega a.text-xs { font-size: 18px !important; }
header .ib2-mega a.font-semibold { font-size: 22px !important; }
header .ib2-mega span[class*="text-[10px]"] { font-size: 12px !important; }


/* ===== legacy works body (imported 納入実績) ===== */
.ib2-legacy-body { color: #4b4b4b; font-size: 15px; line-height: 2; }
.ib2-legacy-body h2 { font-size: 20px; font-weight: 600; color: #222; line-height: 1.5; margin: 2.4em 0 0.9em; padding-left: 0.7em; border-left: 4px solid #c8553d; }
.ib2-legacy-body h2:first-child { margin-top: 0; }
.ib2-legacy-body h3 { font-size: 17px; font-weight: 600; color: #222; margin: 1.8em 0 0.6em; }
.ib2-legacy-body p { margin: 0 0 1.2em; }
.ib2-legacy-body figure { margin: 1.4em 0; }
.ib2-legacy-body img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.ib2-legacy-body figcaption { font-size: 13px; color: #777; margin-top: 0.5em; }
.ib2-legacy-body ul, .ib2-legacy-body ol { margin: 0 0 1.2em 1.4em; }
.ib2-legacy-body li { margin-bottom: 0.3em; }
.ib2-legacy-body a { color: #c8553d; text-decoration: underline; }
.ib2-legacy-body .wp-block-columns { display: flex; flex-wrap: wrap; gap: 16px; }
.ib2-legacy-body .wp-block-column { flex: 1 1 240px; }
.ib2-legacy-body .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6em 0; }


/* ===== works list: load more ===== */
.ib2-work-more { text-align: center; margin: 48px 0 8px; }
.ib2-work-more-btn { display: inline-block; min-width: 260px; padding: 14px 32px; border: 1px solid #222; background: #fff; color: #222; font-size: 15px; letter-spacing: 0.05em; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ib2-work-more-btn:hover { background: #222; color: #fff; }


/* ===== legacy body block styles (alignment / columns / gallery / media-text) ===== */
.ib2-legacy-body::after { content: ""; display: table; clear: both; }
.ib2-legacy-body .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.ib2-legacy-body figure.aligncenter { text-align: center; }
.ib2-legacy-body .alignleft { float: left; margin: 0.3em 1.6em 1em 0; max-width: 50%; }
.ib2-legacy-body .alignright { float: right; margin: 0.3em 0 1em 1.6em; max-width: 50%; }
.ib2-legacy-body .alignnone { margin-left: 0; margin-right: 0; }
.ib2-legacy-body figcaption { text-align: center; }
.ib2-legacy-body .wp-block-image img { height: auto; }
.ib2-legacy-body .wp-block-columns { display: flex; flex-wrap: nowrap; gap: 24px; align-items: flex-start; margin: 1.4em 0; }
.ib2-legacy-body .wp-block-column { flex: 1 1 0; min-width: 0; }
.ib2-legacy-body .wp-block-column figure { margin: 0 0 1em; }
.ib2-legacy-body .wp-block-column img { width: 100%; height: auto; }
.ib2-legacy-body .wp-block-spacer { clear: both; }
.ib2-legacy-body .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.4em 0; padding: 0; list-style: none; }
.ib2-legacy-body .wp-block-gallery .wp-block-image { margin: 0; flex: 1 1 calc(33.333% - 10px); min-width: 180px; }
.ib2-legacy-body .wp-block-gallery.is-cropped .wp-block-image { aspect-ratio: 4 / 3; overflow: hidden; }
.ib2-legacy-body .wp-block-gallery.is-cropped .wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ib2-legacy-body .wp-block-media-text { display: grid; grid-template-columns: 50% 1fr; gap: 28px; align-items: center; margin: 1.6em 0; }
.ib2-legacy-body .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 50%; }
.ib2-legacy-body .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
.ib2-legacy-body .wp-block-media-text__media { margin: 0; }
.ib2-legacy-body .wp-block-media-text__media img { width: 100%; height: auto; }
.ib2-legacy-body .wp-block-media-text__content > :last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .ib2-legacy-body .wp-block-columns { flex-direction: column; gap: 0; }
  .ib2-legacy-body .wp-block-media-text, .ib2-legacy-body .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr; }
  .ib2-legacy-body .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }
  .ib2-legacy-body .alignleft, .ib2-legacy-body .alignright { float: none; margin: 1em auto; max-width: 100%; }
}


/* ===== eyecatch (featured image at top of article body, same as legacy site) ===== */
.ib2-eyecatch { text-align: center; margin: 0 0 2.2rem; }
.ib2-eyecatch img { display: inline-block; max-width: 100%; height: auto; }
