/*
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;
	}
}
@charset "utf-8";
/*
 * Copyright (c) 2012 takashi shinohara
 * this Library is licensed. http://aulta.jp/library/
 * http://aulta.jp/library/wordpress/contactForm7Confirm.html
 * last update: 2012-02-15, 0.0.1.
 *
 *	MTL 変更履歴
 *	02-OCT-2012	確認画面の文字色等を変更
 *	24-APR-2019	エラーメッセージの表示位置を各フィールドの次に移動
 */

/*
 * 入力時に付加するclass
 */
#my-contact section#contact_form {
	padding-top: 47px;
	padding-bottom: 89px;
}
#my-contact section#contact_form p.note {
	margin-bottom: 23px;
}
form.wpcf7-form-mode-edit{
	
}
form.wpcf7-form p {
	font-size: 1rem;
	line-height: 1.5;
}
form.wpcf7-form table {
	width: 100%;
	margin-bottom: 80px;
}
form.wpcf7-form tr {
	border-bottom: #E2E2E2 2px solid;
}
form.wpcf7-form table tr:last-of-type {
	border-bottom: none;
}
form.wpcf7-form .red {
	color: #E60013;
}
form.wpcf7-form table tr:not(tr:first-of-type) td p{
	padding-top: 41px;
}
form.wpcf7-form td p {
	padding-bottom: 40px;
}
form.wpcf7-form th {
	width: 184px;
}
form.wpcf7-form th p {
	padding: 53px 40px 54px 0px;
	text-align: center;
	text-wrap: nowrap;
}
form.wpcf7-form table tr:first-of-type th p {
	padding-top: 12px;
}
form.wpcf7-form th p,
form.wpcf7-form td p {
}
form.wpcf7-form td p input,
form.wpcf7-form td p textarea {
	width: 100%;
	background-color: var(--iiau-light-brown);
	border-radius: 10px;
	padding: 0 10px;
}
form.wpcf7-form table tr:last-of-type td p {
	padding-bottom: 0;
}
form.wpcf7-form td p input {
	height: 50px;
}
form.wpcf7-form td p textarea {
	height: 200px;
}
form.wpcf7-form table.contactform + p {
	text-align: center;
	margin-bottom: 79px!important;
}
#my-contact form.wpcf7-form p.buttons-area-confirm,
#my-contact form.wpcf7-form p.submit-button {
	text-align: center;
	padding: 0;
	margin-bottom: 0;
}
#my-contact form.wpcf7-form p.buttons-area-confirm input,
#my-contact form.wpcf7-form p.submit-button input {
	background-color: #5D554B;
	font-size: 1.125rem;
	text-align: center;
	color: white;
	font-weight: 500;
	border-radius: 50px;
	border: none;
	width: 154px;
	height: 50px;
}
#my-contact form.wpcf7-form p.buttons-area-confirm input:hover,
#my-contact form.wpcf7-form p.submit-button input:hover {
	background-color: var(--iiau-brown);
}
#my-contact .grecaptcha-badge {
	bottom: 74px !important;	/* 2026.09 KAZ */
}

/*
 * 確認時に付加するclass
 */
form.wpcf7-form-mode-confirm{
	
}
form.wpcf7-form-mode-confirm table tr:not(tr:first-of-type) td p {
	padding-top: 53px;
}
form.wpcf7-form-mode-confirm table tr:first-of-type td p {
	padding-top: 12px;
}
form.wpcf7-form-mode-confirm th{	/* 問い合わせページのプレビューで、<TH>の幅が広がりすぎるので  */

}
form.wpcf7-form-mode-confirm .email_confirm_line,
form.wpcf7-form-mode-confirm .accept_line,
form.wpcf7-form-mode-confirm .captcha_line {	/* 確認時に表示しない項目 */
	display: none;
}

/*
 * 「確認へ」を押したときの入力チェックでひっかかった時に表示するメッセージ
 */
/*form.wpcf7-form ul.error-messages{
 *	color:red;
 *}
 */	/* APR-2019 KAZ: revised as follows */
form.wpcf7-form span.wpcf7-form-control-wrap .error-messages {
	display: block;
	color: red;
}

/*
 * 入力チェックに引っかかったときに tr.addClass('error')
 */
/*form.wpcf7-form table tr.error td{
 *	background-color:#FFA8EC;
 *}
 */	/* APR-2019 KAZ: c/o */
form.wpcf7-form .wpcf7-not-valid-tip {
	display: none;	/* 2024.10 KAZ */
}
form.wpcf7-form .wpcf7-file + .wpcf7-not-valid-tip {
	display: block;	/* 2024.10 KAZ */
}

/*
 * プレビュー時のテキスト
 */
/*form.wpcf7-form table td span.wpcf7-form-control-wrap-confirm{
 *	color:green;
 *}
 */	/* MTL: c/o */
form.wpcf7-form span.wpcf7-form-control-wrap-confirm {	/* MTL */
	/*color: black;
	font-weight: bold;*/
}

/*
 * ボタンエリア、確認へ
 */
form.wpcf7-form p.buttons-area-confirm{
	padding:20px;
	/* text-align:center; */
}

/*
 * ボタンエリア、書き直す、送信（「書き直す」が加わるため位置調整）
 */
form.wpcf7-form p.buttons-area .button-rewrite{
	margin-right:20px;
}
/* form.wpcf7-form p.buttons-area .wpcf7-submit{
	margin-left:20px;
}
*/	/* MTL: c/o */


/* 送信後 */
form.wpcf7-form div.wpcf7-mail-sent-ok,
.wpcf7-form.sent .wpcf7-response-output {
	display: none;
}
@media screen and (max-width: 767px) {
	#my-contact section#contact_form {
		padding-top: 22px;
		padding-bottom: 120px;
	}
	#my-contact section#contact_form p.note {
		margin-bottom: 6px;
	}
	form.wpcf7-form table {
		margin-bottom: 50px;
	}
	form.wpcf7-form p {
		font-size: 0.875rem;
		line-height: 1; /*calc(38 / 14)*/
	}
	form.wpcf7-form tr {
		display: flex;
		flex-direction: column;
	}
	form.wpcf7-form th p,
	form.wpcf7-form table tr:first-of-type th p {
		padding-bottom: 10px;
		padding-top: 40px;
		text-align: left;
	}
	form.wpcf7-form td p,
	form.wpcf7-form table tr:not(tr:first-of-type) td p,
	form.wpcf7-form-mode-confirm table tr:first-of-type td p {
		padding-top: 0;
	}
	form.wpcf7-form td p textarea {
		height: 500px;
	}
	form.wpcf7-form table.contactform + p {
		line-height: 2;
/*		white-space: pre; 2026.09 AKi c/o 改行禁止するcssのため、HTML中の<wbr>と相性が悪い */
		max-width: 600px;
		margin-inline: auto;
		margin-bottom: 60px!important;
	}
	#my-contact form.wpcf7-form p.submit-button {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#my-contact form.wpcf7-form p.submit-button input {
		margin-right: 0;
	}
	form.wpcf7-form td p:has(.error-messages) input,
	form.wpcf7-form td p:has(.error-messages) textarea {
		margin-bottom: 10px;
	}
	form.wpcf7-form-mode-confirm tr {
		flex-direction: row;
	}
	form.wpcf7-form-mode-confirm th {
		width: 135px;
	}
	form.wpcf7-form-mode-confirm th p,
	form.wpcf7-form-mode-confirm td p {
		padding-top: 40px!important;
		padding-bottom: 40px!important;
	}
}
@media screen and (max-width: 350px) {
	form.wpcf7-form table.contactform + p {
		white-space: normal;
	}
}