#pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }

@media screen {
  div.sourceCode { overflow: auto; }
}

@media print {
  pre > code.sourceCode { white-space: pre-wrap; }
  pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
}

code.sourceCode {
  border: 1px solid #cccccc;
  padding: 0.5em;
  display: block;
  overflow-x: auto;
  background-color: #fcfafa;
  margin: 0 0.2em 0.2em 0;
}

code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #008080; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #008000; } /* Attribute */
code span.bn { color: #008000; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #0000ff; font-weight: bold; } /* ControlFlow */
code span.ch { color: #008080; } /* Char */
code span.cn { color: #800000; } /* Constant */
code span.co { color: #408080; font-style: italic; } /* Comment */
code span.cv { color: #408080; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #800000; font-style: italic; } /* Documentation */
code span.dt { color: #800000; } /* DataType */
code span.dv { color: #008000; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #008000; } /* Float */
code span.fu { color: #0000ff; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #008080; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #0000ff; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #0000ff; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #008080; } /* SpecialChar */
code span.ss { color: #a31515; } /* SpecialString */
code span.st { color: #008000; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #008000; } /* VerbatimString */
code span.wa { color: #008080; font-weight: bold; font-style: italic; } /* Warning */


.opt-ex-smalldescription {
    font-size: 0.9em;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    padding: 0px 10px 10px 10px;  
    margin-bottom: 5px; 
    border-radius: 5px;
    color: #666;
}

.opt-ex-smalldescription a {
    color: #0066cc;
    text-decoration: none;
}

.opt-ex-smalldescription a:hover {
    text-decoration: underline;
}

.opt-example-result {
  border: 1px solid #cccccc;
  padding: 0.5em;
  display: block;
  overflow-x: auto;
  background-color: #fcfafa;
  margin: 0 0.2em 0.2em 0;
  color: #5C647F; 
}

.opt-example-result * {
  color: inherit; 
}

.opt-example-tbl {
  border-collapse: collapse;
  width: auto;
  margin: 0 0.2em 0.2em 0;
}

.opt-example-tbl th, .opt-example-tbl td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.opt-example-tbl th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.opt-example-tbl tr:nth-child(even) {
  background-color: #f9f9f9;
}


@media screen and (max-width: 600px) {
  .opt-example-tbl {
    border: 0;
  }

  .opt-example-tbl thead {
    display: none;
  }

  .opt-example-tbl tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

  .opt-example-tbl td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  .opt-example-tbl td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  .opt-example-tbl td:last-child {
    border-bottom: 0;
  }
}


.text-right {
  text-align: right;
}

.big-and-white {
    font-size: 2em; /* h1タグのデフォルトサイズに近似 */
    font-weight: bold;
    color: #FFFFFF; /* テキストの色を白に設定 */
}
/*
.opt-example-h3 {
	font-size: 100%;
	font-weight: bold;
	text-align: left;
	color: #486bb3;
	padding: 1px;
	padding-left: 0px;
	width: 100%;
	margin: 0px;
	margin-top: 5px;
}
.opt-example-h2 {
	font-size: 110%;
	font-weight: bolder;
	text-align: left;
	background: #666699;
	color: #FFFFFF;
	padding: 3px;
	padding-left: 5px;
	width: 100%;
	margin: 0px;
	margin-top: 20px;
}*/
.opt-example-h1 {
	font-size: 160%;
	font-weight: bolder;
	text-align: left;
	color: #444488;
	padding: 3px;
	padding-left: 0px;
	width: 100%;
	margin: 0px;
	margin-top: 20px;
}


.opt-example-h3 {
    font-size: 110%;
    font-weight: bold;
    text-align: left;
    background: transparent;
    color: #000080;
    padding: 3px 5px;
    width: 100%;
    margin: 0;
    margin-top: 10px;
    border-bottom: 2px solid #000080;
}
.opt-example-h2 {
    font-size: 130%;
    font-weight: bold;
    text-align: left;
    background: #4A4A8F;
    color: #FFFFFF;
    padding: 5px 10px;
    width: 100%;
    margin: 0;
    margin-top: 18px;
    padding-top: 6px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.opt-example-h4 {
    font-size: 100%;
    font-weight: bold;
    text-align: left;
    color: #486bb3;
    padding: 1px;
    padding-left: 8px;
    width: 100%;
    margin: 0px;
    margin-top: 5px;
}
.opt-example-h5 {
    font-size: 100%;
    font-weight: bold;
    text-align: left;
    color: #585858;
    padding: 1px;
    padding-left: 10px;
    width: 100%;
    margin: 0px;
    margin-top: 5px;
}


.opt-example-link {
    display: inline-block;
    margin: 0.9em 0 0 0;
    padding: 0 0.6em;

    background-color: #E4F0F7; /* 薄いグレーの背景色 */
    color: #007bff; /* 青っぽい文字色 */
    border-radius: 4px; /* 角を少し丸める */
    transition: background-color 0.3s ease; /* 背景色の変化を滑らかに */
}

.opt-example-link:hover,
.opt-example-link:focus {
    background-color: #e0e0e0; /* ホバー時に背景色を少し濃く */
    outline: none; /* フォーカス時のアウトラインを除去 */
}
.opt-example-copy-button {
  font-size: 0.8em;
  border-width: 1px;
  background-color: #EEEDFF;
  border-radius: 5px;
  border-color: #eee;
  color: #333;
}

.opt-example-copy-button:hover {
  color: #000;
  background-color: #DAF8FF;
}

.opt-example-copy-button-spaced {
  font-size: 0.8em;
  border-width: 1px;
  background-color: #EEEDFF;
  border-radius: 5px;
  border-color: #eee;
  margin-bottom: 10px;
  color: #333;
}

.opt-example-copy-button-spaced:hover {
  color: #000;
  background-color: #DAF8FF;
}

.opt-example-figure {
    text-align: center; /* テキストと画像を中央に配置 */
    margin: 0 auto;     /* 上下のマージンを0、左右のマージンを自動にして中央に配置 */
}


figure {
    text-align: center; /* figure 内のテキスト（figcaptionを含む）を中央寄せにする */
    line-height: 0; /* 画像とテキスト間の余分な行間を除去 */
}

figcaption {
    margin-top: 0.5em;
    font-weight: bold;
    color: #228;
    width: 100%; /* キャプションの幅をfigureの幅（画像の幅）に合わせる */
}

.toast {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #0d2f59;
    color: white;
    text-align: center;
    border-radius: 20px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

.toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}


pre.text {
  border: 1px solid #cccccc;
  padding: 0.5em;
  display: block;
  overflow-x: auto;
  background-color: #fcfafa;
  margin: 0 0.2em 0.2em 0;
  white-space: pre;
  position: relative;
}

pre.text code {
  color: inherit;
  line-height: 1.25;
}

pre.text code span {
  color: inherit;
}

pre.text code span:empty {
  height: 1.2em;
}

@media screen {
  div.text {
    overflow: auto;
  }
}

@media print {
  pre.text {
    white-space: pre-wrap;
  }
  pre.text code span {
    display: inline-block;
    text-indent: -5em;
    padding-left: 5em;
  }
}