/* ==========================================================================
   Picolabo — post / page content
   公開側（.entry-content）とブロックエディター（.is-root-container）で共用する。
   文字サイズはエディターでも崩れないよう em 基準で書く。

   見出し・リスト・表は「ブロックで作られたもの（wp-block-*）」か「クラスなし」だけを
   対象にし、ツールページなどが独自クラスで組んだ要素には干渉しない。
   ========================================================================== */

/* Flow spacing
   -------------------------------------------------------------------------- */
/* 本文に貼られた長いURLなどが、スマホで横にはみ出さないようにする。 */
:is(.entry-content, .is-root-container) {
	overflow-wrap: break-word;
}

:is(.entry-content, .is-root-container) > * {
	margin-block: 0;
}

:is(.entry-content, .is-root-container) > * + * {
	margin-block-start: 1.75em;
}

:is(.wp-block-group, .wp-block-column, .wp-block-cover__inner-container, .wp-block-media-text__content, blockquote) > * + * {
	margin-block-start: 1.25em;
}

/* Headings
   -------------------------------------------------------------------------- */
:is(.entry-content, .is-root-container) :is(h2, h3, h4, h5, h6):is(.wp-block-heading, :not([class])) {
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	font-feature-settings: "palt";
	scroll-margin-top: 104px;
}

:is(.entry-content, .is-root-container) h2:is(.wp-block-heading, :not([class])) {
	position: relative;
	padding-bottom: 0.7em;
	border-bottom: 1px solid #d3dbe1;
	font-size: 1.5em;
}

:is(.entry-content, .is-root-container) h2:is(.wp-block-heading, :not([class]))::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 64px;
	height: 2px;
	background: linear-gradient(90deg, #00aeef 0 62%, #7ed321 62% 100%);
}

:is(.entry-content, .is-root-container) > h2:is(.wp-block-heading, :not([class])) {
	margin-block-start: 3.2em;
}

:is(.entry-content, .is-root-container) h3:is(.wp-block-heading, :not([class])) {
	position: relative;
	padding-left: 0.95em;
	font-size: 1.25em;
}

:is(.entry-content, .is-root-container) h3:is(.wp-block-heading, :not([class]))::before {
	content: "";
	position: absolute;
	top: 0.3em;
	bottom: 0.3em;
	left: 0;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(#00aeef, #35b0ff);
}

:is(.entry-content, .is-root-container) > h3:is(.wp-block-heading, :not([class])) {
	margin-block-start: 2.6em;
}

:is(.entry-content, .is-root-container) h4:is(.wp-block-heading, :not([class])) {
	font-size: 1.08em;
}

:is(.entry-content, .is-root-container) h4:is(.wp-block-heading, :not([class]))::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.6em;
	border: 2px solid #00aeef;
	border-radius: 50%;
	vertical-align: 0.1em;
}

:is(.entry-content, .is-root-container) > :is(h4, h5, h6):is(.wp-block-heading, :not([class])) {
	margin-block-start: 2.2em;
}

:is(.entry-content, .is-root-container) > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: 1.2em;
}

:is(.entry-content, .is-root-container) :is(h2, h3, h4).has-text-align-center {
	padding-left: 0;
}

:is(.entry-content, .is-root-container) h2.has-text-align-center::after {
	left: 50%;
	translate: -50% 0;
}

:is(.entry-content, .is-root-container) h3.has-text-align-center::before {
	display: none;
}

/* Text
   -------------------------------------------------------------------------- */
