/* フォントのインポート */
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');

/* Noto Sans CJK JP フォント */
/*
@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 900;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.otf) format('opentype');
}
*/
/* 基本設定 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "BIZ UDPGothic", sans-serif; /* BIZ UD */
  font-weight: 400;
  font-style: normal;
}

.container {
  max-width: 850px; /* 最大幅を850pxに制限 */
  width: 100%; /* 画面幅に合わせる */
  margin: 0 auto; /* センター揃え */
  padding: 0 16px; /* デバイス幅が狭い場合に余白を確保 */
  box-sizing: border-box; /* パディングを幅に含める */
}

a {
  text-decoration: none;
}

a.ref {
  color: #333;
}

a.ref:hover{
  color: #4185D3; /* ホバー時の文字色を青に変更 */
  cursor: pointer; /* ポインターを表示 */
}

/* button のフォント定義 */
button {
  font-family: "BIZ UDPGothic", sans-serif; /* BIZ UD */
  font-weight: 700;
  font-style: normal;
}

#manual_layout {
  width: 100%;
}

/* ヘッダー */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 57px;
  background: #ffffff;
  z-index: 1000;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 57px;
  width:97%;
}

/* ヘッダ下線 */
.header-underline {
  height: 3px;
  background-color: #4185D3;
  width: 100%;
}

/* ロゴ＋企業名 */
.branding {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-img {
  height: 20px;
}
.company-name {
  font-size: 8pt;
  color: #454545;
}

/* 右側の検索＋PDF */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 検索フォーム */
.search-form {
  position: relative;
  width: 220px; /* 170→220 */
  height: 28px;
}
.search-form input {
  width: 100%;
  height: 100%;
  padding-left: 24px;
  border: 1px solid #ccc;
  border-radius: 14px;
  font-size: 8pt;
  font-family: "BIZ UDPGothic", sans-serif; /* BIZ UD */
}
.search-icon {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  font-size: 10pt;
  color: #555;
  pointer-events: none;
}

/* PDFボタン */
.pdf-button {
  width: 120px;
  height: 28px;
  background: #4185D3;
  color: white;
  border: 1pt solid black;
  border-radius: 4px;
  font-size: 8pt;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.pdf-button .icon {
  font-size: 10pt;
}
.pdf-button:hover {
  background: #9FF8F5;
  color: #4185D3;
}

/* メニューエリア */
.menu-area {
  margin-top: 57px; /* ヘッダーの高さ分 */
  width: 100%;
  min-width: 850px;
  height: 170px;
  background: #ffffff;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* ぼかし効果 */
}
.menu-content {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.menu-image img {
  width: 145px;
  object-fit: cover;
}

.menu-area .container {
  width: 100%;
  max-width: 100vw;
  padding: 0 16px;
  box-sizing: border-box;
}

/* メニューボタンのデザイン */
.menu-buttons {
  display: grid;
  grid-template-columns: repeat(4, 140px);
  grid-template-rows: repeat(2, 42px);
  row-gap: 18px;
  column-gap: 26px;
}

.menu-buttons button {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* アイコンを左寄せ */
  gap: 8px;
  padding: 0 12px;
  height: 42px;
  max-width: 148px;
  background: white;
  border: 2px solid #4185D3; /* 青色の枠線 */
  border-radius: 4px; /* 角丸を少しだけ弱く */
  font-size: 9pt;
  color: black; /* 文字色を黒 */
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
	
.menu-buttons button i {
  font-size: 18px;
  color: #4185D3; /* アイコンは青 */
}

.menu-buttons button.on{
  display: flex;
  align-items: center;
  justify-content: flex-start; /* アイコンを左寄せ */
  gap: 8px;
  padding: 0 12px;
  height: 42px;
  max-width: 148px;
  background: #4185D3;
  border: 2px solid #4185D3; /* 青色の枠線 */
  border-radius: 4px; /* 角丸を少しだけ弱く */
  font-size: 9pt;
  color: white; /* 文字色を黒 */
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.menu-buttons button.on i {
  font-size: 18px;
  color: white; /* アイコンは青 */
}

.menu-buttons button:hover {
  background-color: #4185D3;
  color: white;
}
.menu-buttons button:hover i {
  color: white; /* ホバー時アイコンの色は白 */
}


/* メインコンテンツ */
.main-content {
  margin-top: 32px;
  padding: 0px;
  background: #fff;
  min-height: 400px;
}

/* 重要なお知らせタイトル */
.important-notice-title {
  font-size: 14px; /* 文字サイズを小さく */
  font-weight: bold;
  color: #000;
  margin-bottom: 8px;
  margin-left: 10px; /* 左側に少し余白 */
}

/* 重要なお知らせ全体を囲む */
.important-notice-wrapper {
  width: 100%;
  background-color: #F0F0F0; /* 背景色 */
  padding: 10px;
  border-radius: 4px; /* 角を少し丸める */
  margin-top: 10px; /* タイトルと内容の間に余白 */
  padding-bottom: 0px; /* 下に変なスペースが入るのを防止 */
}

.important-notice {
  padding: 5px; /* 内容の余白を少し縮小 */
}

/* お知らせアイテム */
.notice-item {
  display: flex;
  align-items: center;
  margin-bottom: 6px; /* アイテム間隔を縮小 */
  padding: 5px 0; /* アイテムの上下余白を縮小 */
}

/* 日付エリア */
.notice-date {
  background-color: #4185D3; /* 青枠 */
  color: #fff; /* 白文字 */
  padding: 5px 30px; /* 左右に余白を追加 */
  border-radius: 10px; /* 丸みをつける */
  margin-right: 10px;
  font-size: 10px; /* 文字サイズを小さく */
}

/* お知らせタイトル */
.notice-title {
  font-size: 12px; /* 文字サイズを小さく */
  color: #000;
  font-weight: normal;
}

/* 罫線 */
hr.notice-divider {
  border: 0;
  border-top: 1px solid #B9B9B9; /* 罫線色 */
  margin: 6px 0; /* 罫線の余白を縮小 */
  background-color: unset;
}

/* 画像の横並び配置 */
.images-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 30px; /* 重要なお知らせとの間隔を調整 */
  width: 100%; /* 親コンテナの幅を100%に設定 */
}

.image-item-container {
  text-align: center; /* テキストを中央に配置 */
}


.top-image1 {
  height: auto;    /* 縦横比を維持 */
  object-fit: contain; /* 必要に応じて調整 */
  
}

.top-image2 {
  height: auto;    /* 縦横比を維持 */
  object-fit: contain; /* 必要に応じて調整 */
  margin-left: 30px;
}

.image-text {
  width: 100%; /* テキストを含むコンテナも40%に */
  font-size: 14px; /* テキストの文字サイズ */
  color: #000;
  margin-top: 60px; /* テキストと画像の間隔を調整 */
  text-align:left;
}

.breadcrumb {
  font-size: 10px; /* 小さめの文字サイズ */
  margin: 20px 0; /* 上下の余白 */
  color: #000;
}

.breadcrumb a {
  color: #000; /* 通常時は黒字 */
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: #4185D3; /* hover時に青字 */
}

.breadcrumb span {
  margin: 0 5px; /* > 記号の左右に少し余白 */
}

.breadcrumb .current {
  color: #000; /* 現在ページは黒字のまま */
}

/* パンくずリスト */
div#manual_header_breadcrumbs {
	width: 100%;
	display: inline-block;
	text-align: left;
	margin-bottom:10px;
}

	div#manual_header_breadcrumbs li {
		float: left;
		color: #000;
		font-size: 10px;
		list-style: none;
	}

		div#manual_header_breadcrumbs li a {
			text-decoration: none;
			color: #000;
			background: url(../img/content/icon_breadcrumbs.gif) right center no-repeat;
			padding-right:9px;
			margin-right:5px;
		}
		
		div#manual_header_breadcrumbs li a:hover {
			color: #4185D3; /* hover時に青字 */
		}

