@charset "UTF-8";
html { font-size: 62.5%; overflow-y: scroll; }
body { font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;}
*{ margin:0 ; padding: 0; list-style: none; }

/*============================
global
============================*/
p,li,dd,dt,td,th { font-size: 1.6rem; line-height: 1.6em; list-style: none; margin: 0; padding: 0; }
img {width: 100%; max-width: 100%; height: auto; vertical-align: top;}
th, td { vertical-align : top; }
#main a {text-decoration:underline;}
.pc { display: block; }
.sp { display: none !important; }
.nolink { pointer-events: none;}
body strong { background:linear-gradient(transparent 60%, #ff6 60%); }
@media screen and (max-width:767px) {
	.pc { display: none !important; }
	.sp { display: block !important; }
	.inner { padding: 0 20px; box-sizing: border-box;}
}
a:hover { text-decoration: none;}

.link-arrow {padding-left:15px; position:relative;}
.link-arrow::after {
	position: absolute;
	display: block;
	left: 0;
	top: 6px;
	content: "";
	width: 6px;
	height: 6px;
	border-top:  2px solid black;
	border-right:  2px solid black;
	transform: rotate(45deg) !important;
  }


/* 変数定義 */
:root {
    --header-height: 100px; /* ヘッダーの高さ */
    --nav-width: 340px;    /* メニューの幅 */
    --footer-height: 60px; /* フッターの高さ */
}

body { margin: 0; padding: 0; }
#container {
    display: grid;
    grid-template-areas:
        "header"
        "content"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto; /* header: 自動, content: 残り, footer: 自動 */
    height: 100vh;
    min-width: 1024px;
}


header {
	grid-area: header;
	display: flex; align-items: center; justify-content: space-between;
	box-sizing: border-box; height: var(--header-height); padding: 10px 20px;
    position: relative; box-sizing: border-box; background: #f8f8f8; }
header h1 { margin: 0; }
header h1 a { display: block; transition: .3s; }
header h1 a:hover { opacity: 0.6; }
header h1 a#logo {}
header h1 a#site-title { color: #000; text-decoration: none; font-size: 3rem; }
header h1 img { width: auto; height: 50px; }
header #search { position: absolute; right: 10px; top: 10px; }
header .link-origin { position: absolute; right: 10px; bottom: 10px; }
header .link-origin a { text-decoration: none; color: #000; }
header .link-origin a:hover { text-decoration: underline; }
.hamburger { display: none; font-size: 2.4rem; line-height:1; background: none; border: none; cursor: pointer; transition: .3s; }

@media (max-width: 640px) {
	#container { display: block; width: 100%; min-width: 320px;}
	header { position: fixed; z-index: 2; display: block; width: 100%; height: 80px; padding-top:5px;}

	header h1 a#logo { width: 150px;}
	header h1 a#site-title { font-size: 2.4rem; margin-top: 0; }
	header h1 img { width: 100%; height: auto; }

	header #search { position: static; padding: 10px; }
	header .link-origin { position: static; text-align: center; }
	.hamburger { display: block; position: absolute; right: 10px; top: 30px; font-size:3.3rem;}
	.hamburger::after { color: #000; content: "×"; position: absolute; top: -10px; right: -2px; font-size: 4rem; line-height: 40px; opacity: 0; transition:.5s; }
	.hamburger.on { color: #f8f8f8;  }
	.hamburger.on::after { opacity: 1; }
}


nav#global {
	display: block; position: absolute; top: var(--header-height); left: 0; z-index: 2;
	width: var(--nav-width); height: calc(100vh - var(--header-height) - var(--footer-height));
	border-right: 1px solid #ccc; background: #fff; overflow-y: auto; }
nav#global ol { list-style: none; padding: 0; margin: 0;  }
nav#global ol li { position: relative; border-top: 1px solid #ccc; }
nav#global > ol {border-bottom: 1px solid #ccc; }
nav#global ol li a { text-decoration: none; color: black; display: block; font-size: 1.4rem; padding: 10px 20px 10px 10px; transition: .3s;}
nav#global ol li a:hover { background: #fff0c9; text-decoration: underline; }
nav#global ol li.current > a { background-color: #005CBF; color: white; }
nav#global ol li:has(.current) > a { background-color: #3e9bff; color: white; }

nav#global li:has(span.toggle) > a { margin-right: 40px; }
nav#global li span.toggle { position: absolute; top: 0; right: 0; width: 40px; height: 45px; border-left: 1px solid #ccc; cursor: pointer; transition: .3s; }
nav#global li span.toggle:hover,
nav#global li span.toggle.on { background: #ccc;}
nav#global li span.toggle:before { position: absolute; top: 20px; right: 9px; width: 16px; height: 2px; background: #777; display: block; content: ""; }
nav#global li span.toggle:after  { position: absolute; top: 13px; right:16px; width: 2px; height: 16px; background: #777; display: block; content: ""; transition: .2s; }
nav#global li span.toggle.on:after  { top: 20px; height: 2px; }

nav#global .child { height: 0; overflow: hidden; transition: height 500ms ease; }
nav#global .child a { padding-left: 1.5em; }
nav#global .on + .child {   height: auto; height: calc-size(auto, size); }

@media (max-width: 640px) {
	.drawer {
		position: absolute; width: 100%; right: -100vw;
		height: calc(100vh - 76px); overflow-y: scroll;
		transition: .3s ease-in-out; background: #fff; box-shadow: 0px 2px 1px rgba(0,0,0,0.8) inset; }
	.drawer.open{ right: 0;}
	nav#global {
		position: static; top: var(--header-height); left: 0; z-index: 2;
		width: 100%; height: auto; max-height: initial; overflow-y: auto;
		background: #fff; border-bottom: 1px solid #ccc; }
	nav#global ul.child { display: none; }
	nav#global ul.child.open { display: block; }
}


/* content */
#content a[target] { padding-right: 26px; background: url(images/icon-blank.svg) no-repeat right -4px / 28px auto; opacity: .3s;}
#content a:hover[target] { background-color:rgba(255,255,255,0.6); background-blend-mode:lighten; }
#content { grid-area: content; padding: 0 20px 20px; margin-left: var(--nav-width); overflow-y: auto; scroll-padding-top: 100px; }
#content #content-header { position: sticky; background: #5c7292; margin: -20px; padding: 20px; top: 0; z-index: 2; }
#content #content-header h1 { color: #fff; margin-right: 78px; }
#content #content-header nav#pager { position: absolute; right: 20px; top: 24px; }
#content #content-header nav#pager ul { display: flex; }
#content #content-header nav#pager ul li { width: 16px; }
#content #content-header nav#pager ul li:nth-child(2) { width: 24px; margin: 0 10px; }
#content #content-header nav#pager ul li a { width: 100%;}
#content #content-header nav#pager ul li a img { width: 100%; height: auto; filter: brightness(0) saturate(100%) invert(60%) sepia(13%) saturate(11%) hue-rotate(316deg) brightness(97%) contrast(79%);}
#content #content-header nav#pager ul li a[href] img { filter: brightness(0) saturate(100%) invert(96%) sepia(100%) saturate(12%) hue-rotate(237deg) brightness(103%) contrast(103%); }
#content #content-header nav#pager ul li a[href]:hover img { filter: brightness(0) saturate(100%) invert(65%) sepia(67%) saturate(640%) hue-rotate(340deg) brightness(95%) contrast(90%); }
#content ol#topicpath { display: flex; margin-top: 50px; }
#content ol#topicpath li { position: relative;}
#content ol#topicpath li:not(:first-child) { padding-left: 20px;}
#content ol#topicpath li:not(:first-child):before {
	display: block; width: 8px; height: 8px; border-top: 1px solid #777; border-right: 1px solid #777;
	position: absolute; top: 0.5em; left: 3px; content: ""; transform: rotate(45deg); }
#content ol#topicpath li a { display: inline-block;text-decoration: none; font-size: 1.2rem;}
#content ol#topicpath li a:hover { text-decoration: underline;}
#content ol#topicpath li:last-child a { pointer-events: none; color: #000;}

#content #topicpath + h2 { margin-top: 1em;}
#content h2 { margin-top: 2em; font-size: 2.0rem; }
#content h2:first-child { margin-top: 0; }
#content h3 { margin-top: 1.8em; font-size: 1.8rem;}
#content h3:first-child { margin-top: 0; }
#content p  { margin-top: 1em;}

#content span.orange { font-weight: bold; color: #AE4A18; }
#content figure { max-width:1000px; margin: auto; padding: 10px;}
#content figure figcaption { margin-top: 0.5em; font-size: 1.4rem; text-align: center; font-weight: bold; }
#content figure figcaption span { margin-right: 0.5em; }


#content .chapterlist  { background: #EAF5FA; padding: 10px; margin-top: 1em; }
#content .chapterlist ol {}
#content .chapterlist ol li { margin-top: 0.5em; }
#content .chapterlist ol li a { text-decoration: none; }
#content .chapterlist ol li a:hover { text-decoration: underline; }


#content .list-normal {}
#content .list-normal li { list-style: initial; list-style-position: outside; margin: 1em 0 0 1em; }
#content .list-normal li ul { margin-left: 0.5em; }
#content .list-normal li ul li { list-style: circle; }
#content .list-number {}
#content .list-number li { list-style: decimal outside; margin: 1em 0 0 1em; }
#content .list-number li ol { margin-left: 0.5em; }
#content .list-number li ol li {}
#content .list-number li ul li { list-style: circle; }

#content .list-normal li p { margin-top: 0.5em; }

#content dl {}
#content dl dt { margin-top: 1em;}
#content dl dd { margin-left: 1em;}

#content .table-normal { width: 100%; border-collapse: collapse; margin-top: 1.5em;}
#content .table-normal caption { text-align: left; padding: 5px; font-size: 1.4rem; }
#content .table-normal caption span { margin-right: 0.5em; }
#content .table-normal th { padding: 5px; border: 1px solid #333; background: #fab608; white-space: nowrap; }
#content .table-normal th.subheader { background: #ccc; }
#content .table-normal td { padding: 5px; border: 1px solid #333;}

#content .table-value { width: 100%; border-collapse: collapse; margin-top: 1.5em;}
#content .table-value caption {text-align: left; border: 1px solid #333; margin-bottom: -1px; padding: 5px; font-size: 1.4rem; }
#content .table-value th { padding: 5px; border: 1px solid #333; font-weight: normal; text-align: left; white-space: nowrap;  background: #ccc;}
#content .table-value td { padding: 5px; border: 1px solid #333;}
#content .table-value tr:nth-child(odd)  td { background: #ccc;}
#content .table-value tr:nth-child(even) td { background: #aaa;}

#content table + .caption { margin-top: 0.5em; font-size: 1.4rem; text-align: center; font-weight: bold; }
#content table + .caption span { margin-right: 0.5em; }

#content code { display: block; margin-top: 1em; padding: 5px; background: #eee; border: 1px solid #ccc; font-size: 1.4rem;}
#content code pre { white-space: pre-wrap;}
#content sup { font-weight: bold; font-size: 1.2rem; }

@media (max-width: 640px) {
	#content { box-sizing: border-box; width: 100%; margin-left: 0; box-sizing: border-box; }
	#content #content-header { position: relative; top: 100px; z-index: 1; }
	#content ol#topicpath { flex-wrap: wrap; margin-top: 130px;}
}


footer {
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--footer-height);
    padding: 10px 20px;
    background: #f8f8f8; /* headerと同系色 */
    border-top: 1px solid #ccc;
    box-sizing: border-box;
}

footer p { font-size: 1.4rem; }
footer a { color: #000; text-decoration: none; }
footer a:hover { text-decoration: underline; }


@media (max-width: 640px) {
	footer { flex-direction: column; align-items: flex-start; height: auto; padding: 15px 20px; }
	footer nav ul { flex-direction: column; gap: 10px; }
	footer p.copyright { margin-top: 10px; }
}

.mid {
	vertical-align:middle; width:auto;
}

/* 検索窓のカスタマイズ */
/*-----表マージン調整-----*/
.gsc-control-cse { padding: 0 !important; background: none !important; border: none !important;}

/*-----検索窓----- */
.gsc-input-box{ padding: 0; !important; }

/*-----文字サイズ変更-----*/
.gsc-input-box input.gsc-input { font-size: 1.8rem !important; }
/*-----ボタン----*/
.gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus{
	padding: 0 !important;
	background: none !important;
	border: none !important;
}
/*----虫眼鏡アイコンの色----*/
.gsc-search-button-v2 svg { fill: #00f !important;}

/*-----検索窓　右側の余白を調整-----*/
table.gsc-search-box td.gsc-input{ padding-right:5px !important; }

/*-----検索ボタンの大きさ変更-----*/
.gsc-search-button-v2 svg {
  width: 24px !important;
  height: 24px !important;
  margin-right:3px !important;
}

/*-----ボタンにカーソルを当てたら色を変えるー-----*/
.gsc-search-button-v2:hover {
  opacity: 0.7 !important;
}


/* 検索結果一覧のカスタマイズ*/

/*-----サムネイル拡大表示・角丸-----*/
.gs-result .gs-image, .gs-result .gs-promotion-image {
  max-width: 200px !important;
  height:auto !important;
  border-radius: 10px !important;
}

.gsc-clear-button { display: none !important;}
/*-----説明の位置調整-----*/
.gs-web-image-box, .gs-promotion-image-box {
    display: table !important;
}

/*-----タイトルフォントサイズ-----*/
/*PC・タブレット*/
.gsc-control-cse .gs-spelling, .gsc-control-cse .gs-result .gs-title, .gsc-control-cse .gs-result .gs-title *{font-size:2.2rem !important;}

/*スマホ*/
@media screen and (max-width:480px){
.gsc-control-cse .gs-spelling, .gsc-control-cse .gs-result .gs-title, .gsc-control-cse .gs-result .gs-title *{font-size:1.8rem !important;}
}