@import url(styles.css);

/* ------------------------------------- */
/* ■■ 全ページ共通のコンテナ ■■ */
/* (aside関連はmain/hmainで個別指定) */
/* ------------------------------------- */

/* 96dpi環境で大きな見出しににじみが発生しやすいことへの対策 */
/* 配下すべてのh1/h2に継承される（上書きしない限り） */
h1, h2 {
  /* WebKit系ブラウザ（Chrome, Safari, Edgeなど）向けのフォント描画指定 */
  -webkit-font-smoothing: antialiased;
  /* Firefox（macOS環境）向けのフォント描画指定 */
  -moz-osx-font-smoothing: grayscale;
  /* SVGやHTMLテキストの描画において、ブラウザに「読みやすさを優先して描画してほしい」と指示するプロパティ */
  text-rendering: optimizeLegibility;
}
html {
  /* UAスタイルのリセット（最近の常道らしい） */
  margin: 0;
  padding: 0;
}
body
{
  max-width: var(--body-width);
  width: var(--body-width);
  margin: 0 auto;
  /* font-size: 87.5%; */
  font-family: 'Noto Sans JP', sans-serif;
  /* フォント本来の(プロポーショナル)字詰めに */
  font-feature-settings: "palt";
  /* UAスタイルのリセット（最近の常道らしい） */
  padding: 0;
}

header{
  width: 100%;
}
/* 特殊指定 画像に変えたら不要かも */
header h1{
	text-align: center;
}

/* 横長なのでpを調整？ */
/* main p {
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  line-height: 1.5em;
} */


/* ------------------------------------- */
/* ■■ 全ページ共通のページタイトル用 ■■ */
/* ------------------------------------- */
/* 横並び（1行に収まる） */
main .headline-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
main .headline-inline h1 {
  /* margin: 0; */
	margin: 0.3em 0.5em;
  flex: 1 1 auto;
	font-size: 2em;
  min-width: 0;
 	/* outline: 1px dashed red; 見出しの幅確認用 */
}
/* main .headline-inline .sns-share-links { */
.sns-share-links {
  flex: 0 0 auto;
  display: flex;
  gap: 0px 10px;
  align-items: center;
  justify-content: flex-end;
	/* outline: 1px dashed blue; 画像群の幅確認用 */
}


/* ------------------------------------- */
/* ■■ 全ページ共通のナビゲーションバー用 ■■ */
/* ------------------------------------- */
#linkbar{
	display: flex;
	align-items: center;
	margin: 0;
	width: 100%;
	/* googleカスタム検索無し用 */
  /* height: 2em; */
  /* googleカスタム検索入れる時用 */
  height: var(--linkbar-height);
  box-sizing: border-box;
  background-color: var(--cl-dark);

	color: white;
	font-size: 1em;
	font-weight: bold;
	/* google検索を右端に入れるときだけ使用 */
	/* 配下の２要素(<ul>と<right-box>)を両端に */
	justify-content: space-between;
}
#linkbar ul{
	display: flex;
	list-style: none;
}
#linkbar ul li{
 	font-size: 1em;
	padding-left: 0.8em;
	padding-right: 0.8em;
	line-height: 1.5;

	color: white;
}
/* 天地いっぱいのpaddingを自動で取るための指定 */
#linkbar ul li::before {
	box-sizing: border-box;
  content: "";
  display: block;
  height: 10px;
}
#linkbar ul li::after {
	box-sizing: border-box;
  content: "";
  display: block;
  height: 10px;
}

/* リスト内要素のリンク設定*/
#linkbar ul li a{
	text-transform: capitalize;
	text-decoration: none;
	font-variant: small-caps;
}
#linkbar li a:link,#linkbar li a:visited, #linkbar li a:active{
	color: inherit;
}
#linkbar li a:hover,
#linkbar ul a:focus,
#linkbar li:hover{
	background-color: var(--cl-darker);
  color: var(--cl-lighter);
}
	/* リスト内要素の設定詳細*/