li.manual_breadcrumbs_pc {
	display:none;
}

li.manual_breadcrumbs_sp {
	display:block;
}

.section-heading {
  background-color: #4185D3;
  color: #fff;
  font-weight: bold;
  padding: 0px 4px 0px 16px; 
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  margin-bottom: 16px;
  /* height: 36px; */
  height: auto;
}

.section-heading .pdf-button {
  background-color: #fff;
  color: #4185D3;
  border: none;
  padding: 2px 6px; /* ← padding-rightを絞って詰める */
  font-size: 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 5px 3px 5px;
  cursor: pointer;
}

.section-heading .pdf-button:hover {
  background: #9FF8F5;
  color: #4185D3;
}

/*
.main-content.container > .manual_list_square {
    padding-left: 25px;
}
*/

/* リスト項目のリンクスタイル */
.list-link {
  display: block; /* リンクをブロック要素にする */
  text-decoration: none; /* 下線を削除 */
  color: #333; /* デフォルトの文字色 */
  padding: 0px 0px; /* リスト項目の内側余白 */
  transition: background-color 0.3s ease, color 0.3s ease; /* ホバー時のアニメーション効果 */
}

/* ホバー時のリンクスタイル */
.list-link:hover {
  color: #4185D3; /* ホバー時の文字色を青に変更 */
  cursor: pointer; /* ポインターを表示 */
}

.section-heading .heading-text {
  font-size: 20px;
  color: #fff;
  margin: 5px 0px 5px;
}

.section-heading .pdf-button i {
  font-size: 12px;
}

.lead-text p {
  color: #333333;          /* グレー */
  font-size: 16px;      
  margin: 0px 10px 3px;  /* 上に少し余白、下は次のコンテンツに備えて */
  font-weight: 300;     /* 少し軽めにして読みやすく */
  line-height: 2.1;     /* 行間もゆったり */
}

.lead-text subinfohead {
  display:table;
  color: #333333;          /* グレー */
  font-size: 16px;      
  margin: 3px 0 3px;  /* 上に少し余白、下は次のコンテンツに備えて */
  font-weight: 300;     /* 少し軽めにして読みやすく */
  line-height: 2.1;     /* 行間もゆったり */
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  max-width: 850px;
}

