/*
 * Phase 2B responsive layer.
 *
 * The captured PC stylesheets remain the desktop source of truth.  Rules in
 * this file are intentionally scoped to 999px and below so the 1440px
 * desktop rendering keeps the established visual identity.
 */

.skip-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	padding: 0;
	background: #fff;
	color: #333;
	z-index: 10000;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
	width: auto;
	height: auto;
	padding: 10px 14px;
	border: 2px solid #6463A5;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.mobile-menu-toggle {
	display: none;
}

/* Keep the floated legacy side menu contained after its landmark wrapper is
 * introduced.  The wrapper has no visual styling of its own. */
nav[aria-label="サイドナビゲーション"] {
	display: block;
	overflow: hidden;
}

/* A visible focus treatment for keyboard users without changing idle pages. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid #ffbf47;
	outline-offset: 2px;
}

@media screen and (max-width: 999px) {
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}

	body {
		text-align: left;
	}

	.wrap {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	#header,
	#contents,
	#contents_w {
		width: auto;
		max-width: none;
		margin-left: 12px;
		margin-right: 12px;
	}

	#header {
		overflow: visible;
	}

	#header_left,
	#header_right {
		float: none;
		width: auto;
		overflow: visible;
	}

	#header #logo {
		margin: 5px 0 10px;
	}

	#header #logo img,
	#header [id^="logo"] img {
		display: block;
		width: 100%;
		max-width: 381px;
		height: auto;
	}

	#header .txtmenu_right {
		float: none;
		display: inline-block;
		margin: 0 6px 8px 0;
		font-size: 15px;
		vertical-align: top;
	}

	#header .txtmenu_right a {
		padding: 7px 12px;
	}

	#header #search {
		float: none;
		width: 100%;
		margin: 2px 0 12px;
	}

	#searchbox {
		display: flex;
		float: none;
		align-items: center;
		width: 100%;
	}

	#searchbox img {
		float: none;
		flex: 0 0 auto;
		margin: 0 5px 0 0;
	}

	#header input[type="text"] {
		float: none;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		min-height: 44px;
		height: 44px;
		font-size: 100%;
	}

	#header input[type="image"] {
		flex: 0 0 auto;
		width: auto;
		min-width: 44px;
		min-height: 44px;
		height: 44px;
		margin-left: 4px;
	}

	.global-navigation {
		width: 100%;
		clear: both;
	}

	.mobile-menu-toggle {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-height: 44px;
		margin: 0 0 8px;
		padding: 9px 14px;
		border: 0;
		background: #6463A5;
		color: #fff;
		font: inherit;
		font-weight: bold;
		text-align: left;
		cursor: pointer;
	}

	.mobile-menu-icon {
		display: inline-block;
		position: relative;
		width: 22px;
		height: 14px;
		margin-right: 8px;
		vertical-align: -2px;
		border-top: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
	}

	.mobile-menu-icon::after {
		content: "";
		position: absolute;
		left: 0;
		top: 5px;
		width: 22px;
		border-top: 2px solid currentColor;
	}

	/* Progressive enhancement: without JavaScript the links stay visible. */
	#header .global-navigation #headermenu {
		box-sizing: border-box;
		width: 100%;
		margin: 0 0 12px;
		overflow: visible;
	}

	html.js-enabled #header .global-navigation #headermenu {
		display: none;
	}

	html.js-enabled #header .global-navigation #headermenu.is-open {
		display: block;
	}

	#header .global-navigation #headermenu li {
		float: none;
		width: 100%;
		overflow: visible;
	}

	#header .global-navigation #headermenu li a {
		box-sizing: border-box;
		width: 100%;
		min-height: 44px;
		margin: 0 0 6px;
		padding: 11px 14px;
		font-size: 105%;
		text-align: left;
	}

	/* The home page's old mobile-only duplicate menu is superseded by the
	 * shared accessible navigation above. */
	#spMenu {
		display: none !important;
	}

	#contents .titleContents,
	#contents_w .titleContents {
		box-sizing: border-box;
		width: 100%;
		height: auto;
		min-height: 108px;
	}

	#contents .titleContents h1,
	#contents_w .titleContents h1 {
		box-sizing: border-box;
		position: static;
		width: auto;
		padding: 38px 16px 24px;
		font-size: 28px;
		line-height: 1.25;
		word-break: keep-all;
	}

	#contents .breadcrumbs,
	#contents_w .breadcrumbs {
		width: 100%;
		overflow-wrap: anywhere;
	}

	#contents .breadcrumbs p,
	#contents_w .breadcrumbs p {
		line-height: 1.6;
	}

	#contents .contArea,
	#contents_w .contArea {
		box-sizing: border-box;
		float: none;
		width: 100%;
		max-width: 100%;
	}

	#contents .menuArea,
	#contents_w .menuArea {
		box-sizing: border-box;
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 24px 0 0;
	}

	#contents .menuArea .menuTtl,
	#contents_w .menuArea .menuTtl {
		padding: 12px 14px;
	}

	#contents .menuArea ul,
	#contents_w .menuArea ul {
		width: 100%;
	}

	#contents .menuArea ul li a,
	#contents_w .menuArea ul li a {
		min-height: 44px;
		box-sizing: border-box;
		padding: 12px 14px;
		font-size: 90%;
	}

	#contents .contArea .leadbox,
	#contents_w .contArea .leadbox {
		box-sizing: border-box;
		padding: 52px 12px 12px;
	}

	#contents .contArea .leadbox > .txtarea2,
	#contents_w .contArea .leadbox > .txtarea2 {
		padding: 0 8px 20px;
	}

	#contents .contArea .leadbox2,
	#contents_w .contArea .leadbox2 {
		box-sizing: border-box;
		padding: 8px;
	}

	#contents .contArea .leadbox2 > .txtarea4,
	#contents_w .contArea .leadbox2 > .txtarea4 {
		box-sizing: border-box;
		padding: 16px;
	}

	#contents .contArea .ttlL,
	#contents_w .contArea .ttlL,
	#contents .contArea .ttlM,
	#contents_w .contArea .ttlM,
	#contents .contArea .ttlS,
	#contents_w .contArea .ttlS {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	#contents .contArea .ttlL1,
	#contents_w .contArea .ttlL1,
	#contents .contArea .ttlL2,
	#contents_w .contArea .ttlL2,
	#contents .contArea .ttlL3,
	#contents_w .contArea .ttlL3,
	#contents .contArea .ttlM2,
	#contents_w .contArea .ttlM2,
	#contents .contArea .ttlS2,
	#contents_w .contArea .ttlS2 {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	#contents .contArea .ttlL2 h2,
	#contents_w .contArea .ttlL2 h2 {
		box-sizing: border-box;
		max-width: 100%;
		/* Reserve the left marker at tablet widths too; desktop remains
		 * governed by the captured PC stylesheet above 999px. */
		padding: 10px 24px 10px 52px;
		font-size: 125%;
		line-height: 1.35;
	}

	#contents .contArea .ttlM2 h3,
	#contents_w .contArea .ttlM2 h3 {
		box-sizing: border-box;
		max-width: 100%;
		padding: 10px 20px 10px 50px;
		font-size: 110%;
	}

	#contents .contArea .ttlS h4,
	#contents_w .contArea .ttlS h4 {
		box-sizing: border-box;
		max-width: 100%;
		padding: 6px 12px;
		line-height: 1.45;
	}

	#contents .contArea .contMenuW,
	#contents_w .contArea .contMenuW,
	#contents .contArea .contMenuL,
	#contents_w .contArea .contMenuL,
	#contents .contArea .contMenuM,
	#contents_w .contArea .contMenuM {
		box-sizing: border-box;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	#contents .contArea .contMenuW li,
	#contents_w .contArea .contMenuW li,
	#contents .contArea .contMenuL li,
	#contents_w .contArea .contMenuL li,
	#contents .contArea .contMenuM li,
	#contents_w .contArea .contMenuM li {
		box-sizing: border-box;
		float: none;
		display: block;
		width: 100%;
		margin: 0 0 12px;
	}

	#contents .contArea .contMenuW span,
	#contents_w .contArea .contMenuW span,
	#contents .contArea .contMenuL span,
	#contents_w .contArea .contMenuL span,
	#contents .contArea .contMenuM span,
	#contents_w .contArea .contMenuM span {
		box-sizing: border-box;
		padding: 12px 14px;
	}

	#contents .contArea .imageBlockR .photo,
	#contents_w .contArea .imageBlockR .photo,
	#contents .contArea .imageBlockL .photo,
	#contents_w .contArea .imageBlockL .photo {
		box-sizing: border-box;
		float: none;
		max-width: 100%;
		margin: 0 auto 12px;
	}

	#contents .contArea img,
	#contents_w .contArea img,
	.mainimg img {
		max-width: 100%;
		height: auto;
	}

	#contents .contArea .imageBlockR img,
	#contents_w .contArea .imageBlockR img,
	#contents .contArea .imageBlockL img,
	#contents_w .contArea .imageBlockL img {
		width: auto;
		max-width: 100%;
	}

	#contents .contArea table,
	#contents_w .contArea table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		white-space: normal;
	}

	#contents .contArea td,
	#contents_w .contArea td {
		padding: 10px 8px;
		word-break: break-word;
	}

	#contents .contArea pre,
	#contents_w .contArea pre,
	#contents .contArea code,
	#contents_w .contArea code,
	#contents .contArea a,
	#contents_w .contArea a {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.mainimg {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		margin-bottom: 12px;
	}

	.mainimg a,
	.mainimg p {
		display: block;
		max-width: 100%;
	}

	.topTtl {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		padding: 8px 0 5px 8px;
	}

	.topTtl .ttlL2info,
	.topTtl .ttlL2topics,
	.topTtl .ttlL2links {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: 52px;
	}

	.topTtl .ttlL2info h2,
	.topTtl .ttlL2topics h2,
	.topTtl .ttlL2links h2 {
		box-sizing: border-box;
		max-width: 100%;
		padding: 10px 68px 10px 30px;
		font-size: 145%;
		line-height: 1.35;
	}

	.topTtl .ttlL3 {
		width: 100%;
		max-width: 100%;
		background-size: 100% 5px;
	}

	.topTtl .ttlBlist,
	.topTtl .ttlBrss {
		left: auto;
		right: 8px;
		top: 10px;
	}

	.topList {
		box-sizing: border-box;
		padding: 12px 0;
	}

	.topList dt,
	.topList dd {
		float: none;
		width: 100%;
		max-width: 100%;
	}

	.topList dt {
		line-height: 1.5;
	}

	.topList dt .date {
		width: auto;
		margin-right: 8px;
	}

	.topList dd {
		margin-top: 5px;
		line-height: 1.6;
	}

	.topLinks {
		width: 100%;
	}

	.topLinks li {
		box-sizing: border-box;
		float: none;
		width: 100%;
		margin: 0 0 10px;
	}

	.topLinks li img {
		max-width: 100%;
		height: auto;
	}

	#footer {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		margin-top: 24px;
	}

	#footerMenu span {
		display: block;
	}

	#footerMenu span a {
		box-sizing: border-box;
		display: block;
		min-height: 44px;
		margin: 0 12px 6px;
		padding: 11px 14px;
		text-align: left;
	}

	#privacyLink,
	#relLink {
		box-sizing: border-box;
		width: auto;
		margin: 0 12px 10px;
		padding: 10px 0 0;
		text-align: left;
	}

	#privacyLink li,
	#relLink li {
		box-sizing: border-box;
		display: block;
		width: auto;
		margin: 0;
		padding: 7px 8px 7px 30px;
		line-height: 1.45;
	}

	#footerbg {
		box-sizing: border-box;
		padding: 24px 12px;
	}

	#footerSign {
		box-sizing: border-box;
		width: auto;
		font-size: 85%;
	}

	.footerPrivacy {
		text-align: left;
	}

	.footerPrivacy > li {
		display: inline;
		line-height: 1.8;
	}

	#footerOrg {
		box-sizing: border-box;
		float: none;
		width: auto;
		margin: 0 0 18px;
	}

	#footerOrg .Aname {
		font-size: 190%;
	}

	#footerSign .InfoA {
		box-sizing: border-box;
		float: none;
		width: auto;
		max-width: 100%;
	}

	#copyright {
		box-sizing: border-box;
		width: auto;
		margin: 24px 0 0;
		padding: 8px 0 0;
		line-height: 1.5;
	}

	/* The legacy follow menu is fixed on desktop.  On small viewports it is
	 * returned to normal flow so it cannot cover the header, search box,
	 * headings, or body text while scrolling. */
	#follow {
		position: static;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		margin: 16px 0 0;
		transform: none;
	}

	#follow ul {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 8px 10px;
	}

	#follow li {
		box-sizing: border-box;
		flex: 0 0 50px;
		width: 50px;
		height: 50px;
		margin: 0 2px;
		overflow: hidden;
	}

	#follow li a {
		display: block;
		box-sizing: border-box;
		width: 50px;
		height: 50px;
	}

	#follow #printbtn {
		display: none;
	}

	#follow li#fontsize {
		display: flex;
		flex: 0 0 92px;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 92px;
		height: 50px;
		gap: 4px;
		padding: 0;
		background: none;
		text-align: center;
	}

	#follow li#fontsize p {
		box-sizing: border-box;
		width: 44px;
		height: 44px;
		margin: 0;
		overflow: hidden;
	}

	#follow li#fontsize p a {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		box-sizing: border-box;
		width: 44px;
		height: 44px;
	}

	#follow li#fontsize p img {
		display: block;
		flex: 0 0 24px;
		width: 24px;
		height: 48px;
		margin-top: 0;
		/* The source image is a two-state vertical sprite.  Keep the
		 * 44px link as the tap target, but clip the visual to one 24px
		 * state so both glyphs are never shown at once. */
		clip-path: inset(0 0 24px 0);
		transform: none;
	}

	#follow li#fontsize #large a.active img,
	#follow li#fontsize #middle a.active img {
		margin-top: 0;
		clip-path: inset(24px 0 0 0);
		transform: translateY(-24px);
	}

	#follow li#fontsize #large a:hover img,
	#follow li#fontsize #middle a:hover img {
		margin-top: 0;
	}

	#follow li#fontsize #large a.active:hover img,
	#follow li#fontsize #middle a.active:hover img {
		margin-top: 0;
		clip-path: inset(24px 0 0 0);
		transform: translateY(-24px);
	}
}

@media screen and (max-width: 767px) {
	#header,
	#contents,
	#contents_w {
		margin-left: 10px;
		margin-right: 10px;
	}

	#contents .titleContents h1,
	#contents_w .titleContents h1 {
		padding: 32px 12px 20px;
		font-size: 24px;
	}

	#contents .contArea .ttlL2 h2,
	#contents_w .contArea .ttlL2 h2 {
		/* w_ttl_l_bg_w2.png reserves roughly 34px for its round marker. */
		padding-left: 52px;
		padding-right: 18px;
		font-size: 115%;
	}

	#contents .contArea .ttlM2 h3,
	#contents_w .contArea .ttlM2 h3 {
		/* w_ttl_m_bg_b2.png has the same left marker as the large heading. */
		padding-left: 50px;
		padding-right: 14px;
		font-size: 105%;
	}

	.topTtl .ttlL2info h2,
	.topTtl .ttlL2topics h2,
	.topTtl .ttlL2links h2 {
		padding-left: 22px;
		padding-right: 60px;
		font-size: 125%;
	}

	.topTtl .ttlBlist,
	.topTtl .ttlBrss {
		right: 5px;
		top: 8px;
		transform: scale(.82);
		transform-origin: right top;
	}

}