#linkbar ul li.itemM0{
	background-color: var(--cl-darker);
	font-size: 1em;
}
#linkbar ul li.itemM1{
	font-size: 1em;
}
#linkbar ul li.itemS0{
	background-color: var(--cl-darker);
	font-size: 0.8em;
	padding-top: 0.6em;
}
#linkbar ul li.itemS1{
	font-size: 0.8em;
	padding-top: 0.6em;
}
/* google検索を右端に入れるときだけ使用 */
#linkbar #right-box{
	margin-right: 10px;
  align-items: center;
  width: 270px;
}
/* ページに応じたハイライト表示をJavaScriptで制御用 */
#linkbar ul > li.itemM{
  /* 大きな<li>を中央、小さな<li>は大の下に合わせるための設定 */
  font-size: 1em;
}
#linkbar ul > li.itemS{
  font-size: 0.8em;
  /* itemMとbaseline揃えるための"だいたい上手く行く"設定 */
  padding-top: 0.3em;
	padding-bottom: 0em;
}
#linkbar ul > li.targetPageHighlight{
  background-color: var(--cl-darker) !important;
}

/* ------------------------------------- */
/* ■■ 全ページ共通の画像影付き ■■ */
/* ------------------------------------- */
img.shadow
{
  box-shadow: 1px 1px 3px 3px var(--cl-darker);
  padding: 2px;
  /* 左に記事を回り込ませる時用に右を大きめ*/
  margin: 0.8em 2em 1em 1em;
}
img.hshadow
{
	box-shadow: 2px 2px 5px 2px #ccc;
	padding: 2px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
}

article kbd {
  /* background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 0.3em;
  box-shadow: 0.15em 0.15em 0.2em rgba(0,0,0,0.3);
  padding: 0.1em 0.3em; */

  display: inline-block; /* インライン要素として扱い、パディングなどを適用しやすくする */
  background-color: #f0f0f0; /* キーの背景色 */
  border: 1px solid #ccc; /* 枠線 */
  padding: 5px 8px; /* キーの余白 */
  border-radius: 3px; /* 角丸 */
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); /* 影で立体感を出す */
  /* 等幅フォントでキーボードらしく */
  font-family: monospace; 
  /* 文字のサイズ */
  /* font-size: 0.9em;  */
  font-weight: bold;
  /* 文字色 */
  /* color: #333333;  */
  text-align: center; /* 文字を中央寄せ */  
}
    /* old "keybrd" ruleset:
      margin-left: 0.2em;
      margin-right: 0.3em;
      background-color: whitesmoke;
      border: 1px dimgray;  
      border-radius: 2px;
      border-style: solid;
      border-width: 1px;
      border-color: black;
      box-shadow: 0.15em 0.15em 0.15em gray;
      height: 1.3em;
      line-height: 1.3em;
      font-size: 95%;
      padding-left: 0.2em;
      padding-right: 0.2em;
      padding-bottom: 0.15em; */


/* ------------------------------------- */
/* ■■ 全ページ共通のリンク表示(<main>のみ) ■■ */
/* ------------------------------------- */
/* main全共通、リンクのマウスオーバー */
main a[href],
main a[href]:visited,
main a[href]:active {
  color: black;
  text-decoration: none;
  border-bottom: var(--cl-darker) dotted 1px;
}

/* focusは視覚障害やキーボード主体利用者、一部スマホでも有効 */
main a[href]:focus {
  text-decoration: none;
  outline: 2px solid var(--cl-dark);
  outline-offset: 2px;
  background-color: var(--cl-light);
  border-bottom: none;
}

main a[href]:hover {
  color: black;
  text-decoration: none;
  background-color: var(--cl-light);
}
/* (使用未定)visitedで状態変える場合、状態変えたくないaリンクに付けるクラス */
/* ex). <a href="" class="link-text no-visited"> */
/* main a[href].no-visited:visited {
  text-decoration: inherit;
  color: inherit;
} */

/* ---------------------------------- */
/* 全ページ共通の見出し効果 */
/* ---------------------------------- */
h3 + p {
  margin-top: -0.6em; /* UI に合わせて調整 */
}
p + h3 {
  margin-top: 1.2em; /* ここは環境差に強い */
}

/* ---------------------------------- */
/* 種別ごとLinkの効果(hoverなど) */
/* ---------------------------------- */