.toc-list li {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #555;
  border-bottom: 1px solid #4185D3;
  padding: 20px 8px;
  cursor: pointer;
  transition: color 0.2s;
}

.toc-list li a:hover {
  color: #4185D3; /* hoverで青文字に */
}

.toc-list li i {
  color: #4185D3;
  margin-right: 8px;
  font-size: 16px;
}

.toc-list li a {
  color: #555;
  font-size: 16px;
}



/* トップへ戻るアイコン */
.scroll-top {
  display: flex;
  justify-content: flex-end;
  margin: 16px 0;
  max-width: 850px;
}

.scroll-top i {
  font-size: 36px;
  color: #4185D3;
  cursor: pointer;
  transition: transform 0.3s;
}

.scroll-top i:hover {
  transform: scale(1.2);
}

/* font */
/*
h1, h2, h3, h4, h5, h6, p {
  font-family: 'BIZ UDPGothic', sans-serif;
  font-weight: 700;
  font-style: normal;
}
*/

/* 数字囲み */
.numbered-text {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.number-box {
  width: 30px;
  height: 30px;
  border: 2px solid #4185D3;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  background-color: #fff;
  color: #4185D3;
}

/* 数字囲み内の画像 */
.num_img {
  margin-left: 40px;
  margin-bottom:20px;
}

/* 通常テキスト */
.text {
  color: #333333;          /* グレー */
  font-size: 16px;      
  font-weight: 300;     /* 少し軽めにして読みやすく */
  line-height: 2.1;     /* 行間もゆったり */
}

/* 通常画像 */
img.small {
  width: 50%;
  height: auto;

}

.text img {
  vertical-align: middle;
}

/* 以下追加分 */
div.manual_step_case_wrapper {
	display:block;
	overflow:visible;
}

div.manual_step_lead {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
  color: #333333;
}



div.manual_step_num {
  flex-shrink: 0;
  padding-right: 10px;
  color: #333333;
  font-size: 16px;      
  vertical-align: middle;
  margin: 12px 0 0;  /* 上に少し余白、下は次のコンテンツに備えて */
  font-weight: 300;     /* 少し軽めにして読みやすく */
  line-height: 2.1;     /* 行間もゆったり */	
}

	div.manual_step_num img {
		vertical-align: middle;
		font-size: 18px;
	}

/*
div.manual_step_txt {
	display: inline-block;
	vertical-align: middle;
	color: #333333;          /* グレー */
	font-size: 16px;      
	font-weight: 300;     /* 少し軽めにして読みやすく */
	line-height: 1.6;     /* 行間もゆったり */
	vertical-align: middle;
}

div.manual_step_txt ul li {
	color: #333333;          /* グレー */
	font-size: 16px;      
	margin: 12px 0 0;  /* 上に少し余白、下は次のコンテンツに備えて */
	font-weight: 300;     /* 少し軽めにして読みやすく */
 	line-height: 1.6;     /* 行間もゆったり */	
}
*/
	
span.manual_step_num_icon {
	display:block;
	vertical-align: middle;
}

	span.manual_step_num_icon span {
		vertical-align: middle;
		display:block;
		color: #fff;
		background: #006699;
		text-align: center;
		font-size: 16px;
	}

div.manual_step_item {
	margin-top:20px;
}

	div.manual_step_item div.manual_sub_lead {
		margin:0 30px;
		vertical-align: middle;
	}

	div.manual_step_item:nth-of-type(n+2) {
		display:block;
	}

div.manual_step_note {
	margin:0 10px 0 10px;
	color: #333333;          /* グレー */
	font-size: 16px;      
	font-weight: 300;     /* 少し軽めにして読みやすく */
	line-height: 2.1;     /* 行間もゆったり */
}

	div.manual_step_note p {
		text-align:left;
		font-weight: 300;     /* 少し軽めにして読みやすく */
		line-height: 2.1;     /* 行間もゆったり */
		background-size: 16px;
		background-position:5px 2px;
	}


ul.manual_list_square {
	list-style: square;
	word-break: break-word;
	color: #333333;          /* グレー */
	font-size: 16px;      
	font-weight: 300;     /* 少し軽めにして読みやすく */
	line-height: 2.1;     /* 行間もゆったり */
}

ul.manual_list_square li {
	/* margin-top: 10px; */
	line-height: 2.1;     /* 行間もゆったり */
	margin-left: 20px;
}



div.manual_related {
	position: relative;
	word-wrap: break-word;
	margin-left:0px;
	margin-right:10px;
}

	div.manual_related h4 {
		margin-top:13px;
		font-size: 16px;
		font-weight: bold;
		line-height: 2.1;     /* 行間もゆったり */
	}

	div.manual_related p {
		font-size: 16px;      
		font-weight: 300;     /* 少し軽めにして読みやすく */
		line-height: 2.1;     /* 行間もゆったり */
	}
	
		div.manual_related p img {
		margin:0px 5px 3px 5px;
	}


img.manual_icon_img {	/* 文中アイコン */
	width:auto;
	height:20px;
	margin:0px 5px 3px;
	vertical-align:middle;
}


