/* googleフォント読み込み */
@import url("https://fonts.googleapis.com/css?family=Sarpanch:500");
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&family=Orbitron:wght@400..900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
.material-symbols-outlined {font-variation-settings:'FILL' 1,'wght' 350,'GRAD' 0,'opsz' 24; font-size: 18px; margin:0 0 0 2px ;display: inline-flex; vertical-align: middle; position: relative; top: -1px;}


/* 基本設定 */
html {touch-action: manipulation;}
body {font-family: 'hiragino kaku gothic pron', 'ヒラギノ角ゴ pron w3', meiryo, メイリオ, sans-serif; width: 1000px; margin: 0 auto;}
	@media (max-width: 500px) {body {width: 500px;}}
	@media screen and (max-width: 769px){body {min-width: initial;}}
p {margin: 0;}
figure {margin: 0;}

/* 画像 */
img {display: block; vertical-align: bottom;}
	.relative {position:relative;} /* relativeクラス定義 */
	.absolute {position:absolute;} /* absoluteクラス定義 */
	.img_no {position: absolute; margin: 0px; color: #fff; background: #000; width: 40px; height: 30px; line-height: 30px; text-align: center; font-size: 120%; font-family: 'Sarpanch', sans-serif; } /* 画像Noキャプション */
	.popup-thumbnail {width: 100%; cursor: pointer; transition: transform 0.3s ease;} /* サムネイル画像の基本スタイル */
	.popup-thumbnail:hover {transform: scale(1.1);}
	.popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 1000;} /* ポップアップの背景 */
	.popup-content {max-width: 100%; max-height: 100%; border: 2px solid white; box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);}	/* ポップアップ画像のスタイル */
	.close-popup { position: absolute; top: 20px; right: 20px; font-size: 30px; color: white; cursor: pointer; z-index: 1100;}	/* 閉じるボタン */


/* 言語切り替えボタン */
.language-switcher {position: fixed; top: 15px; right: 15px; z-index: 1000; font-size: 0.9em;}
.language-switcher a {
  color: #fff;
  background: linear-gradient(135deg, rgba(0, 122, 204, 0.7), rgba(0, 95, 163, 0.7));
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 600px) {.language-switcher {right: 15px; font-size: 0.85em;}}
@media screen and (min-width: 1000px) {.language-switcher {right: calc((100% - 1000px) / 2 + 15px);}}