/* テキストへのリンク */
/* -------------= */
/* hoverでデフォルトの下線が復活しないための指定 */
main a[href].link-text:hover,
main a[href].link-text.anchor:hover,
main a[href].link-text.anchor.up:hover,
main a[href].link-text.anchor.down:hover,
main a[href].link-text.external:hover {
  text-decoration: none;
}
/* テキストリンク(サイト内部) */
main a[href].link-text::after {
  content: "↗ ";
  color: var(--cl-darker);
}
main a[href].link-text:hover {
  background-color: var(--cl-lighter);
  /* text-decoration: underline; */
}
main a[href].link-text.bold {
  font-weight: bold;
}
main a[href].link-text.bold:hover {
  background-color: var(--cl-light);
}
/* テキストリンク（ページ内） */
main a[href].link-text.anchor::after{
  content: "⬍";
  color: var(--cl-middle);
}
/* ページ内の上 */
main a[href].link-text.anchor.up::after {
  content: "⬆";
}
/* ページ内の下 */
main a[href].link-text.anchor.down::after {
  content: "⬇";
}
main a[href].link-anchor:hover {
  background-color: var(--cl-lighter);
  border-bottom: 2
  px dashed #00aaff;
}
/* ページ内目次用 */
main a[href].link-text.tcontents {
  border-bottom: none;  
}
main a[href].link-text.tcontents:after {
  content: none;
}
main a[href].link-text.tcontents:hover {
  background-color: var(--cl-middle);
}

/* 外部サイトリンク */
/* main a[href].link-text.external {
  text-decoration: 1px dotted underline var(--cl-darker);
} */
main a[href].link-text.external::after {
  content: "⇗ ";
  font-size: large;
  color: var(--cl-darker);
}
main a[href].link-text.external:hover {
  font-weight: bold;
}

/* テキストのダウンロードリンク */
main a[href].link-text.download {
  border-bottom: none;
}
main a[href].link-text.download::after{
  content: "⬇️";
}
main a[href].link-text.download:hover {
  font-weight: bold;
  color: white;
  background-color: var(--cl-darker);
}

/* テキスト以外リンク */
/* -------------= */
/* 画像リンク（snsボタンなど） */
main a[href].link-image {
  border-bottom: none;
}  
main a[href].link-image:hover img {
  outline: 2px solid var(--cl-middle) !important;
  filter: brightness(1.1);
  transition: 0.2s ease;
}

/* PDFリンク(クリックでpdf表示用) */
main a[href].link-pdf {
  display: inline-block;
  border-bottom: none;
}
main a[href].link-pdf img {
  display: block;
  transition: outline 0.3s ease, background-color 0.3s ease;
}
main a[href].link-pdf:hover img {
  background-color: rgba(255, 0, 0, 0.1);
  border: 1px solid red;
  /* outline: 2px solid var(--cl-middle); */
}
/* PDFリンク特殊(overlay文字付き) */
a[href].link-pdf:hover .caption-overlay {
  color: white;
  background-color: rgba(255, 0, 0, 0.8);
  font-weight: bold;
  text-shadow: 0 0 2px black;
}

/* 動画リンク */
main a[href].link-video {
  position: relative;
  display: inline-block;
}
a[href].link-video::before {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
a[href].link-video:hover img {
  filter: brightness(0.7);
  transform: scale(1.05);
  transition: transform 0.3s ease, filter 0.3s ease;
}
a[href].link-video:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}

/* ------------------------------------- */
/* 画像の回り込み */
/* ------------------------------------- */
.around-r{
  float: right;
  margin: 0 0 0.5em 1em;
}
.aroung-l{
  float: left;
  margin: 0 1em 0.5em 0;
}

/* ---------------------------------- */
/* インライン画像の調整 */
/* ---------------------------------- */
.inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.2em;          /* 120% 高さを維持 */
  vertical-align: -0.1em; /* 上下均等にはみ出し */
  background: var(--cl-lighter);       /* 背景 */
  border: 1px solid var(--cl-light);
  padding: 2px;           /* 内側余白 */
  border-radius: 3px;
}
.inline-icon img {
  height: 100%;           /* 枠の中で画像をフィット */
  display: block;         /* 行間の隙間を消す */
}