/* テーブル関連 */
.manual_table_normal {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin: 10px 0 20px;
	border-radius: 4px;
	overflow: hidden;
	color: #333; /* ← ここで全体の文字色を指定 */
}

/* ヘッダー行のスタイリング */
.manual_table_normal tr.manual_table_head {
	background-color: #4185D3; /* グレー背景 */
	font-weight: bold; /* 太文字 */
	font-size: 16px;
	font-weight: 300;     /* 少し軽めにして読みやすく */
	color: #ffffff;
	border-left: none;
	text-align:center;
}

.manual_table_normal tr.row td {
	text-align:left;
	font-size: 16px;
	font-weight: 300;     /* 少し軽めにして読みやすく */
	line-height: 2.1;     /* 行間もゆったり */
}

.manual_table_normal tr.row td img {
	text-align:left;
	font-size: 16px;
	font-weight: 300;     /* 少し軽めにして読みやすく */
	line-height: 2.1;     /* 行間もゆったり */
	max-width: 100%; /* セルから画像がはみ出さないようにする */
}

.manual_table_normal tr.manual_table_head th:first-child,
.manual_table_normal tr.row td:first-child {
	border-left: none;
}

.manual_table_normal tr.manual_table_head th:last-child,
.manual_table_normal tr.row td:last-child {
	border-right: none;
}

