@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Roboto:wght@400;500;700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import "/Portals/0/css/base.css";
@import "/Portals/0/css/contents.css";
@import "/Portals/0/css/contents_modules.css";
@import "/Portals/0/css/contents_script.css";
@import "/Portals/0/css/contents_cms.css";

html {
	font-size: 100%;
	&:has(body.fontsize1[view-mode="pc"]) {
		font-size: 87.5%;
	}
	&:has(body.fontsize2[view-mode="pc"]) {
		font-size: 100%;
	}
	&:has(body.fontsize3[view-mode="pc"]) {
		font-size: 112.5%;
	}
}

body {
	min-width: calc(var(--content-width) + var(--padding-x) * 2);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.25rem;/* 20px */
	font-weight: 400;
	line-height: 2;
	color: var(--color-text);
}

#blockskip {
	display: none;
}

.inner {
	min-width: calc(var(--content-width) + var(--padding-x) * 2);
	margin: 0 auto;
	padding: 0 var(--padding-x);
}

._2Column .content_middle {
	display: flex;
}

/*
	以下、スキン固有の記述をする
*/
/*===========================================================
 header
===========================================================*/
.header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	background-color: var(--color-bg);
	z-index: 90;
}

/* header(admin) */
body.editMode {
	.header {
		position: static;
	}
}
body._Index.pcView {
	/* .header:not(.is-fix) {
		background-color: transparent;
		color: #fff;
	} */
}

.header {
	> .inner {
		display: grid;
		align-content: center;
		width: 100%;
		min-height: 110px;
	}
	.header_inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		column-gap: 10px;
	}
	/* left */
	.left {
		display: flex;
		column-gap: 17px;
	}
	/* right */
	.right {
		display: flex;
		column-gap: clamp(0.625rem, -8.214rem + 10.714vw, 2.5rem);
		body.fontsize1 & {
			column-gap: clamp(0.556rem, -7.302rem + 10.714vw, 2.222rem);
		}
		body.fontsize3 & {
			column-gap: clamp(0.556rem, -7.302rem + 10.714vw, 2.222rem);
		}
	}
	/* gNav */
	.token_menu {
		> ul {
			display: flex;
			column-gap: clamp(0.625rem, -8.214rem + 10.714vw, 2.5rem);
			body.fontsize1 & {
				column-gap: clamp(0.556rem, -7.302rem + 10.714vw, 2.222rem);
			}
			body.fontsize3 & {
				column-gap: clamp(0.556rem, -7.302rem + 10.714vw, 2.222rem);
			}
			> li {
				font-size: var(--font-size18);
				font-weight: 500;
				line-height: calc(22 / 18);
				> a {
					display: block;
					position: relative;
					min-height: 33px;
					color: var(--color-text);
					text-decoration: none;
				}
				&:hover,
				&.mega_trigger {
					> a {
						color: var(--color-link);
					}
				}
				&:hover,
				&.mega_active {
					> a {
						&::after {
							display: block;
							position: absolute;
							bottom: 0px;
							left: 0px;
							width: 100%;
							height: 2px;
							background: linear-gradient(90deg, #008ccf99 0%, var(--color-link) 30%, var(--color-link) 70%, #008ccf99 100%);
							content: "";
						}
					}
				}
				ul {
					display: none;
				}
			}
		}
	}
	/* font sizer */
	.head_fontsize {
		display: flex;
		align-self: self-start;
		gap: 10px;
		margin: 0;
		color: var(--color-gray);
		font-size: var(--font-size20);
		font-weight: 500;
		line-height: calc(20 / 17);
		> dt {
			padding-top: 3px;
			color: var(--color-primary);
			font-family: "Inter", sans-serif;
		}
		> dd {
			margin: 0;
		}
		ul {
			display: flex;
			gap: 10px;
		}
		li {
			position: relative;
			cursor: pointer;
			&::after {
				display: block;
				position: absolute;
				left: 0;
				bottom: -4px;
				width: 100%;
				height: 1px;
				background: transparent;
				content: "";
			}
			&.active {
				color: var(--color-black);
				&::after {
					background: var(--color-primary);
				}
			}
		}
	}
}

/*===========================================================
 main
===========================================================*/
#main {
	padding-top: 110px !important;
}