/* ------------------------------------- */
/* リンクバーなど動的読み込み時のちらつき対策 */
/* ------------------------------------- */
[data-fragment] {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
[data-fragment].loaded {
  visibility: visible;
  opacity: 1;
}
#navigation[data-fragment]{
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* height: 50px; */
  height: var(--linkbar-height);
  width: 100%;  
}
#navigation[data-fragment].loaded{
  visibility: visible;  
  opacity: 1;
}
#toptitle[data-fragment]{
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  height: var(--toptitle-height);
  width: 100%;  
}
#toptitle[data-fragment].loaded{
  visibility: visible;  
  opacity: 1;
}

/* ------------------------------------- */
/* ■■ <figure>のUA指定(見えないmargin)対策 ■■ */
/* 他への影響ないか要注意 */
/* ------------------------------------- */
figure{
  margin: 0;
}

/* ------------------------------------- */
/* figure/figcaptionのいろいろな指定 */
/* ------------------------------------- */
  /* 
  <p style="text-align: right; 
  font-size: small; 
  margin: -0.7em 0; 
  line-height: 1.4em;">
  */
.figure-caption-box {
  display: inline-block;
  width: fit-content; /* 画像の幅に合わせて figure の幅を調整 */
  max-width: 100%;
}
figcaption.in-box {
  max-width: 100%;
  word-break: break-word;       /* 単語途中でも改行 */
  overflow-wrap: anywhere;      /* はみ出し防止の最終手段 */
}
figcaption.right-aligned{
  text-align: right;
  margin-right: 0;
}
figcaption.right-aligned-shadow{
  text-align: right;
  margin-right: 2.5em;
}
figcaption.bottom-fit{
  padding-top: 0.3em;
}
figcaption.bottom-fit-shadow{
  padding-top: 0em;
  margin-top: -0.7em;
}
figcaption.small{
  font-size: small;  
}
figcaption.top-fit{
  padding-bottom: 0.3em;
}
/***************************/
/* imgとfigcaptionの重ね表示用 */
/***************************/
.img-caption-overlay {
  position: relative;
  display: inline-block;
}
.caption-overlay {
  position: absolute;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: block; /* または inline-block */
  padding: 0.2em 0.5em;
}
.caption-overlay.right-bottom{
  bottom: 0;
  right: 0;
  text-align: right;
}
.caption-overlay.right-bottom-shadow{
  bottom: 1.8em;
  right: 2.8em;
  text-align: right;
}
.caption-overlay.red{
  color: red;
}
.caption-overlay.red-rev{
  color: white;
  background-color: rgba(255,0,0,0.7);
}
.caption-fsize-small{
  font-size: small;
}
.caption-fsize-smaller{
  font-size: smaller;
}
.caption-fsize-xsmall{
  font-size: x-small;
}
.caption-fsize-large{
  font-size: large;
}

/***************************/
/* img大小２枚の重ね表示用 */
/***************************/

.images-overlay-box {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
}
.images-overlay-box.grid-contents {
  width: 100%;
  height: 100%;  
}
.base-image {
  display: block;
  width: auto; /* htmlのheight指定に従う */
}
.overlay-image {
  position: absolute;
  width: 80px;
  height: auto;
}
/* 特殊なgridレイアウトでだけ利用する子クラス */
/* 位置とサイズ完全固定の直値 */
.fixed-size-large {
  max-width: 65px;
  max-height: 80px;
  position: absolute;
  margin-left: 420px;
  margin-top: 610px;
}
.fixed-size-small {
  max-width: 40px;
  max-height: 50px;
  position: absolute;
  margin-left: 200px;
  margin-top: 290px;
}
.base-image.shadow {
  box-shadow: 1px 1px 3px 3px var(--cl-light) ;
}



/* 位置指定クラス */
.images-overlay-box .top-left {
  top: 2px;
  left: 2px;
}

.images-overlay-box .top-right {
  top: 2px;
  right: 2px;
}

.images-overlay-box .bottom-left {
  bottom: 2px;
  left: 2px;
}

.images-overlay-box .bottom-right {
  bottom: 0;
  right: 0;
}

.images-overlay-box .center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.svg-transparent {
  opacity: 0.8;
}