.manual_table_normal tr.manual_table_head th {
	font-weight: normal;
	padding: 10px;
	vertical-align: top;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.manual_table_normal tr.manual_table_head th img {
	padding: 10px;
	vertical-align: top;
	max-width: 100%; /* セルから画像がはみ出さないようにする */
}

.manual_table_normal tr.manual_table_head th img.manual_icon_img {
	padding: 0px;
	vertical-align: middle;
}

.manual_table_normal tr.row td {
	font-weight: normal;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.manual_table_normal tr.row td img {
	padding: 10px;
	vertical-align: top;
	max-width: 100%; /* セルから画像がはみ出さないようにする */
}

.manual_table_normal tr.row td img.manual_icon_img {
	padding: 0px;
	vertical-align: middle;
}

/* リンクの長いURLを改行可能にする */
.manual_table_normal a {
    word-break: break-all; /* 長い単語やURLを途中で改行 */
    white-space: normal; /* 必要なら改行を許可 */
}

/* 罫線なしテーブル */
.manual_table_screen {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin: 10px 0 20px;
	overflow: hidden;
	color: #333; /* ← ここで全体の文字色を指定 */
	border: none;
}

.manual_table_screen tr {
	text-align:left;
	font-size: 16px;
	font-weight: 300;     /* 少し軽めにして読みやすく */
	line-height: 2.1;     /* 行間もゆったり */
}

.manual_table_screen tr.row td,
.manual_table_screen tr.manual_table_head th {
	font-weight: normal;
/*	padding: 10px; */
	vertical-align: top;
	background-color: #fff;
}

.manual_table_screen tr.row td p {
	font-weight: normal;
}

.manual_table_screen tr.row td img,
.manual_table_screen tr.manual_table_head th img {
	padding: 10px;
	vertical-align: top;
	overflow: hidden; /* セルから画像がはみ出さないようにする */
}

.manual_table_screen tr.row td img,
.manual_table_screen tr.manual_table_head th img.manual_icon_img {
	padding: 0px;
	vertical-align: middle;
	max-width: 100%; /* セルから画像がはみ出さないようにする */
}

.manual_table_screen tr.row td p img,
.manual_table_screen tr.manual_table_head th p img {
	padding: 0px;
	vertical-align: top;
	
}

/* リンクの長いURLを改行可能にする */
.manual_table_screen a {
    word-break: break-all; /* 長い単語やURLを途中で改行 */
    white-space: normal; /* 必要なら改行を許可 */
}


/* ヘッダーなしテーブル */
.manual_table_headless {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin: 10px 0 20px;
	border-radius: 4px;
	overflow: hidden;
	color: #333333; /* ← ここで全体の文字色を指定 */
}

.manual_table_headless tr {
	text-align:left;
	font-size: 16px;
	font-weight: 300;     /* 少し軽めにして読みやすく */
	line-height: 2.1;     /* 行間もゆったり */
}

.manual_table_headless tr.manual_table_head th:first-child,
.manual_table_headless tr.row td:first-child {
	border-left: none;
}

.manual_table_headless tr.row td:last-child {
	border-right: none;
}

.manual_table_headless tr.manual_table_head th {
	font-weight: normal;
	padding: 10px;
	vertical-align: top;
	background-color: #fff;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.manual_table_headless tr.manual_table_head th img {
	padding: 10px;
	vertical-align: top;
}

.manual_table_headless tr.manual_table_head th img.manual_icon_img {
	padding: 0px;
	vertical-align: middle;
}

.manual_table_headless tr.row td {
	font-weight: normal;
	padding: 10px;
	vertical-align: top;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.manual_table_headless tr.row td img {
	padding: 10px;
	vertical-align: top;
	max-width:100%;
}

.manual_table_headless tr.row td img.manual_icon_img {
	padding: 0px;
	vertical-align: middle;
}

/* リンクの長いURLを改行可能にする */
.manual_table_headless a {
    word-break: break-all; /* 長い単語やURLを途中で改行 */
    white-space: normal; /* 必要なら改行を許可 */
}

/* ヘッダー左テーブル */
.manual_table_vheader {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin: 10px 0 20px;
	border-radius: 4px;
	overflow: hidden;
	color: #333; /* ← ここで全体の文字色を指定 */
}

/* ヘッダー行(1列目)のスタイリング */
.manual_table_vheader tr.manual_table_head th:first-child,
.manual_table_vheader tr.row td:first-child {
	background-color: #4185D3; /* グレー背景 */
	font-weight: bold; /* 太文字 */
	color: #ffffff;
	border-left: none;
}

.manual_table_vheader tr {
	text-align:left;
	font-size: 16px;
	font-weight: 300;     /* 少し軽めにして読みやすく */
	line-height: 1.7;     /* 行間もゆったり */
}

.manual_table_headless tr.manual_table_head th:first-child,
.manual_table_headless tr.row td:first-child {
	border-left: none;
}

.manual_table_headless tr.manual_table_head th:last-child,
.manual_table_vheader tr.row td:last-child {
	border-right: none;
}

.manual_table_vheader tr.manual_table_head th {
	font-weight: normal;
	padding: 10px;
	vertical-align: top;
	background-color: #fff;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.manual_table_vheader tr.manual_table_head th img {
	padding: 10px;
	vertical-align: top;
	max-width: 100%; /* セルから画像がはみ出さないようにする */
}

.manual_table_vheader tr.manual_table_head th img.manual_icon_img {
	padding: 0px;
	vertical-align: middle;
}

.manual_table_vheader tr.row td {
	font-weight: normal;
	padding: 10px;
	vertical-align: top;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.manual_table_vheader tr.row td img {
	padding: 10px;
	vertical-align: top;
	max-width: 100%; /* セルから画像がはみ出さないようにする */
}

.manual_table_vheader tr.row td img.manual_icon_img {
	padding: 0px;
	vertical-align: middle;
}

/* リンクの長いURLを改行可能にする */
.manual_table_vheader a {
    word-break: break-all; /* 長い単語やURLを途中で改行 */
    white-space: normal; /* 必要なら改行を許可 */
}


div.manual_footnote {
	margin:20px 0px;
}

div.manual_footnote p {
	display:table;
	text-align:left;
	color: #333333;
	font-size: 16px;      
	font-weight: 300;     /* 少し軽めにして読みやすく */
	line-height: 2.1;     /* 行間もゆったり */

}

	div.manual_footnote p > span {
		display:table-cell;
		}

	div.manual_footnote p > span:first-child {
		padding-right:10px;
	}

	div.manual_step_img {
		float:left;
		width:100%;
		margin:20px auto;
		text-align: left;
	}

	img.manual_img_vertical {
		max-width: 100%;
		height: auto;    /* 高さを自動調整 (アスペクト比を維持) */
		margin: 0px 20px 3px;
		vertical-align: middle;
	}

	img.manual_img_horizontal {
		max-width: 100%;
		height: auto;    /* 高さを自動調整 (アスペクト比を維持) */
		margin: 0px 20px 3px;
		vertical-align: left;
	}

/* 太字 */
span.manual_soft_button {
	font-weight: bold;
}

div.manual_captionlist {
    width: 100%;
    padding: 5px;
    margin: 5px 0;
    border: 1px solid #C7C7C7;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
}

div.manual_captionlist ul li {
    margin: 4px 0; /* 行全体のマージンを増やす */
    font-size: 14px;
    list-style: none;
    padding-left: 10px;
    align-items: center; /* 縦中央揃え */
    line-height: 22px; /* 行間を広げる */
}

div.manual_captionlist ul li img {
    margin-right: 5px; /* 画像とテキストの間にスペース */
    flex-shrink: 0; /* 画像が縮まないように */
    width: 20px; /* 必要に応じてサイズ調整 */
    height: 20px; /* 必要に応じてサイズ調整 */
    vertical-align: middle; /* テキストの行に合わせて中央揃え */
}


/* 追加分ここまで */

/* 罫線 */
hr {
  border: 1px solid #4185D3;
  margin-top: 50px;
  margin-bottom: 50px;
}

/* 小見出し */
.subheading {
  font-size: 20px;
  font-weight: bold;
  color: #4185D3;
  border-left:5px solid #4185D3; /*線の設定*/
  padding:2px 8px; /*余白の設定*/
  margin: 36px 0 12px 0; /* 上下の余白 */
}


/* BOX系のスタイル */
/* 共通スタイル */
.box-memo, .box-warning, .box-simple {
  border-radius: 8px;
  overflow: hidden;
  margin: 30px 0;
  font-size: 14px;
  color: #333;
}

/* MEMOボックス用 */
.box-memo {
  border: 2px solid #4185D3; /* 青枠 */
}

.memo-header {
  background-color: #DFEDFD;
  color: #4185D3;
  padding: 6px 12px;
  font-weight: bold;
  font-size:18px;
}

/* 注意ボックス用 */
.box-warning {
  border: 2px solid #9E9E9E; /* グレー枠 */
}

.warning-header {
  background-color: #FAF4C2;
  color: black;
  padding: 6px 12px;
  font-weight: bold;
  font-size:18px;
}

/* 中身共通 */

.box-content {
  padding: 10px 12px 12px 12px;
}

.box-content li {
  margin-left: 20px;
  list-style-type: disc;
  line-height: 2.1;     /* 行間もゆったり */
}

.box-content h4 {
  margin-left: 12px;
  list-style-type: disc;
}

/* シンプル黒枠ボックス */
.box-simple {
  padding-top: 5px;
  border: 1px solid black;
  padding: 0px 12px 12px 12px;
}

.box-simple .title {
  padding-top: 12px;
  font-size:18px;
  font-weight:bold;
}

.box-simple p, .box-content p {
  padding: 0px 12px 0px 12px;
  line-height: 2.1;
}

.box-simple p img, .box-content p img {
  vertical-align: middle;
  margin-left:5px;
  margin-right:5px;
}

/* Table */
.table-wrapper {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 42px 0;
  border-radius: 4px;
  overflow: hidden;
  color: #333; /* ← ここで全体の文字色を指定 */
}

.table-wrapper th {
  background-color: #4185D3;
  color: white;
  font-weight: bold;
  padding: 6px 10px;
  font-size: 14px;
  text-align: center;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.table-wrapper td {
  padding: 10px;
  vertical-align: top;
  background-color: #fff;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.table-wrapper td:first-child {
  border-left: none;
}

.table-wrapper tr td:last-child {
  border-right: none;
}

.table-wrapper img {
  max-width: 40px;
  max-height: 40px;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 4px;
}

/*最下のNAVI */
.nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 12px 16px;
  background-color: #fff;
  font-size: 14px;
}

.nav-links a {
  text-decoration: none;
  color: #4185D3;
  font-weight: bold;
}

.nav-links i {
  font-size:28pt;
  vertical-align: middle;
}

.nav-links a:hover {
  text-decoration: underline;
}

.next-page-link {
  text-decoration: none;
  color: #4185D3;
  font-weight: bold;
  font-size:11pt;
  vertical-align: middle;
  text-align: right;
}

.next-page-link:hover {
  text-decoration: underline;
}

.next-page-link i {
  vertical-align: middle;
  margin-left: 6px;
}

.prev-page-link {
  text-decoration: none;
  color: #4185D3;
  font-weight: bold;
  font-size: 11pt;
  vertical-align: middle;
  text-align: left;
}

.prev-page-link i {
  margin-right: 6px;
  vertical-align: middle;
}

.prev-page-link:hover {
  text-decoration: underline;
}


/* キーワードサジェスト */
.suggestion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%; /* 検索フォームの下に表示 */
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none; /* 初期状態は非表示 */
}

.suggestion-list li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  color: #333;
}

.suggestion-list li:hover {
  background: #4185D3;
  color: #fff;
}

/* 検索結果全体のスタイル */

.search-results {
  width: 100%; /* 項目幅を広げる */
  margin: 0 auto;
  font-family: 'BIZ UDPGothic', sans-serif; /* メインフォント */
  color: #333;
}

.search-results h1 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #4185D3; /* タイトルの青色 */
  text-align: center;
}

/* 検索タイトルのスタイル */
.search-title {
  font-size: 14px;
  color: #333; /* デフォルトの文字色 */
  margin-bottom: 20px; /* 検索結果との余白 */
  margin-top:15px;
}

.search-title a {
  text-decoration: none; /* 下線を削除 */
  color: #333; /* デフォルトのリンク色 */
  transition: color 0.3s ease; /* ホバー時の色変化をスムーズにする */
}

.search-title a:hover {
  color: #4185D3; /* ホバー時に青色に変更 */
}

/* 検索結果リストのスタイル */
.result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* リスト項目のスタイル */
.result-item {
  padding: 16px 24px; /* 上下の余白を増やして高さを広げる */
  font-family: 'BIZ UDPGothic', sans-serif; /* メインフォント */
  font-size: 16px;
  position: relative;
  color: #333; /* 文字色を#333に変更 */
}

/* 青色の〇記号を表示 */
.result-item .circle {
  color: #4185D3; /* 青色に設定 */
  font-weight: bold;
  margin-right: 12px; /* 〇とテキストの間に余白を追加 */
  display: inline-block; /* インラインブロックで配置 */
}

/* 最上位の項目の上に太い青線を表示 */
.result-item:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; /* 太い青線（2px） */
  background-color: #4185D3;
}

