/* CSS Document */

/* ページ全体の基本レイアウト
---------------------------------------------------- */
body {
	margin: 0;
	padding: 0;
	background-image: url(./img/Bias17_blue.gif);
	background-repeat: repeat;
	background-color: #000;
	color: #333;
	line-height: 2.5;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

/* スクリプトで設定されるカラーテーマ、フォントサイズ */
@media screen {
	:root {
		--theme_white_background_image: url("./img/Bias15_white.gif");
		--theme_white_background_color: #fff;
		--theme_white_color: #000;

		--theme_black_background_image: url("./img/Bias15_black.gif");
		--theme_black_background_color: #000;
		--theme_black_color: #fff;

		--theme_blue_background_image: url("./img/Bias17_blue.gif");
		--theme_blue_background_color: #99f;
		--theme_blue_color: #000;
	}
	.theme_white {
		--background_image: var(--theme_white_background_image);
		--background_color: var(--theme_white_background_color);
		--color: var(--theme_white_color);
	}
	.theme_black {
		--background_image: var(--theme_black_background_image);
		--background_color: var(--theme_black_background_color);
		--color: var(--theme_black_color);
	}
	.theme_blue {
		--background_image: var(--theme_blue_background_image);
		--background_color: var(--theme_blue_background_color);
		--color: var(--theme_blue_color);
	}

	body {
		background-image: var(--background_image);
		background-color: var(--background_color);
		color: var(--color);

		--font_size_large: 1.25;
		--font_size_medium: 1.00;
		--font_size_small: 0.875;
	}
	.text_controller {
		--button_size: 1.5rem;

		margin: 0.5rem;
		min-block-size: var(--button_size);
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		justify-content: end;
		text-align: center;
		line-height: var(--button_size);
	}
	:where(.text_controller) :is(.color_theme_button_list, .font_size_button_list) {
		display: flex;
		gap: 0.75rem;
		position: relative;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	:where(.text_controller :is(.color_theme_button_list, .font_size_button_list)) > li {
		display: block;
		flex: 0 0 var(--button_size);
	}

	/* ボタンのスタイル */
	:where(.text_controller) .theme_button {
		display: block;
		inline-size: var(--button_size);
		block-size: var(--button_size);
	}
	:where(.text_controller) .label_text {
		display: block;
		box-sizing: border-box;
		inline-size: 100%;
		block-size: 100%;
		border-color: #ccc;
		border-width: 1px;
		border-style: outset;
	}
	:where(.font_size_button_list) .label_text {
		background-color: #fff;
		color: #333;
		border-radius: 50%;
	}

	:where(.theme_button):hover {
		cursor: pointer;
	}
	:where(.theme_button:has(:checked)):hover {
		cursor: revert;
	}
	:where(.theme_button) input {
		display: block;
		position: absolute;
		block-size: 1px;
		inline-size: 1px;
		opacity: 0;
	}
	:where(.theme_button input:focus-visible) + .label_text {
		outline-style: solid;
	}
	:where(.theme_button input:checked) + .label_text {
		color: hsl(0deg, 0%, 75%);
		border-style: inset;
	}

	:where(.text_controller) .theme_white_button {
		background-color: var(--theme_white_background_color);
		color: var(--theme_white_color);
	}
	:where(.text_controller) .theme_black_button {
		background-color: var(--theme_black_background_color);
		color: var(--theme_black_color);
	}
	:where(.text_controller) .theme_blue_button {
		background-color: var(--theme_blue_background_color);
		color: var(--theme_blue_color);
	}

	:where(.text_controller) .font_small_button {
		font-size: calc(1rem * var(--font_size_small));
	}
	:where(.text_controller) .font_medium_button {
		font-size: calc(1rem * var(--font_size_medium));
	}
	:where(.text_controller) .font_large_button {
		font-size: calc(1rem * var(--font_size_large));
	}

	.font_small {
		font-size: calc(1rem * var(--font_size_small));
	}
	.font_medium {
		font-size: calc(1rem * var(--font_size_medium));
	}
	.font_large {
		font-size: calc(1rem * var(--font_size_large));
	}
}
@media not screen {
	.text_controller {
		display: none;
	}
}
/* スクリプトで設定ここまで */

.content {
	margin-inline: 8px;
}
.content-inner {
	max-inline-size: max(93.75%, 48rem);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: start;
	gap: 1rem;
}
.main {
	flex: 1 1 30rem;
	padding: 0.5rem;
	background-color: #fff;
	color: #333;
	border: 1px solid #000099;
}
.menu {
	flex: 0 1 16rem;
	padding: 0.5rem;
	background-color: #fff;
	color: #333;
}

/* リンク
---------------------------------------------------- */
:where(.content) :any-link {
	text-decoration: none;
	padding-bottom: 0.1em;
	background-repeat: repeat-x;
	background-position: bottom;
}
:where(.content) :link {
	color: #003366;
	background-image: url(img/dot-green.gif);
}
:where(.content) :visited {
	color: #777777;
	background-image: url(img/dot-gray.gif);
}
:where(.content :any-link):hover {
	color: #ff7f00;
	background-image: url(img/dot-orange.gif);
}

/* ヘッダ
---------------------------------------------------- */
.kujira_address {
	font-style: normal;
	max-width: fit-content;

	margin-block: 0.5rem;
	margin-inline-start: auto;
	margin-inline-end: 0.5rem;
}
.opening_hours {
	color: red;
}

#area-billboard {
	background: url(img/Bias15_blue.gif) repeat;
	background-color: #000000;
	color: #ffffff;
	padding-top: 3px;
}
.billboard-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}
.area-subnav {
	text-align: right;
	padding-right: 10px;
	padding-bottom: 10px;
}
:where(.area-subnav) :any-link {
	color: inherit;
	background-image: none;
}
:where(.area-subnav :link):hover {
	text-decoration: underline;
}
.bread-crumb {
	margin-block-start: 1rem;
	margin-block-end: 0;
	margin-inline-start: 1rem;
	margin-inline-end: 1rem;
}