:is(.entry-content, .is-root-container) a:where(:not(.wp-element-button, .wp-block-button__link)) {
	color: #0076b6;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

:is(.entry-content, .is-root-container) a:where(:not(.wp-element-button, .wp-block-button__link)):hover {
	text-decoration-thickness: 2px;
}

:is(.entry-content, .is-root-container) :is(strong, b) {
	font-weight: 700;
}

:is(.entry-content, .is-root-container) mark:not(.has-inline-color) {
	background: linear-gradient(transparent 58%, rgba(0, 174, 239, 0.2) 58%);
	color: inherit;
}

:is(.entry-content, .is-root-container) small {
	font-size: 0.8125em;
}

:is(.entry-content, .is-root-container) :not(pre) > code {
	padding: 0.15em 0.45em;
	border-radius: 4px;
	background: #f4f8fb;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
}

:is(.entry-content, .is-root-container) pre {
	padding: 1.3em 1.5em;
	overflow-x: auto;
	border-radius: 10px;
	background: #1e2328;
	color: #e4e9ed;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	line-height: 1.75;
	letter-spacing: 0;
}

/* Lists
   -------------------------------------------------------------------------- */
:is(.entry-content, .is-root-container) :is(ul, ol):is(.wp-block-list, :not([class])) {
	padding-left: 1.5em;
}

:is(.entry-content, .is-root-container) :is(ul, ol):is(.wp-block-list, :not([class])) li + li {
	margin-top: 0.45em;
}

:is(.entry-content, .is-root-container) :is(ul, ol):is(.wp-block-list, :not([class])) :is(ul, ol) {
	margin-top: 0.45em;
}

:is(.entry-content, .is-root-container) ul:is(.wp-block-list, :not([class])) > li::marker {
	color: #00aeef;
}

:is(.entry-content, .is-root-container) ol:is(.wp-block-list, :not([class])) > li::marker {
	color: #0076b6;
	font-family: "Outfit", sans-serif;
	font-weight: 600;
}

/* Quote, separator
   -------------------------------------------------------------------------- */
:is(.entry-content, .is-root-container) :is(.wp-block-quote, blockquote:not([class])) {
	padding: 0.2em 0 0.2em 1.5em;
	border-left: 3px solid #d3dbe1;
	color: #4a535c;
}

:is(.entry-content, .is-root-container) :is(.wp-block-quote, blockquote) cite {
	display: block;
	margin-top: 0.8em;
	color: #66717b;
	font-size: 0.8125em;
	font-style: normal;
}

:is(.entry-content, .is-root-container) :is(hr, .wp-block-separator) {
	border: 0;
	border-top: 1px solid #d3dbe1;
}

:is(.entry-content, .is-root-container) > :is(hr, .wp-block-separator) {
	margin-block: 3em;
}

/* Media
   -------------------------------------------------------------------------- */
/* 本文直下の要素は main.css の .entry-content > * で中央寄せするので、詳細度を上げない。 */
:where(.entry-content, .is-root-container) :where(figure, blockquote) {
	margin-inline: 0;
}

:is(.entry-content, .is-root-container) .wp-block-image img {
	border-radius: 6px;
}

/* 配置クラス。WordPress はページで使ったブロックの CSS だけを読み込むため、
   HTML で書かれた本文や入れ子の画像でも崩れないようテーマ側でも持っておく。 */
:is(.entry-content, .is-root-container) .aligncenter {
	margin-inline: auto;
}

/* 画像の幅に合わせて縮め、キャプションも同じ幅にそろえる。 */
:is(.entry-content, .is-root-container) :is(figure, .wp-caption).aligncenter,
:is(.entry-content, .is-root-container) .wp-block-image .aligncenter {
	display: table;
}

:is(.entry-content, .is-root-container) :is(figure, .wp-caption).aligncenter > :is(figcaption, .wp-caption-text),
:is(.entry-content, .is-root-container) .wp-block-image .aligncenter > figcaption {
	display: table-caption;
	caption-side: bottom;
}

:is(.entry-content, .is-root-container) img.aligncenter {
	display: block;
}

:is(.entry-content, .is-root-container) .alignleft {
	float: left;
	margin: 0.3em 1.6em 1em 0;
}

:is(.entry-content, .is-root-container) .alignright {
	float: right;
	margin: 0.3em 0 1em 1.6em;
}

:is(.entry-content, .is-root-container) :is(.alignleft, .alignright) {
	max-width: 50%;
}

/* 本文直下の回り込みは、画面端ではなく本文カラム（760px）の端に寄せる。 */
.entry-content > .alignleft {
	margin-left: max(0px, (100% - 760px) / 2);
}

.entry-content > .alignright {
	margin-right: max(0px, (100% - 760px) / 2);
}

:is(.entry-content, .is-root-container) .wp-caption {
	max-width: 100%;
}

:is(.entry-content, .is-root-container) .wp-caption-text {
	margin-top: 0.8em;
	color: #66717b;
	font-size: 0.8125em;
	text-align: center;
}

:is(.entry-content, .is-root-container) figcaption,
:is(.entry-content, .is-root-container) .wp-element-caption {
	margin-top: 0.8em;
	color: #66717b;
	font-size: 0.8125em;
	line-height: 1.7;
	text-align: center;
}

:is(.entry-content, .is-root-container) iframe {
	max-width: 100%;
}

:is(.entry-content, .is-root-container) iframe[src*="google.com/maps"] {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	border: 0;
	border-radius: 12px;
}

/* Tables
   -------------------------------------------------------------------------- */
:is(.entry-content, .is-root-container) .wp-block-table {
	overflow-x: auto;
}

:is(.entry-content, .is-root-container) :is(.wp-block-table table, table:not([class])) {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375em;
	line-height: 1.8;
}

:is(.entry-content, .is-root-container) :is(.wp-block-table, table:not([class])) :is(th, td) {
	padding: 0.95em 1.15em;
	border: 1px solid #e4e9ed;
	text-align: left;
	vertical-align: top;
}

:is(.entry-content, .is-root-container) :is(.wp-block-table, table:not([class])) th {
	background: #f4f8fb;
	font-weight: 500;
}

:is(.entry-content, .is-root-container) :is(.wp-block-table, table:not([class])) tbody th {
	width: 28%;
	min-width: 7em;
}

/* JINR の「1列目を見出しにする」表（会社概要など）。1列目を th と同じ見た目と幅にする。 */
:is(.entry-content, .is-root-container) .wp-block-table.td_to_th_ td:first-child {
	width: 28%;
	min-width: 7em;
	background: #f4f8fb;
	font-weight: 500;
}

/* スマホでは余白を詰めて、「本社所在地」のような5文字の見出しが1行に収まるようにする。 */
@media (max-width: 600px) {
	:is(.entry-content, .is-root-container) :is(.wp-block-table, table:not([class])) :is(th, td) {
		padding: 0.8em 0.9em;
	}

	:is(.entry-content, .is-root-container) :is(.wp-block-table, table:not([class])) tbody th {
		min-width: 7.6em;
	}

	/* 幅を固定した表（has-fixed-layout）では min-width が効かないので幅で指定する。 */
	:is(.entry-content, .is-root-container) .wp-block-table.td_to_th_ td:first-child {
		width: 7.6em;
	}
}

:is(.entry-content, .is-root-container) .wp-block-table thead {
	border-bottom: 0;
}

:is(.entry-content, .is-root-container) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: #f9fbfc;
}

