/* Reset Browser User agent margin */
h1,h2,h3,h4,h5,h6,p,ul,ol {
	margin-top:0;
	margin-bottom:0;
}
body {
	// Cope with not intend horizontal scrollbar display
	// margin-left: calc(50% - 50vw) などのネガティブマージンで横スクロールが発生するのを防ぐ
	// 本来スクロール分を調整する手法の方が正確だが、コードを簡素化するためにこの方法を採用
    overflow-x: hidden;

    // Prevent automatic text zooming on iPhone browsers
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

	// @ 1.15.1 
	// Change selector body,html {} -> body {}
	// * If specify "html, body" then scrolled js not work 
}

html.has-modal-open body {
	// Fix for Navigation Modal Link Jump (X-T9)
	// モーダルメニューオープン時、同一ページ内にあるページ内リンクを正常に動かすため、
	// モーダル中のみ body の overflow-x を visible にする。
	overflow-x: visible;
}

html {
	// 360px : 14px -> 1200px : 16px
	font-size: clamp(14px, calc((100vw - 360px) * (2 / (1200 - 360)) + 14px), 16px);

}

// Global Style で上書きできるように where を付与している
:where(body) {
	font-weight: 500;
	line-height: var(--wp--custom--typography--line-height--normal);
}

* {
	box-sizing: border-box;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;

	&:hover {
		text-decoration: none;
	}

	// theme.json から 
	// a:where(:not(.wp-element-button)) {
	//     color: var(--wp--preset--color--text-normal);
	// }
	// が出力されてしまうため、背景が暗い時 or 白文字指定の時 にリンク文字が見えなくなってしまうので上書き
	:is(.has-bg-dark-background-color,.has-text-normal-darkbg-color) &:where(:not(.wp-element-button)) {
		color: var(--wp--preset--color--text-normal-darkbg);
	}
}

// Global Style で上書きできるように where を付与している
// theme.json で各 h element に指定すると、
// Global Style で「すべて」の見出しにサイズを指定しても theme.json の指定に負けて反映されないため、
// ここでまとめて指定する。
// （「すべて」以外に個別に指定すれば theme.json の指定は上書きできる ）
:where(h1,h2,h3,h4,h5,h6) {
	line-height: var(--wp--custom--typography--line-height--heading);
}

img {
	max-width: 100%;
	height: auto;
}
figure {
	max-width: 100%;
	margin: 0;
	// WP 6.7.2 の時点で、スライダーアイテムブロックの中に画像を配置した場合に中央寄せが効かないため
	// At WP 6.7.2, the image in the slider item block does not center align
	&.aligncenter {
		margin-left:auto;
		margin-right:auto;
	}
}

main {
	ul,
	ol {
		padding-left: 1.5em;
	}
}

input:where(:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='submit'])),
textarea,
select {
	padding: 0.7em;
	border: 1px solid var(--wp--preset--color--border-normal);
	color:var(--wp--preset--color--text-normal);
	background-color: var(--wp--preset--color--bg-primary);
}
input[type='checkbox'],
input[type='radio'] {
	margin: 0;
	width: 1.2em;
	height: 1.2em;
	accent-color: var(--wp--preset--color--primary);
	vertical-align: middle;
	transform: translateY(-0.1em);
}
input[type='checkbox'] {
	border-radius: 0.2em;
}
input[type='radio'] {
	border-radius: 50%;
}
select {
	padding-right: 2.5em;
	background-image:
		url("../images/select-chevron.svg"),
		linear-gradient(var(--wp--preset--color--border-normal), var(--wp--preset--color--border-normal));
	background-repeat: no-repeat;
	background-position: right 0.9em center, right 2.3em center;
	background-size: 0.65em auto, 1px 60%;
	appearance: none;
}

select::-ms-expand {
	display: none;
}

// Cope with select option has many charactors
input,
textarea,
select {
	max-width: 100%;
}

hr {
	margin:0;
}

textarea {
	width: 100%;
}

input[type='submit']{
	cursor: pointer;
	border:none;
	padding:10px 1.5em;
}

iframe {
	max-width: 100%;
}

// お問い合わせフォームなど手打ちした場合用
table,
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;

	&,
	th,
	td {
		border: 1px solid var(--wp--preset--color--border-normal);
		padding: 0.5em 0.8em;
	}
}