/* ------------------------------------- */
/* 各種ボックス関連 */
/* ------------------------------------- */
/* 左上角の上に文字(マーク等)を置くbox...上を参考に自作 */
.box-ltoverlap-title
{
  position: relative;
  font-size: 0.95em;
  margin: 1.5em 6em 0 2em; 
  padding: 0.3em 0.5em 0.5em 1em;
  border: dotted 1px black;
}
.box-ltoverlap-title .box-title
{
  position: absolute;
  display: inline-block;
  top: -1.2em;
  left: -0.9em;
  font-size: 1.2em;
  margin-bottom: 0.5em;
  margin-right:  0.5em;
  padding: 0.5em 0.2em;
  height: 1.1em;
  line-height: 1em;
  background: white;
}
.box-ltoverlap-title p
{
  margin: 0;
  padding: 0;
  line-height: 1.4em;
}
.note{
  width: 80%;
  background-color: var(--cl-lighter);
  border: 2px solid var(--cl-dark);
  border-radius: 3px;
  margin: 1.5em 1.5em;
  padding: 0.5em 1.5em;
  font-size: 0.9em;
  line-height: 1.5em;
}
.box-column{
  border: 2px solid var(--cl-dark);
  background-color: var(--cl-lighter);
  border-radius: 4px;
  margin: 1em 1em 2em 10em;
  padding: 1.4em 1.4em 0.5em 1.5em;
  position: relative;
  font-size: 0.8em;
  line-height: 1.5em;
  position: relative;
}
.box-column .box-column-title{
  background-color: var(--cl-dark);
  padding: 0.2em 0.8em 0.2em 0.8em;
  color: white;
  left: 1em;
  top: -1em;
  font-size: 0.9em;
  position: absolute;
}
/* 脚注 */
.footnotes {
  max-width: 80%;
  margin: 0 1em 0 auto;
  text-align: left;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3em; /* ← 脚注同士の間隔（代替案） */
}
.footnotes.with-divider{
  margin-top: 0.2em;
  padding-top: 0.3em;
  border-top: 1px dotted var(--cl-dark);
}
.footnotes .footnote {
  font-size: 0.85em;
  line-height: 1.2em;       /* ← 脚注一文の行間 */
  color: #555;
  margin: 0;              /* ← gapを使うなら margin-bottom は不要 */
}
/* .footnetes .footnote + .footnote{
  margin-top: 0em;  
} */

/* ************************ */
/* テスト中 画像の回り込みボックス */
.float-box {
  float: right;
  shape-outside: inset(0);
}
/* .float-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/**********************************/
/* 左に画像、右に説明文のマニュアルスタイル */
/**********************************/
/* 本来は不要 */
.manual-container {
  width: 800px; /* 全体の固定幅（運用方針に準拠） */
  margin: 0 auto;
}

.manual-step {
  display: flex;
  width: 95%;
  border: 1px solid var(--cl-darker);
  margin-bottom: 1.5em;
  align-items: flex-start; /* 高さ不定の画像でもテキストの左端を揃える */
}
/* 最初のステップだけ上マージンを大きく */
.manual-step:first-child {
  margin-top: 2em;
}
/* 最後のステップだけ下マージンを大きく */
.manual-step:last-child {
  margin-bottom: 3em;
}

.manual-image {
  width: 50%; /* 親に対する割合指定。揃え保証済み */
  padding: 0.2em 0 0.2em 0.2em;
  flex-shrink: 0;
}

.manual-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.manual-text {
  width: 45%;
  padding-left: 1em;
  box-sizing: border-box;
}

.manual-title {
  font-size: 1.1em;
  margin-bottom: 0.5em;
}

.manual-description {
  font-size: 1em;
  line-height: 1.6;
}

/* モバイル対応 */
@media (max-width: 600px) {
  .manual-step {
    flex-direction: column;
  }

  .manual-image,
  .manual-text {
    width: 100%;
    padding-left: 0;
  }

  .manual-image {
    margin-bottom: 1rem;
  }
}

/*文字の縁取りグラデ 主に画像に載っける時*/
.text-shadow
{
  /*
  text-shadow:  2px  2px 10px #777 ,
               -2px  2px 10px #777 ,
                2px -2px 10px #777 ,
               -2px -2px 10px #777;  
  */               
  text-shadow:  2px  2px 2px white ,
               -2px  2px 2px white ,
                2px -2px 2px white ,
               -2px -2px 2px white;  
  /*
  text-shadow:  0.2em  0.2em 1em #777 ,
               -0.2em  0.2em 1em #777 ,
                0.2em -0.2em 1em #777 ,
               -0.2em -0.2em 1em #777;  
  */
  /*
  text-shadow: 0.5em  0.5em 0.5em black,
              -0.5em  0.5em 0.5em black, 
               0.5em -0.5em 0.5em black, 
              -0.5em -0.5em 0.5em black;
  */
  /*              
  text-shadow: 1.5px  1.5px 1.5px red,
              -1.5px  1.5px 1.5px red, 
               1.5px -1.5px 1.5px red, 
              -1.5px -1.5px 1.5px red;
  */              
}