/* ナビゲーション
---------------------------------------------------- */
/* サブナビゲーション
---------------------------------------------------- */
/* メインコンテンツ
---------------------------------------------------- */

h1, h2, h3 {
	margin-block-start: 0;
	margin-block-end: 0.75em;
	padding-block-start: 0.75em;
	padding-block-end: 0.25em;
	padding-inline-start: 1em;
	padding-inline-end: 1em;
}

h1 {
	background-image: url(img/bg_h1_blue.gif);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-size: larger;
}
h2 {
	background: #003399;
	color: #FFFFFF;
	font-size: 1em;
}
h3 {
	color: #003399;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #003399;
	font-size: 1em;
}

.section {
	margin-bottom: 40px;
}
.section p {
	padding-left: 20px;
}
.section img {
	border-style:none;
}
ruby > rt {
	font-size: 62.5%;
}

/* サイドバー
---------------------------------------------------- */
/* #menu
------------------ */
.menu-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: bold;
}
:where(.menu-list) > li {
	display: block;
}
:where(.menu-list) .menu-item {
	display: block;
	padding-block-start: 1em;
	padding-block-end: 0.5em;
	padding-inline: 0.75em;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
:where(.menu-list) .menu-link {
	display: block;
	background-image: url(img/bg_menu_r_blue.gif);
}
:where(.menu-list) .menu-link:hover {
	background-image: url(img/bg_menu_ov2.gif);
}
:where(.menu-list) .menu-current {
	background-image: url(img/bg_menu_cr_blue.gif);
}

/* フッタ
---------------------------------------------------- */
[id="footer"] {
	padding: 9px 0px 25px;
	text-align: center;
}

.page_switcher {
	display: flex;
	flex-wrap: wrap;
	padding-block-start: 3rem;
	padding-block-end: 0.5rem;
	padding-inline-start: 0.5rem;
	padding-inline-end: 0.5rem;

	border-style: solid none;
	border-color: #e5e5e5;
	border-width: 1px;

	background-image: url(img/Bias15_blue.gif);
	background-color: #000066;
	color: #ffffff;
}
:where(.page_switcher) .go_previous {
	flex: 1 1 auto;
	text-align: start;
}
:where(.page_switcher) .go_next {
	flex: 1 1 auto;
	text-align: end;
}
:where(.page_switcher) :any-link {
	color: inherit;
}
:where(.page_switcher .go_previous) :link::before {
	content: url(img/Plain_wht_Left.png);
	padding-inline: 0.5em;
}
:where(.page_switcher .go_next) :link::after {
	content: url(img/Plain_wht_Right.png);
	padding-inline: 0.5em;
}

#createai {
	margin: 0;
	font-size: smaller;
	text-align: right;
	padding-bottom: 7px;
	padding-right: 7px;
}

