/*
Theme Name: tagawa fd
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

/* ==========================================================================
	アクセシビリティツール
========================================================================== */
/* 変数宣言 */
:root {
	--text-size: 16px;
	--bg-color: #fff;
	--border-color: #000;
	--color-text: #000;
	--blue-bg: #2004c8;
	--white-bg: #fff;
	--black-bg: #000;
}
/* 背景色変更・文字サイズ変更用に変数を使用した形でfs,bg,colorの宣言 */
html,
body {
	font-size: var(--text-size);
	background-color: var(--bg-color);
	color: var(--color-text);
	/* 絶対値での宣言をremに変更 */
	--wp--preset--font-size--medium: 1.25rem;
	--wp--preset--font-size--x-large: 2.625rem;
}
/* 背景色で青を選択した場合の各種変数 */
.theme-blue {
	--bg-color: var(--blue-bg);
	--primary-color: #120272;
	--border-color: #fff;
	--color-text: #fff;
	--vk-color-text-body: #fff;
	--vk-color-text-link: #ffd400;
	--vk-color-text-link-hover: #f2e04e;
	--vk-color-text-light: #ccc;
	--vk-color-text-meta: #fff;
	--vk-color-border-hr: #fff;
	--vk-color-primary: var(--primary-color);
	--vk-color-primary-dark: #0b014a;
	--vk-color-primary-vivid: #2e0bff;
	--vk-size-text: var(--text-size);
	--wp--preset--color--vk-color-primary: var(--primary-color);
	--wp--preset--color--vk-color-primary-dark: #0b014a;
	--wp--preset--color--vk-color-primary-vivid: #2e0bff;
}
/* 背景色で黒を選択した場合の各種変数 */
.theme-black {
	--bg-color: var(--black-bg);
	--primary-color: #808080;
	--border-color: #fff;
	--color-text: #fff;
	--vk-color-text-body: #fff;
	--vk-color-text-link: #ffd400;
	--vk-color-text-link-hover: #f2e04e;
	--vk-color-text-light: #ccc;
	--vk-color-text-meta: #fff;
	--vk-color-border-hr: #fff;
	--vk-color-primary: var(--primary-color);
	--vk-color-primary-dark: #5e5e5e;
	--vk-color-primary-vivid: #c3c3c3;
	--vk-size-text: var(--text-size);
	--wp--preset--color--vk-color-primary: var(--primary-color);
	--wp--preset--color--vk-color-primary-dark: #5e5e5e;
	--wp--preset--color--vk-color-primary-vivid: #c3c3c3;
}
/* 文字サイズで小さくを選択した場合の各種変数 */
.theme-fs-small {
	--text-size: 12px;
	--vk-size-text: 12px;
	--wp--preset--font-size--normal: 12px;
}
/* 文字サイズで大きくを選択した場合の各種変数 */
.theme-fs-large {
	--text-size: 20px;
	--vk-size-text: 20px;
	--wp--preset--font-size--normal: 20px;
}

/* ヘッダーのサイトタイトル横にアクセシビリティツールを実装するため追加 */
.site-header-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* ヘッダーのflex化に伴い、一行で表示されるようwidthを100%に変更 */
.global-nav {
	width: 100%;
	margin-inline: auto;
}

.accessibility-block {
	display: flex;
	gap: 24px;
	align-items: center;
	margin-left: auto;
}

.accessibility-block__change-area {
	display: flex;
	gap: 24px;
	align-items: center;
	margin-left: auto;
}
.accessibility-block__change-area-button {
	display: none;
}