/* 通常の項目区切り線（1px） */
.result-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* 通常の区切り線（1px） */
  background-color: #4185D3;
}

/* 最下位の項目の下に太い青線を表示 */
.result-item:last-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* 太い青線（2px） */
  background-color: #4185D3;
}

/* ホバー時の背景色変更 */
.result-item:hover {
  background-color: #DFEDFD; /* 青系の薄い背景色 */
  cursor: pointer; /* ポインターを表示 */
}

.result-item a {
  text-decoration: none;
  color: #333;
}

/* ハンバーガーメニューのボタン */
.hamburger-menu {
  display: none;
  font-size: 24px;
  cursor: pointer;
  position: fixed;
  top: 16px;
  left: 16px; /* 左端に配置 */
  z-index: 1001;
  transition: opacity 0.3s ease; /* アニメーション効果 */
}

/* メニューが開いているときにハンバーガーメニューを非表示にする */
.hamburger-menu.hidden {
  opacity: 0; /* 透明にする */
  pointer-events: none; /* クリックできないようにする */
}

/* モバイルメニューのスタイル */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0; /* 左端に固定 */
  width: 250px; /* メニューの幅 */
  height: 100%; /* 高さを画面全体に */
  background-color: rgba(255, 255, 255, 0.95); /* 少し透明感のある背景 */
  z-index: 1000;
  transform: translateX(-100%); /* 左端の外側に配置 */
  transition: transform 0.3s ease-in-out; /* アニメーションを適用 */
  padding-top: 80px; /* 上部に十分なスペースを確保 */
  padding-left: 16px; /* 左に余白を追加 */
  padding-right: 16px; /* 右にも余白を追加 */
}

