/*
Theme Name:	Iiaudiolab Site's English Page Theme
Author:		MTL Matsuo
Template: iiaudio
*/
@import url('/wp-content/themes/iiaudio/style.css');

* {
	font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif !important;
}

/* The parent theme tightens word-spacing to close up the manually spaced
   Japanese subtitle (特 徴 と 仕 様). English titles need normal spacing. */
#headmenu #inner_menu ul li a span,
#ft_menu li a span {
	word-spacing: normal;
}

/* Show the subtitle on its own line in the hamburger and footer menus,
   matching the page heading layout. */
#headmenu #inner_menu li.page-item-132 > a span,
#ft_menu li.page-item-132 > a span {
	display: block;
}

/* What Is Immersive Audio, section 1 illustration.
   The English artwork carries no burnt-in text: the two captions are laid
   over it here, so they stay sharp at any size and remain editable.
   The positions are the Japanese artwork's own caption positions, measured
   in pixels and converted to per cent. Sizes use cqw so the captions keep
   their proportion to the picture; the px values are the fallback for
   browsers without container queries. */
.iia-fig {
	position: relative;
	container-type: inline-size;
	/* the inherited line-height would add an empty line box below the
	   picture and make the box taller than the image, shifting every
	   per-cent position; the captions set their own line-height. */
	line-height: 0;
	/* the theme puts the bottom margin on <picture>; because container-type
	   traps that margin inside this box it would be counted in the height the
	   per-cent positions are measured against, so move it out to the wrapper. */
	margin-bottom: 21px;
}
.iia-fig picture {
	display: block;
	margin: 0;
}
.iia-fig img {
	display: block;
	width: 100%;
}
.iia-fig .iia-cap {
	position: absolute;
	transform: translateX(-50%);
	text-align: center;
	line-height: 1.3;
	color: #373737;
	white-space: nowrap;
}
.iia-fig .iia-cap b {
	display: block;
	font-weight: 600;
	font-size: 12px;
	font-size: 3.65cqw;
}
.iia-fig .iia-cap > span {
	display: block;
	font-size: 10px;
	font-size: 3.10cqw;
}
/* smartphone artwork: the two illustrations are stacked */
.iia-fig .iia-cap-a { left: 50.5%; top: 28.9%; }
.iia-fig .iia-cap-b { left: 50.5%; top: 94.4%; }

/* desktop artwork: the two illustrations sit side by side */
@media print, screen and (min-width: 768px) {
	.iia-fig { margin-bottom: 45px; }
	.iia-fig .iia-cap-a { left: 19.35%; top: 86.8%; }
	.iia-fig .iia-cap-b { left: 69.10%; top: 86.8%; }
	.iia-fig .iia-cap b {
		font-size: 15px;
		font-size: 2.12cqw;
	}
	.iia-fig .iia-cap > span {
		font-size: 13px;
		font-size: 1.88cqw;
	}
}