@media (max-width: 767.98px) {
	.site-header-container {
		overflow: inherit;
		gap: 12px;
		padding-bottom: 0.5rem;
	}
	.accessibility-block {
		flex-direction: column;
		justify-content: center;
		gap: 12px;
		position: relative;
		width: 100%;
	}
	.accessibility-block__change-area-button {
		display: block;
		appearance: none;
		cursor: pointer;
		border: 2px solid var(--border-color);
		color: #000;
		background: white;
		padding: 4px 8px;
		height: 40px;
		margin: 0 auto;
	}
	.accessibility-block__change-area {
		transition: all ease 0.3s;
		transform-origin: top left;
		transform: scaleY(0);
		opacity: 0;
		padding: 12px 24px;
		gap: 16px;
		position: absolute;
		right: 0;
		top: 40px;
		margin: 0 auto;
		width: 100%;
		background: var(--bg-color);
		border: 1px solid var(--border-color);
		flex-direction: column;
		z-index: 1;
	}
	.accessibility-block__change-area.is-active {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* 背景色変更ボタン */
.change-bg-controller {
	display: flex;
	gap: 8px;
	align-items: center;
}
.change-bg-controller__title {
	color: var(--color-text);
	margin-bottom: 0;
	flex-shrink: 0;
}
.change-bg-controller__buttons {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}
.change-bg-controller__button {
	color: #000;
	padding: 4px 8px;
	font-family: inherit;
	appearance: none;
	cursor: pointer;
	background-color: transparent;
	border: transparent;
	font-size: 0.83rem;
	border-width: 2px;
	border-style: solid;
	transition: opacity 0.15s ease-in-out;
}
.change-bg-controller__button:hover {
	opacity: 0.7;
}
.change-bg-controller__button--white {
	background: var(--white-bg);
	border-color: #000;
}
.change-bg-controller__button--blue {
	background: var(--blue-bg);
	border-color: var(--blue-bg);
	color: #fff;
}
.change-bg-controller__button--black {
	background: var(--black-bg);
	border-color: var(--black-bg);
	color: #fff;
}
/* 文字サイズ変更ボタン */
.change-fs-controller {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
}
.change-fs-controller__title {
	color: var(--color-text);
	margin-bottom: 0;
	flex-shrink: 0;
	line-height: 1;
}
.change-fs-controller__buttons {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}
.change-fs-controller__button {
	padding: 4px 8px;
	color: var(--color-text);
	font-family: inherit;
	appearance: none;
	cursor: pointer;
	background-color: #fff;
	border-color: #000;
	border-width: 2px;
	border-style: solid;
	transition: opacity 0.15s ease-in-out;
	font-size: 0.83rem;
}
.change-fs-controller__button.is-active {
	background: #000;
	border-color: #000;
	color: #fff;
}
.change-fs-controller__button:hover {
	opacity: 0.7;
}
/* 検索ボタン */
.search-form {
	display: flex;
	align-items: stretch;
}
.search-form__field,
.search-form__submit {
	height: 36px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
}
.search-form__field {
	border-radius: 24px 0px 0px 24px;
	border: 1px solid rgba(0, 0, 0, 0.125);
	padding: 8px;
	font-size: 0.83rem;
}
.search-form__submit {
	padding: 7px 10px;
	font-family: inherit;
	appearance: none;
	cursor: pointer;
	background-color: #337ab7;
	transition: opacity 0.15s ease-in-out;
	border: none;
	border-radius: 0px 24px 24px 0;
}
.search-form__icon {
	width: 14px;
	height: 14px;
}
@media (max-width: 767.98px) {
	.search-form {
		width: 100%;
	}
	.search-form__field {
		width: 100%;
	}
}

/* ==========================================================================
	背景色の変更（青か黒）がクリックされている場合
========================================================================== */
.theme-black,
.theme-blue {
	.header-top {
		color: var(--color-text);
		background-color: var(--vk-color-primary-vivid);
	}
	.change-fs-controller__button {
		background: var(--bg-color);
		border-color: var(--border-color);
		color: var(--color-text);
	}
	.change-fs-controller__button.is-active {
		background: var(--primary-color);
	}
	.site-header {
		background-color: var(--bg-color);
	}
	.mini-content-container-1 .btn[class],
	.mini-content-container-2 .btn[class] {
		color: var(--color-text);
		background: var(--bg-color);
		border-color: var(--border-color);
	}
	.change-bg-controller__button--blue {
		border-color: var(--border-color);
	}
	.search-form__field {
		border: 1px solid var(--border-color);
		background: var(--bg-color);
		color: var(--color-text);
	}
	.search-form__field::placeholder {
		color: var(--color-text);
	}
	.search-form__submit {
		background-color: var(--primary-color);
	}
	.vk-mobile-nav {
		background-color: var(--bg-color);
		color: var(--color-text);
		border-color: var(--border-color);
	}
	.vk-mobile-nav .widget_nav_menu ul li a,
	.vk-mobile-nav nav ul li a {
		color: var(--color-text);
	}
	.vk-menu-acc .acc-btn {
		background-color: #fff;
		border-color: var(--border-color);
	}
	.vk_borderBox:not([class*='vk_borderBox-color']).is-style-vk_borderBox-style-solid-kado-tit-tab
		> .vk_borderBox_title_container:not(.has-background),
	.vk_borderBox:not([class*='vk_borderBox-color']).is-style-vk_borderBox-style-solid-round-tit-tab
		> .vk_borderBox_title_container:not(.has-background),
	.vk_borderBox:not([class*='vk_borderBox-color']).is-style-vk_borderBox-style-solid-kado-tit-banner
		> .vk_borderBox_title_container:not(.has-background) {
		background-color: var(--vk-color-primary-dark);
	}
	.vk_borderBox:not([class*='vk_borderBox-color']):not(.has-text-color) {
		color: var(--vk-color-primary-dark);
	}
	.postListText_singleTermLabel_inner,
	.entry-meta-data-list dt,
	.vk_post_imgOuter_singleTermLabel {
		background-color: var(--primary-color) !important;
	}
	& ul.page-numbers li a:hover {
		background-color: var(--vk-color-primary-vivid);
	}
	.color-invert-text-blue,
	.color-invert-image {
		display: block;
		-webkit-filter: invert(1);
		filter: invert(1);
	}
	.page_top_btn {
		background-color: var(--primary-color);
	}
	/* styleで青文字が指定されているテキスト */
	.color-blue-text {
		color: var(--color-text) !important;
	}
	/* styleで青文字が指定されているリンク */
	.color-blue-link {
		color: var(--vk-color-text-link) !important;
	}
	/* styleで黄色背景が指定されているテキスト・リンク */
	.bg-yellow-text,
	.bg-yellow-link {
		color: #000 !important;
	}
	.wp-elements-a89c674028ab9b5f6c33a6f48179038d a:where(:not(.wp-element-button)) {
		color: var(--color-text);
	}
	& li a,
	& p a {
		text-decoration-color: currentColor;
	}
	.entry-title--post-type--page,
	& h2:where(:not(.wp-block-post-title)) {
		border-color: var(--border-color);
	}
	/* 白背景の文字を黒文字に変更 */
	:where(.has-white-background-color) {
		color: #000;
	}
}

/* ==========================================================================
	背景色の変更（青）がクリックされている場合
========================================================================== */
.theme-blue {
	.vk_slider .swiper-button-next,
	.vk_slider .swiper-button-prev,
	.vk_post_list_slider .swiper-button-next,
	.vk_post_list_slider .swiper-button-prev {
		background-color: rgba(32, 4, 200, 0.5);
	}
	.global-nav-list > li:hover,
	.global-nav-list > li[class*='current']:where(:not(.menu-item-anchor)) {
		background: var(--vk-color-primary-dark);
	}
	.recruit-talker-label {
		border: 2px solid var(--border-color);
	}
	.card {
		color: var(--color-text);
	}
	.card-body {
		background-color: var(--blue-bg);
	}
	/* styleで青文字が指定されているテキスト */
	.color-blue-text {
		color: var(--color-text) !important;
	}
	/* styleで青文字が指定されているリンク */
	.color-blue-link {
		color: var(--vk-color-text-link) !important;
	}
	/* テーマで用意されている青系統の文字色は白色に変更 */
	.has-black-color:where(:not(.has-white-background-color)),
	.has-cyan-bluish-gray-color,
	.has-light-green-cyan-color,
	.has-vivid-green-cyan-color,
	.has-pale-cyan-blue-color,
	.has-vivid-cyan-blue-color {
		color: var(--color-text) !important;
	}
}

/* ==========================================================================
	背景色の変更（黒）がクリックされている場合
========================================================================== */
.theme-black {
	.header-top {
		color: #000;
	}
	.change-bg-controller__button--white,
	.change-bg-controller__button--black {
		border-color: var(--border-color);
	}
	.change-fs-controller__button {
		color: var(--color-text);
	}
	.card {
		color: #000;
	}
	.vk_post .vk_post_title a {
		color: var(--color-text);
	}
	.card-body .card-title a {
		color: #000;
	}
	.btn-primary:active,
	.btn-primary:focus,
	.btn-primary:hover,
	.btn-primary:not(:disabled):not(.disabled):active {
		background-color: var(--vk-color-primary-vivid);
		border-color: var(--vk-color-primary-vivid);
	}
	ul.page-numbers li span.page-numbers.current {
		color: #000;
	}
	/* テーマで用意されている黒の文字色は白色に変更 */
	.has-black-color:where(:not(.has-white-background-color)) {
		color: var(--color-text) !important;
	}
}

/* ==========================================================================
	文字サイズの変更に対応するため、文字サイズの単位をremに変更
========================================================================== */
/* 14px */
.global-nav-list > li .global-nav-name,
.postListText_date,
.postListText_title,
.vk_post .vk_post_title {
	font-size: 0.875rem;
}
/* 12px */
.global-nav-list li,
.postListText_singleTermLabel_inner,
.vk_post .vk_post_excerpt,
.vk_post .vk_post_btn,
.breadcrumb,
.entry-meta-data-list dd,
.device-mobile .global-nav-list > li .global-nav-name {
	font-size: 0.75rem;
}
/* 10px */
.entry-meta-data-list dt {
	font-size: 0.625rem;
}

/* ==========================================================================
採用情報ページ
========================================================================== */
/* 自己紹介の氏名 */
.recruit-person-name {
	width: 100%;
}
/* 話者の名前 */
.recruit-talker-label {
	padding: 0 40px;
	@media (max-width: 767.98px) {
		padding: 0 14px;
	}
}
:where(.recruit-catchcopy) {
	border-color: var(--border-color);
	margin-block-start: calc((1em - 1lh)) !important;
}
/* SP版において、左右のpaddingを無効化 */
.page-id-6590 .site-body-container {
	@media (max-width: 767.98px) {
		padding: 0;
	}
}
/* SP版のsectionでpaddingをレスポンシブにするために宣言 */
.page-id-6590 .custom-section {
	padding-inline: 26px;
	@media (max-width: 767.98px) {
		padding-inline: 15px;
	}
}
/* SP版において、.site-body-containerに記述されていたpaddingを追加*/
.page-id-6590 .sub-section {
	@media (max-width: 767.98px) {
		padding-inline: 15px;
	}
}
/* 自己紹介の肩書き */
.custom-person-position {
	padding: 6px 18px;
	@media (max-width: 767.98px) {
		padding: 4px 8px;
		font-size: 0.75rem !important;
	}
}

/* ==========================================================================
	汎用
========================================================================== */
/*
	ブロックエディタではPC/SPでフォントサイズの変更ができないため作成 
	PCのフォントサイズはブロックエディタの設定を使用
*/
.custom-responsive-text-body {
	@media (max-width: 767.98px) {
		font-size: 0.75rem !important;
	}
}
.custom-responsive-text-person-name {
	width: fit-content;
	@media (max-width: 767.98px) {
		font-size: 0.75rem !important;
	}
}