/* メニューが開いている状態 */
.mobile-menu.open {
  transform: translateX(0); /* 左端（画面内）にスライドイン */
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3); /* 影を追加 */
}

/* ×ボタンのスタイル */
.close-menu {
  position: absolute;
  top: 16px;
  right: 16px; /* 右端に配置 */
  font-size: 24px;
  cursor: pointer;
  color: #333; /* ボタンの色 */
  z-index: 1001;
}

.close-menu:hover {
  color: #000; /* ホバー時に色を濃くする */
}

/* メニューのヘッダー部分 */
.menu-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px; /* メニューリストとの間に余白 */
}

/* 製品画像 */
.product-image {
  width: 60px; /* 画像のサイズ */
  height: auto;
  margin-right: 8px; /* テキストとの間に余白 */
}

/* 製品型番 */
.product-name {
  font-size: 12px;
  color: #333; /* テキストの色 */
}

.product-name p img{
  max-width: 150px;
  margin-top:10px;
}

/* メニューリスト */
.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* メニュー項目 */
.menu-list li {
  border-bottom: 1px solid #4185D3; /* 青色の線を追加 */
  padding: 10px 0; /* 各項目の上下に余白 */
}

.menu-list li a {
  text-decoration: none; /* 下線を削除 */
  color: #333; /* テキストの色 */
  font-size: 14px;
}

.menu-list li a:hover {
  color: #000; /* ホバー時に色を濃くする */
}

/* レスポンシブデザイン時に虫眼鏡アイコンだけ表示 */
.responsive-search-icon {
  display: none; /* デフォルトでは非表示 */
  font-size: 20px;
  cursor: pointer;
}

/* 初期状態（隠れた状態） */
.responsive-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0; /* 初期状態は高さ0 */
  background: rgba(255, 255, 255, 0.95);
  z-index: 1009;
  overflow: hidden; /* 高さを超えたコンテンツを非表示 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: height 0.3s ease; /* 高さの変化をアニメーションで */
}

/* 表示状態（スライドダウン） */
.responsive-search-overlay.open {
  height: 200px; /* 高さを100%（フルスクリーン）に設定 */
  padding: 20px; /* コンテンツの余白を表示 */
  overflow-y: auto; /* 縦方向にスクロール可能にする */
}


/* 検索フォームのスタイル */
.responsive-search-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.responsive-search-form input {
  width: 80%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 16px;
  font-size: 14px;
}

.responsive-search-form button {
  height: 40px;
  padding: 0 16px;
  border: none;
  background: #4185D3;
  color: white;
  border-radius: 8px;
  cursor: pointer;
}