/*===========================================================
 footer
===========================================================*/
.foot_bottom {
	position: relative;
	padding: 30px 0;
	min-height: 164px;
	text-align: center;
	.pagetop {
		display: none;
		position: fixed;
		right: 50px;
		bottom: 30px;
		width: 65px;
		height: 65px;
		a {
			display: block;
			position: relative;
			width: 100%;
			height: 100%;
			border: 1px solid transparent;
			background: var(--color-primary);
			color: transparent;
			font-size: 0;
			white-space: nowrap;
			overflow: hidden;
			&::after {
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				/* maskでSVGのカラー変更可 */
				-webkit-mask: url(/Portals/0/images/common/pagetop_arrow.svg) no-repeat center center;
				mask: url(/Portals/0/images/common/pagetop_arrow.svg) no-repeat center center;
				background-color: var(--color-white);
				content: "";
			}
			/* ホバーに対応したデバイスのみ有効 */
			@media (any-hover: hover) {
				&:hover {
					border-color: var(--color-primary);
					background-color: var(--color-white);
					&::after {
						background-color: var(--color-primary);
					}
				}
			}
		}
	}
	._2Columns & {
		margin-top: 70px;
		box-shadow: 0px -10px 60px rgba(0, 0, 0, 0.05);
	}
}

.foot_sitemap {
	margin-inline: auto;
	padding-top: 150px;
	background: linear-gradient(180deg, #d3e4f500 0%, #d3e4f500 60%, #d3e4f5 100%);
}

.foot_top {
	padding: 80px 0 100px;
	background: url(/Portals/0/images/index/bg_footer_pc.png) no-repeat center bottom #d3e4f5;
	@media screen and (min-width: 1920px) {
		background-size: cover;
	}
}

.copyright {
	color: var(--color-gray);
	font-size: var(--font-size10);
	font-weight: 500;
	line-height: 1;
}

/*===========================================================
 breadcrumb
===========================================================*/
.breadcrumb {
	padding: 40px 0 calc(90px - 1em);
	font-size: var(--font-size14);
	font-weight: 500;
	line-height: 1.2;
	.inner {
		max-width: calc(var(--content-width) + var(--padding-x) * 2);
	}
	.inner {
		> span {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
	}
	.breadcrumbItem,
	.separator {
		display: inline-block;
		margin-bottom: 1em;
		color: var(--color-text);
	}
	a {
		text-decoration: none;
		&:hover {
			color: var(--color-primary);
		}
	}
	.separator {
		position: relative;
		height: 10px;
		width: 10px;
		margin-inline: 18px;
		&::before {
			display: block;
			position: absolute;
			left: 0;
			top: 2px;
			width: 7px;
			height: 7px;
			border-top: solid 1px var(--color-primary);
			border-right: solid 1px var(--color-primary);
			transform: rotate(45deg);
			content: "";
		}
	}
}
._ARM-en {
	.breadcrumb {
		.inner > span {
			& > :nth-child(1 of .breadcrumbItem) {
				display: none;
				& + .separator {
					display: none;
				}
			}
		}
	}
}

/*===========================================================
 Index
===========================================================*/
._Index {
	.kv_area {
		padding-top: 102px;
		background: url(/Portals/0/images/index/bg_top_pc.png) no-repeat center top;
		@media screen and (min-width: 1920px) {
			background-size: cover;
		}
		> .inner {
			max-width: calc(var(--index-width) + var(--padding-x) * 2);
		}
	}

	.column_container {
		display: grid;
		grid-template-columns: 1fr 40.1%;
		column-gap: 9.3%;
		max-width: var(--index-width);
		margin-inline: auto;
		&:has(> :only-child) {
			grid-template-columns: 1fr;
		}
	}
}

/*===========================================================
 2Columns
===========================================================*/
._2Columns {
	.pagetitle {
		display: grid;
		align-content: center;
		min-height: 250px;
		padding-block: 20px;
		background: url(/Portals/0/images/common/bg_pagetitle.png) no-repeat center top;
		@media screen and (min-width: 1920px) {
			background-size: cover;
		}
		> .inner {
			max-width: calc(var(--content-width) + var(--padding-x) * 2);
		}
		h1 {
			margin: 0;
			padding: 0;
			font-size: var(--font-size54);
			font-weight: 700;
			line-height: 1.2;
		}
	}

	.content_main {
		display: grid;
		grid-template-columns: var(--content-main-width) var(--content-side-width);
		justify-content: space-between;
		column-gap: var(--content-gap-width);
	}

	.content_main.inner {
		max-width: calc(var(--content-width) + var(--padding-x) * 2);
	}

	.main_area {
	}

	.side_area {
		margin-bottom: 35px;
	}
}