/* Buttons
   -------------------------------------------------------------------------- */
:is(.entry-content, .is-root-container) .wp-block-button__link {
	padding: 0.95em 2.2em;
	border-radius: 999px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}

:is(.entry-content, .is-root-container) .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
	background: #1e2328;
	color: #fff;
}

:is(.entry-content, .is-root-container) .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
	background: #0076b6;
}

/* Contact Form 7
   -------------------------------------------------------------------------- */
/* CF7 自身の CSS でも隠しているが、読み込み順や最適化プラグインで外れても崩れないように。 */
.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.wpcf7-form > p,
.wpcf7-form > div:not(.wpcf7-response-output) {
	margin: 0 0 1.75em;
}

.wpcf7-form label {
	display: block;
	font-size: 0.9375em;
	font-weight: 500;
}

.wpcf7-form-control:is(input:not([type="checkbox"], [type="radio"], [type="submit"]), textarea, select) {
	width: 100%;
	margin-top: 0.5em;
	padding: 0.85em 1.05em;
	border: 1px solid #d3dbe1;
	border-radius: 10px;
	background: #fff;
	color: #1e2328;
	font: inherit;
	letter-spacing: 0.02em;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.wpcf7-form-control:is(input, textarea, select):focus {
	border-color: #00aeef;
	outline: none;
	box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.15);
}

.wpcf7-form textarea {
	min-height: 12em;
	resize: vertical;
}

.wpcf7-submit {
	display: block;
	min-width: 240px;
	min-height: 56px;
	margin-inline: auto;
	padding: 0 2.4em;
	border: 0;
	border-radius: 999px;
	background: #1e2328;
	color: #fff;
	font: inherit;
	font-weight: 500;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: background-color 0.3s;
}

.wpcf7-submit:hover {
	background: #0076b6;
}

.wpcf7-spinner {
	display: block;
	margin: 12px auto 0;
}

.wpcf7-not-valid-tip {
	margin-top: 0.4em;
	color: #c8323f;
	font-size: 0.8125em;
}

.wpcf7 form .wpcf7-response-output {
	margin: 2em 0 0;
	padding: 1em 1.2em;
	border-radius: 10px;
	font-size: 0.9375em;
}