/* テーブル */
table {min-width: 100%; border-collapse: collapse; margin: 0; font-size: 0.8rem; border-radius:10px;}
	th, td {font-weight: normal; 
		-webkit-text-size-adjust: 100%;
		-webkit-font-smoothing: antialiased;
		text-rendering: geometricPrecision;
		}
	th {color: #fff; padding: 5px 0;}
	td {}
	td span {font-size: 0.8rem; font-weight: bold; margin-left: 4px;}
	table caption {font-size: 130%; font-weight:bold;}
	.table-notes {font-size: 0.8rem; text-align: left; line-height: 1.5rem; white-space: nowrap;}

	
	th.input_before_t		{background-color: #00008b; font-weight: bold; text-align: center; color: #fff; border-radius: 10px 10px 0 0;} /* 入力タイトル（現在） */
	th.input_after_t		{background-color: #c62828; font-weight: bold; text-align: center; color: #fff; border-radius: 10px 10px 0 0;} /* 入力タイトル（交換後） */
	td.input_item			{background-color: #d3d3d3; font-weight: bold;} /* 入力項目 */
	td.input_before_b		{background-color: #add8e6;} /* 入力項目（現在） */
	td.input_before_b span	{font-size: 0.6rem; font-weight: bold;}
	td.input_after_b		{background-color: #ffc0cb;} /* 入力項目（交換後） */
	td.input_after_b span	{font-size: 0.6rem; font-weight: bold;}
	.input_fender_t			{background-color: #008000; font-weight: bold; text-align: center; color: #fff; padding: 0 10px 0 10px; font-size: 0.8rem; padding: 5px 0;} /* 入力項目（フェンダー） */
	td.input_fender_b		{background-color: #ccffcc; padding-left: 10px;} /*出力項目（フェンダー） */
	th.input_chenge_t		{background-color: #999999;} / *矢印（タイトル部） */
	td.input_chenge_b		{background-color: #d3d3d3;} /* 矢印 */
	th.output_t				{background-color: #330066; font-weight: bold; color: #fff; text-align: center; border-radius: 10px 10px 0 0;} /* 出力タイトル（交換後）*/
	td.output_item			{background-color: #5a4498; font-weight: bold; color: #fff; text-align: center; border-top: 1px solid #fff; padding: 0 10px;} /* 出力項目タイトル */
	td.output_result		{background-color: #d0b0ff; border-top: 1px solid #fff; padding: 5px 10px;} /* 出力項目 */
	td.output_before_b		{background-color: #add8e6; border-top: 1px solid #fff;} /* 出力項目（現在） */
	td.output_after_b		{background-color: #ffc0cb; border-top: 1px solid #fff;} /* 出力項目（交換後） */

	@media (max-width: 500px) {
		th.output_t			{color: #000; font-size: 1.2rem; border-bottom: 1px solid #c0c0c0;}
		td.output_item		{color: #000;border-top: 1px solid #c0c0c0;}
		td.output_result	{border-top: 1px solid #c0c0c0;}
		td.output_before_b	{border-top: 1px solid #c0c0c0;}
		td.output_after_b	{border-top: 1px solid #c0c0c0;}
		td.input_chenge_b	{border-top: 1px solid #c0c0c0;}
	}

/* 収納展開領域 */
details summary {cursor: pointer; list-style: none; position: relative;}
details summary::before {content: "▶"; font-size: 1.4em; color: orange; transition: transform 0.2s ease; display: inline-block; vertical-align: middle; margin-right: 6px; line-height: 1;}
details[open] summary::before {content: "▼";}
details[open] summary.input_fender_t {border-radius: 10px 10px 0 0;}
details:not([open]) summary.input_fender_t {border-radius: 10px;}


/* 三角形描画 */
.triangle-down {clear:both; width: 0;  height: 0px; border-top: 20px solid orange; border-right: 20px solid transparent; border-left: 20px solid transparent;}
.triangle-right {clear:both; width: 0;  height: 0px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 10px solid orange;}

/* スクロール可能な場合に矢印を表示 */
.scroll-container {position: relative; overflow-x: auto; width: 100%;
-webkit-overflow-scrolling: touch;
}
.scroll-container.pagination-detected {
  background-image: linear-gradient(to right, #000 1px, transparent 1px);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 1px 100%;
}
.scroll-container table {white-space: nowrap;}
.scroll-container table td,
.scroll-container table th {white-space: nowrap;}
.scroll-container p.indent-3 {padding-left: 1.5em; text-indent: -1.5em; font-size: 0.8rem; white-space: nowrap;} /* インデント（1.5em） */
.scroll-container p.indent-4 {padding-left: 2em; text-indent: -2em; font-size: 0.8rem; white-space: nowrap;} /* インデント（2em） */
.scroll-arrow {position: fixed; transform: translateY(-50%); font-size: 18px; color: #666; cursor: pointer; background-color: rgba(255, 255, 255, 0.8); padding: 6px 10px 4px; border-radius: 50%; z-index: 100; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}
.scroll-container p.table-notes,
.scroll-container p.indent-3,
.scroll-container p.indent-4 {white-space: normal;
font-size: 0.8rem;
font-weight: normal;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}


/* ヘッダー */
header {display: flex; flex-wrap: nowrap; max-width: 100%; height: auto; background-color: #e9e9e9; border-left: 1px solid #666; border-bottom: 1px solid #666; box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2); overflow: hidden;}
	header .model {padding: 13px 20px 13px 19px; width: 150px; height: 24px; background-color: #fff; border-top: 10px solid #c0c0c0; flex: 0 0 auto;}
	header .title {padding-left: 30px; width: auto; height: 50px; background-color: #e9e9e9; line-height: 50px; font-size: 120%; border-top: 10px solid #999999; flex: 1;}
	header .logo {width: 125px; height: 19px; background-color: #e9e9e9; border-top: 10px solid #999999; padding: 20px 20px 11px 0; flex: 0 0 auto;}
/* 画面幅が500px以下の場合 */
@media (max-width: 500px) {
	header .logo {display: none;}
 	header .model {display: none;}
	header .title {display: none;}
	.sp-hide {display: none;}
}


/* 前後ページリンク */
pagination {
    position: relative; width: 100%; border-left: 1px solid #666; display: flex; gap: 20px; font-size: 0.8rem; font-family: 'Sarpanch', sans-serif; margin: 0; padding: 20px 50px 10px;
    scroll-behavior: smooth;
    scrollbar-width: thin; /* Firefox用: スクロールバーを細くする */
    scrollbar-color: #888 #f1f1f1; /* Firefox用: サムとトラックの色 */
}
	pagination div {position: relative; min-width: 180px; height: 22px; display: flex; align-items: flex-end; box-sizing: border-box; border-bottom: 4px solid #666;} /* グレーライン（全div） */
	pagination .current {border-bottom: 4px solid #ff8000; padding-bottom: 5px;} /* currentだけオレンジに切り替え */
	pagination a.contents {position: relative; display: inline-block; width: 100%; color: #000; text-decoration: none; font-family: 'Sarpanch', sans-serif; font-size: 0.8rem; padding-bottom: 5px; z-index: 1;} /*  aタグ */
	pagination a.contents::after {content: ''; position: absolute; left: 0; bottom: -4px; height: 4px; width: 0; background-color: #ff8000; transition: width 0.3s ease; z-index: 2;} /* hoverでオレンジラインを上書き */
	pagination a:hover.contents::after {width: 100%;}
	pagination a:hover.contents {color: #ff8000;}
	pagination .current a.contents {color: #ff8000;} /* currentのとき、色だけオレンジ */

/* 画面幅が500px以下の場合 */
@media (max-width: 500px) {
	pagination {display: none;}
	}

/* main */
main {display: flex; flex-wrap: wrap; max-width: 100%; height: auto; background: #fff; border-left: 1px solid #666; row-gap: 0px; column-gap: 0px;}
	@media (max-width: 500px) {main {row-gap: 10px;}}
	@media (min-width: 501px) {main {min-width: 860px;}}
	main .h1 {width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 0;} /* 記事タイトル */
		main .h1.no {margin-left: -40px; width: 40px; height: 35px; font-family: 'Sarpanch', sans-serif; background-color: #c0c0c0; font-size: 110%; line-height: 40px; border-bottom: 1px solid #000000; display: flex; align-items: center; justify-content: center;} /* 記事タイトル（No） */
		main .h1 .title {width: 100%; height: 35px; background-color: #000; color: #fff; font-size: 100%; line-height: 38px; border-bottom: 1px solid #000000; padding-left: 15px; text-align: left;  margin-left: 0;} /* 記事タイトル（テキスト） */
	@media (max-width: 440px) {main .h1.no {margin-left: -10px;}}

	main .block_info {width: 499px; margin: 0; height: auto;} /* 情報ブロック */
	main .block_drawing {width: 500px; height: auto;} /* 描画ブロック */
		.block_text {width: 439px; height: auto; margin: 10px; padding: 10px 20px; background-color :#d3d3d3; border-radius: 5px; font-size: 0.8rem;} /* 説明文ブロック */
		.block_text_2 {width: 439px; height: auto; margin: 10px; padding: 10px 20px; background-color :#d3d3d3; border-radius: 5px; font-size: 0.8rem;} /* 説明文ブロック */
		.block_button {width: 479px; height: auto; margin: 10px; text-align: center;} /* ボタンブロック */
		.block_input {width: 479px; height: auto; margin: 10px; border-radius: 10px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);} /* 入力ブロック */
		.block_output {width: 479px; height: auto; margin: 10px; border-radius: 10px;} /* 出力ブロック */
		.block_output .box {box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);} /* 出力ブロック */
		.block_lang {width: 460px; height: 30px;} /* 言語選択ブロック */
		.block_ad_frame {display: flex;} /* 広告ブロック（2ブロック収納） */
		.block_ad_top {width: 480px; height: 100px; margin: 10px 9px 10px 10px;} /* 広告ブロック（上） */
		.block_ad_center {width: 480px; height: auto; margin: 10px 9px 10px 10px;} /* 広告ブロック（中） */
		.block_ad_botttom {width: 480px; height: auto; margin: 10px 9px 10px 10px;} /* 広告ブロック（下） */
		.block_ad_botttom_2 {width: 480px; height: auto; margin: 10px 9px 10px 10px;} /* 広告ブロック（下） */

	/* PCで block_drawingを右側に表示 */
	@media (min-width: 501px) {
		main {position: relative; display: block;}
		form {width: 499px; display: inline-block; vertical-align: top;}
		.block_drawing {position: absolute; top: 0; left: 500px; width: 500px;}
		}
	@media (max-width: 500px) {
		.block_drawing {position: relative; height: 900px;}
		.block_output {position: absolute; bottom: 0; left: 0; width: 100%; z-index: 100; background: rgba(255, 255, 255, 0.9); padding: 0px; position: fixed; top: auto; bottom: 0; left: 0;}
		.block_text {display: none;}
		.block_ad_botttom_2 {display: none;}
		}
	@media (min-width: 501px) {
		.block_ad_top {display: none;}
		.block_ad_center {display: none;}
		}
	/* スマホでblock_outputを重ねて透過表示 */
	@media (max-width: 500px) {
 		.block_output {background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100; margin-bottom: 15px;}
		.block_output table,
		.block_output th,
		.block_output td {background-color: rgba(255, 255, 255, 0.2) !important;}
		.block_input {position: relative; z-index: 10;}
		.block_info {position: relative; z-index: 200;}
		}

	main p.headline {width: 100%; margin-bottom: 5px; font-size: 130%; font-weight:bold;} /* 記事（見出し） */
	main p.sentence {width: 100%; font-size: 0.8rem;} /* 記事（本文）*/
	main p.img_cap {width: 100%; color: #fff; background: #000; font-size: 0.8rem; line-height:27px; text-indent: 15px;} /* 記事（本文）*/
	main p.img_cap + ol {margin-top: 10px;}
	main p.img_cap + p {margin-top: 10px;}
	@media (max-width: 440px) {.img_cap {margin-bottom: 10px;}}
		p.sentence + ol {margin-top: 10px;}
		p.sentence + p {margin-top: 10px;}
		p.sentence + p.indent-3 {margin-top: 5px;}
		p.sentence + p.indent-4 {margin-top: 5px;}
		p.sentence + p.indent-3 {margin-top: 5px;}
		p.sentence + p.indent-4 {margin-top: 5px;}
		p.indent-3 + ol {margin-top: 10px;}
		p.indent-4 + ol {margin-top: 10px;}
	main p.indent-3 {padding-left: 1.5em; text-indent: -1.5em; font-size: 0.8rem;} /* インデント（1.5em） */
	main p.indent-4 {padding-left: 2em; text-indent: -2em; font-size: 0.8rem;} /* インデント（2em） */
	main a:link {text-decoration: none; margin-left: 0; color: #000000; font-weight: bold;} /* 文章中リンク */
	main a:visited {color: #000000; font-weight: bold;}
	main a:hover {color: blue;}
	main .triangle-down {clear:both; width: 0;  height: 0px; border-left: 20px solid transparent;  border-right: 20px solid transparent;  border-top: 20px solid orange;} /* 下向き三角 */

	/* デフォルトスピンボタン非表示 */
	input[type=number]::-webkit-outer-spin-button,
	input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;} /* Chrome, Safari, Edge /* Chrome, Safari, Edge */
	input[type=number] {-moz-appearance: textfield;} /* Firefox */

	/* インプット領域 */
	input{border: none; padding: 0; border-radius: 0;}
	input[type="number"]	{font-size: 1.1rem; font-weight: bold; width: 50px; text-align: center;}
	input[type="text"]		{font-size: 1.1rem; font-weight: bold; width: 50px; line-height: 1.5em; text-align: center;}
	input[type="button"]	{background: #00008b; height: 50px; line-height: 50px; width: 479px; font-size: 1.5rem; margin-bottom: 10px; color: #ffffff; border-radius: 10px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);}

	/* ±スピンボタン表示 */
	.input-spinner {display: inline-flex; padding-bottom: 5px; line-height: auto;}
	.input-spinner input[type="number"]	{font-size: 1.2rem; font-weight: bold; text-align: center; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);}
	.input-spinner input[type="text"]	{font-size: 1.2rem; font-weight: bold; text-align: center; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);}
	.input-spinner button				{font-size: 1.5rem; border: 0px solid #333; width: 32px; height: 32px; cursor: pointer; transition:
	  background: linear-gradient(to bottom, #ffffff, #cccccc); box-shadow: 0 2px 4px rgba(0,0,0,0.2);transform 0.2s;}
	.input-spinner button:hover 		{transform: scale(1.1);}
	.input-spinner span					{font-size: 0.8rem; font-weight: bold; display: flex; align-items: center;}
		button#p	{background:#b0c4de; border-radius:0 5px 5px 0;}
		button#m	{background:#b0c4de; border-radius:5px 0 0 5px;}

	span.sq {margin:0 3px; padding: 0 5px; height:21px; line-height:21px; border:1px solid #000; font-size:0.8rem; vertical-align: middle; position: relative; top: -1.5px;} /* 四角枠 */
	span.sq_radius {margin:0 3px; padding: 0 8px; height:21px; line-height:21px; border:1px solid #000; border-radius: 10px; font-size:0.8rem; vertical-align: middle; position: relative; top: -1.5px;} /* 角丸四角枠 */
	span.sq_b {margin:0 3px; padding: 0 5px; background-color:#000; color:white; font-family:'Sarpanch', sans-serif; vertical-align: middle; position: relative; top: -1.5px;} /* 黒四角 */
	span.sq_r {margin:0 3px; padding: 0 auto; background-color:#F00; color:white; font-family:'Sarpanch', sans-serif; vertical-align: middle; position: relative; top: -1.5px;} /* 赤四角 */
	span.bold {font-weight: bold;} /* 太字 */
	span.emphasis {display:block; margin:5px 0px; padding: 5px 15px; background-color:#b0c4de; font-weight: bold; border-radius: 5px;} /* 強調枠 */
	span.caution {display:block; margin:5px 0px; padding: 15px; background-color:#ffb6c1; border-radius: 5px;} /* 注意事項 */


/* フッター */
footer {display: flex; flex-direction: column; max-width: 100%;  height: auto;  background-color: #e9e9e9; border-left: 1px solid #666; #e9e9e9; box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.2);} /* ページフッター */
	footer .logo {width: 125px; height: 19px; background-color: #e9e9e9; padding: 10px 20px 10px; margin-left: auto;} /* フッター（ロゴ部） */
	footer .copyright {width: 100%; height: 20px; background-color: #444; font-size: 70%; line-height: 20px; color: #fff; font-family:'Sarpanch', sans-serif; text-align: center;} /* フッター（著作権表示）*/
	footer .copyright::before {content: "Copyright 1999 FANCY CRAFT ( formerly SR GARAGE ) All Rights Reserved.";}

/* indexリンク */
.indexlink {display: inline-block; width: 100%; max-width: 500px;}
.indexlink a {display: block; width: 100%; height: auto; background: url("../design/indexlink_1.gif") no-repeat center / contain; text-indent: -9999px;}
.indexlink:hover a {background-image: url("../design/indexlink_2.gif");}


div.block_lang {float: left; width: 460px; margin: 10px 20px 10px 19px; height: 30px;} /*言語選択ブロック */
div.lang_a1 {float: left; width: 100px; line-height: 30px; font-size: 80%; text-align: center;  background: #8eb8ff;} /*言語-左 */
div.lang_a2 {float: left; width: 100px; line-height: 30px; font-size: 80%; text-align: center;  background: #333333; color: #ffffff;} /*言語-左-選択中 */
div.lang_b1 {float: left; width: 100px; line-height: 30px; font-size: 80%; text-align: center;  background: #8eb8ff; margin: 0 0 0 20px;} /*言語 */
div.lang_b2 {float: left; width: 100px; line-height: 30px; font-size: 80%; text-align: center;  background: #333333; color: #ffffff; margin: 0 0 0 20px;} /*言語-選択中 */


/* ハンバーガーメニュー（スマホ表示用） */
@media (max-width: 500px) {
  .hamburger {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(0,122,204,0.95), rgba(0,95,163,0.95));
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  .hamburger span {
    display: block;
    width: 50%;
    height: 3px;
    background-color: white;
    border-radius: 2px;
  }

  .menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
  }

  .menu-overlay.show {
    display: block;
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    max-width: 280px;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,122,204,0.95), rgba(0,95,163,0.95));
    color: white;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    padding: 20px;
  }

  .mobile-menu.show {
    transform: translateX(0%);
  }

  .mobile-menu a {
    color: white;
    padding: 10px 0;
    text-decoration: none;
  }
  .mobile-menu p {
    color: white;
    padding: 10px 0;
    text-decoration: none;
  }
  .mobile-menu-title {display: flex; margin-bottom: 20px;}

  .mobile-menu-.title .close-btn {
    align-self: flex-end;
    font-size: 24px;
    cursor: pointer;
    margin-bottom: 0;
    color: white;
  }
}

/* PCではモバイルメニュー非表示 */
@media (min-width: 501px) {
  nav.mobile-menu {
    display: none !important;
  }
}