/* スマートフォン（最大幅480px） */
@media (max-width: 480px) {

	.container {
		width: 100%;
		margin: 0 auto;
	}

	.menu-area {
		display:none; /* メニューエリア非表示 */
	}


	.header-right {
		display:none;
	}

	.section-heading {
		margin-top:50px;
	}
	.section-heading .pdf-button {
		display:block;
		/*  width: 40%; */
	}

	.header-content {
		flex-direction: column;
		align-items: flex-start;
	}

	.menu-buttons {
		grid-template-columns: 1fr; /* 1列に変更 */
	}

	/*
	.pdf-button {
		width: 100%;
	}
	*/

	.important-notice-title {
		font-size: 10px;
	}

	.section-heading {
		font-size: 18px;
	}

	.breadcrumb {
		font-size: 8px;
	}

	.hamburger-menu {
		display: block; /* スマートフォンサイズでハンバーガー表示 */
	}

	.branding {
		margin-top:15px;
	margin-left:40px;
	}

	.images-wrapper {
		display: block;
		width: 100%;
		text-align: center;
	}

	.images-wrapper img {
		max-width:90%;
		margin-left:auto;
		margin-right: auto;
	}

	.images-wrapper .image-item-container {
		margin-left:auto;
		margin-right:auto;
	}

	.images-wrapper .image-item-container img {
		max-width:90%;
		margin-left:auto;
		margin-right: auto;
	}

	.important-notice-title {
		margin-top:70px;
	}

	.container {
		width:96%;
	}

	.num_img {
		margin-left: 0px;
		margin-bottom: 20px;
		max-width: 100%;
	}

	.search-form {

	}

	.responsive-search-icon {
		display: block; /* 虫眼鏡アイコンを表示 */
	}

	.image-text {
		margin-top: 20px;
		margin-bottom: 20px;
		text-align: left;
	}

	
	.responsive-search-form {
		position: relative; /* サジェストリストを正しく配置するためにrelative指定 */
		width: 100%; /* 検索フォームを画面幅にフィット */
	}

	.responsive-search-form input {
		width: 100%; /* 入力フィールドを画面幅にフィット */
		height: 40px;
		padding: 0 12px;
		border: 1px solid #ccc;
		border-radius: 16px;
		font-size: 14px;
	}

	.responsive-search-form button {
		height: 40px;
		padding: 0 16px;
		border: none;
		background: #4185D3;
		color: white;
		border-radius: 8px;
		cursor: pointer;
	}
	
	/* サジェストリスト */
	.responsive-suggestion-list {
		position: absolute; /* 検索フォームに相対的に配置 */
		top: calc(100% + 8px); /* フォームの直下に表示 */
		left: 0;
		width: 100%; /* 検索フォームと同じ幅 */
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		z-index: 1010; /* フォームの上に表示 */
		max-height: 300px; /* 最大高さを設定 */
		overflow-y: auto; /* サジェストが多い場合にスクロール可能に */
		display:none;
	}

	/* サジェストリストの項目 */
	.responsive-suggestion-list li {
		padding: 12px 16px; /* タップしやすい余白 */
		font-size: 14px; /* 読みやすいフォントサイズ */
		color: #333;
	}

	.responsive-suggestion-list li:hover {
		background: #4185D3; /* ホバー時の背景色 */
		color: #fff; /* ホバー時の文字色 */
	}

	/* サーチページのみ　スマートフォン（最大幅480px） */
	body.search_page .search-form {
    	display: block;
  	}
  		
  	img.manual_img_vertical {
		max-width: 80%;
		height: auto;    /* 高さを自動調整 (アスペクト比を維持) */
		margin: 0px 20px 3px;
		vertical-align: middle;
	}

	img.manual_img_horizontal {
		max-width: 80%;
		height: auto;    /* 高さを自動調整 (アスペクト比を維持) */
		margin: 0px 20px 3px;
		vertical-align: left;
	}
}

/* サーチページのみ　スマートフォン（最大幅480px） */
/*
@media (max-width: 480px) {
  body.search_page .search-form {
    display: block;
  }
}
*/

/* スマホ横向きの場合にTOPページのメニューボタンを調整 */
@media (orientation: landscape) and (max-width: 1000px) {
  body {
    overflow-x: hidden; /* 横スクロールを完全に防ぐ */
  }

  .menu-area {
    margin-top: 57px; /* ヘッダーの高さ分 */
    width: 100vw; /* ビューポート幅に制限 */
    min-width: unset; /* min-width を無効化 */
    overflow: hidden; /* 横スクロールを防ぐ */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* ぼかし効果 */
  }

  .menu-content {
    display: flex;
    flex-wrap: wrap; /* 子要素を折り返し可能にする */
    align-items: center; /* アイテムを中央揃え */
    gap: 16px; /* 要素間のスペースを調整 */
    width: 100%; /* コンテナ幅を画面幅に収める */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
    justify-content: space-between; /* 要素を均等配置 */
  }

  .menu-image {
    flex-shrink: 0; /* 画像が縮小されないようにする */
    width: 120px; /* 横幅を固定 */
    text-align: center; /* 画像を中央に配置 */
  }

  .menu-image img {
    width: 120px; /* 画像の幅を親要素にフィット */
    height: auto;
    object-fit: contain;
  }

  .menu-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* 横幅に応じて自動調整 */
    gap: 8px; /* ボタン間の余白 */
    flex-grow: 1; /* ボタンエリアが残りのスペースを埋める */
    width: calc(100% - 140px); /* 画像と合わせて画面幅に収める */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
  }

  .menu-buttons button {
    width: 100%; /* ボタンを親幅にフィット */
    text-align: left; /* テキストを左揃えに */
    white-space: nowrap; /* テキストが折り返されないようにする */
    overflow: hidden; /* はみ出たテキストを隠す */
    text-overflow: ellipsis; /* はみ出たテキストに「...」を表示 */
  }

  .main-content container {
    width: 100%;
  
  }
  
  .images-wrapper .image-item-container {
		margin-left:auto;
		margin-right:auto;
	}

	.images-wrapper .image-item-container img {
		margin-left:auto;
		margin-right: auto;
		max-width:90%;
	}
	
}


}