@media print {
	#area-header, .area-subnav, .bread-crumb, #gotoHeader, .menu, .page_switcher {
		display: none;
	}
	.main {
		width: 100%;
	}
}

.goto_header, .adobe_download {
	padding-block-start: 1em;
	background-image: url(img/hr_blue.gif);
	background-repeat: repeat-x;
}
.goto_header {
	margin-block-start: 0;
	text-align: right;
}
.adobe_download {
	padding-block-start: 1em;
	background-image: url(img/hr_blue.gif);
	background-repeat: repeat-x;
}

.kujira_data_table {
	inline-size: 100%;
	border-collapse: collapse;
}
:where(.kujira_data_table > tbody > tr) > :is(th, td) {
	border-style: solid;
	border-width: medium;
}
.reservation_required {
	font-style: normal;
	color: #09AE09;
}
.address_cell {
	display: flex;
	flex-wrap: wrap;
}
:where(.address_cell) .address_data {
	flex: 1 1 fit-content;
}
:where(.address_cell) .email_qr_code {
	margin: 0;
	flex: 1 1 fit-content;
	text-align: center;
}

.url {
	overflow-wrap: anywhere;
}

/* 就労支援センター紹介ページ */
.support_table {
	inline-size: 100%;
	border-collapse: collapse;
}
:where(.support_table) :is(th, td) {
	border-style: solid;
	border-width: thin;
	border-color: #333333;
}
:where(.support_table) :is(.step_heading, .step_sub_heading) {
	min-width: 2rem;
	padding: 0.125rem;
	background-clip: content-box;
	color: white;
}
:where(.support_table) .step_heading {
	background-color: #000066;
}
:where(.support_table) .step_sub_heading {
	background-color: #003399;
}
:where(.support_table) .step_list {
	margin-block: 0.5rem;
}

/* サイトマップ */
.sitemap_page_list {
	list-style-type: disc;
	padding-inline-start: 2.5rem;
}
:where(.sitemap_page_list) > div {
	display: list-item;
	margin-block-end: 1rem;
}
:where(.sitemap_page_list > div) > dd {
	margin-inline-start: 0;
}

/* 地図画像 */
.map_image {
	max-inline-size: 768px;
	margin-inline: auto;
}
:where(.map_image) img {
	display: block;
	object-fit: contain;
	inline-size: 100%;
	block-size: auto;
}

/* 広報誌 */
.magazine_index {
	list-style-type: disc;
}
.magazine_backnumber {
	list-style-type: none;
	margin-inline: 2.5rem;
	padding-inline: 0;
}
:where(.magazine_backnumber) > li {
	display: block;
}
.magazine_link {
	display: inline-block;
	max-block-size: 2em;
}
:where(.magazine_link) :is(.magazine_number, .issue_date, .pdf_icon) {
	display: inline-block;
}
:where(.magazine_link) .magazine_number {
	min-inline-size: 4em;
}
:where(.magazine_link) .issue_date {
	min-inline-size: 8em;
}
:where(.magazine_link) .pdf_icon {
	min-inline-size: 2em;
}