/* 独自タグ表示用 */
code.chktag{
  background-color: var(--cl-light);
  font-size: 0.9rem;
  width: auto;
  display: inline-block;
  font-family: inherit;
  font-weight:bold;
  line-height: 1.5em;
  margin: 0 0.3em;
  padding:0.4em 0.4em;
  border: 1px solid var(--cl-dark);
}
code.chktag span{
  color: red;
}
pre {
  display: block;
  margin: 0.7em 0;
  padding: 0;
  background-color: transparent;
  /* font-size: 1rem; */
  /* font-family: monospace; */
  /* white-space: pre; */
  overflow-x: auto;
}
/* 改行してブロック使用する場合、重複の指定が必要 */
pre code {
  display: block;
  margin: 0;
  width: fit-content;
  max-width: 100%;
  white-space: none;
}
pre code.chktag{
  background-color: var(--cl-light);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight:bold;
  line-height: 1.5em;
  padding:0.4em 0.6em;
  border: 1px solid var(--cl-dark);
}
pre code.chktag span{
  color: red;
}

/* pre + h2,
pre + h3 {
  margin-top: 3rem;
}
code + h2,
code + h3 {
  margin-top: 3rem;
} */
code.file-path,
code.dir-path {
  background-color: var(--cl-lighter);
  font-size: 1.1em;
  font-weight: bold;
  padding: 0.3em 0.3em;
  margin: 0 0.1em;
}
pre code.file-path,
pre code.dir-path {
  background-color: var(--cl-lighter);
  font-size: 1.1em;
  font-weight: bold;
  padding: 0.3em 0.3em;
  margin: 0 0 0 2em;
}  

/* A判B判用紙の縦横比率指定で、width/height片側指定でもレイアウト未定問題解消 */
img.r-h {
  aspect-ratio: 1.4.1/1;  
}
img.r-v {
  aspect-ratio: 1/1.414;
}
img.fit {
  object-fit: contain;  
}
img.fit-cut {
  object-fit: cover;
}

/* カスタム検索窓のサイズをサイト側に合わせるためのリセット例 */
/* Googleの設定変更による不具合っぽい(Gemini解説) */
/* 1. Google検索要素全体の高さをバーに合わせる */
#linkbar #right-box .gsc-control-cse {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    border: none !important;
}

/* 2. 入力エリアを包むボックスの余白を削る */
#linkbar #right-box .gsc-input-box {
    height: 1.6em !important; /* バーの高さより少し小さめに設定 */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 3. 入力欄自体のフォントと高さを固定 */
#linkbar #right-box input.gsc-input {
    height: 1.2em !important;
    font-size: 14px !important; /* 大きすぎてはみ出すのを防ぐ */
    padding: 0 4px !important;
}

/* 4. 検索ボタン（虫眼鏡）のサイズ調整 */
#linkbar #right-box button.gsc-search-button {
    padding: 4px 8px !important;
    margin-left: 5px !important;
    height: auto !important;
}

/* 5. (重要) 余計な「x」ボタンなどの表示位置を調整 */
#linkbar #right-box .gsst_a {
    padding-top: 0 !important;
}

/* 
 .gsc-control-cse {
    padding: 0 !important;
    border: none !important;
}
.gsc-input-box {
    height: auto !important;
}
input.gsc-input {
    font-size: 16px !important;
} */

/* ------------------------------------- */
/* ユーティリティ */
/* ------------------------------------- */
/* シンプルに空きを取る */
.spacer {
  display: block;
  width: 100%;
  height: 1em; /* デフォルト */
  margin: 0;
  padding: 0;
}
.spacer.half {
  height: 0.5em;
}
.spacer.quarter {
  height: 0.25em;
}
.spacer.threequarter {
  height: 0.75em;
}