/**
 * ヘッダー＆フッター固有のCSS 
 */

body {
	font-family: 'Noto Sans JP', sans-serif;
	color: var(--txt-body);
}

a {
	text-decoration: none;
}

a:hover {
	opacity: 0.7;
}

button, button:focus, button:active {
	outline: 0;
	border:none !important;
}

#loading {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: #ffffff;
	z-index: 9999;
	animation: fadeOut;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.footer-logo {
	width: 200px;
	height: auto;
}





#dropdownMenuButton img {
	width: 32px;
}

.dropdown-menu[data-bs-popper] {
	position: absolute;
	left: auto;
	right: -45%;
	top: 145%;
	width: 8rem;
	padding: .5rem 0 1rem;
	border: 0;
	border-radius: 0;
}

.dropdown-menu[data-bs-popper] .dropdown-item:focus {
    opacity: 0.6;
	background-color: var(--bg-dropdown);
	text-decoration: none;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
	.nav-item {
		font-size: 0.9rem;
	}
}

@media screen and (max-width: 992px) {
	
	#toggleContent {
		width: 100%;
		z-index: 10;
		transition: height .3s;
	}
}

/* ヘッダーcss */

@media screen and (min-width: 992px) {
	.bg-pc-header {
		background: var(--bg-pc-header);
		box-shadow: 1px 1px 6px var(--bg-shadow-pc-header);
	}

}

@media screen and (max-width: 991px) {
	.bg-sp-logo-header {
		background: var(--bg-sp-logo-header);
		padding: 13px 17px;
		border-radius: 0 0 10px 0;
		box-shadow: 1px 1px 6px var(--bg-shadow-sp-header);
	}
	
}

.header-sub-menu {
	position: fixed;
	width: 100%;
	top: 84px;
	left: 0;
	opacity: 0;
	background-color: var(--bg-header-sub-menu);
	border-top: 1px solid var(--border-header-sub-menu);
	transition: all 0.6s ease;
	visibility: hidden;
	z-index: 1;
}

#headerMenu1:hover > .header-sub-menu,
#headerMenu2:hover > .header-sub-menu,
#headerMenu3:hover > .header-sub-menu,
#headerMenu4:hover > .header-sub-menu,
#headerMenu5:hover > .header-sub-menu,
#headerMenu6:hover > .header-sub-menu,
#headerMenu7:hover > .header-sub-menu {
	opacity: 1;
	transition: all 0.5s ease;
	visibility: visible;
}

div.menu-link {
	position:relative;
}

div.menu-link:after {
	position: absolute;
	content: url('/common/img/ico_triangle.svg');
	transform: translate(-50%, -50%) rotate(-90deg) !important;
	-webkit-transform: translate(-50%, -50%) rotate(-90deg) !important;
	-ms-transform: translate(-50%, -50%) rotate(-90deg) !important;
	top: 15px;
	right: -3px;
	width: 15px;
	height: 15px;
}

a.menu-link-sp {
	position:relative;
}


.pointer-cursor {
	cursor: pointer;
}

.filter-invert-100per {
	filter: invert(100%);
}

.border-top-header-sub-menu {
	border-top: 1px solid var(--border-header-sub-menu);
}

.border-bottom-header-sub-menu {
	border-bottom: 1px solid var(--border-header-sub-menu);
}

#pcHeaderLanguageButton:hover {
	opacity: 0.7;
}

/* ヘッダーSP css */
.hover-sp-menu:before{
	content: "";
	position: absolute;
	margin: auto;
	border-right: 3px solid #fff;
	border-top: 3px solid #fff;
	bottom: 0;
	height: 10px;
	width: 10px;
	right: 30px;
	top: 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 300ms;
}
.hover-sp-menu:hover::before{
	opacity: 1;
}


.bg-sp-menu-sub-header {
	background-color: var(--bg-sp-menu-sub-header);
}

.pb-85px {
	padding-bottom: 85px;
}

.text-header {
	position:relative;
	color: var(--txt-header);
}

.language-icon {
	cursor: pointer;
}

.language-icon:hover {
	opacity: 0.7;
}

.position-to-toppage {
	position: absolute;
	cursor: pointer;
	content: '';
	color: var(--txt-to-toppage);
	background: var(--bg-top-toppage);
	top: -4%;
	right: 10%;
	width: 80px;
	height: 80px;
	border: 2px solid var(--txt-to-toppage);
	border-radius: 40px;
}

@media screen and (min-width: 768px) {

	.position-to-toppage {
		position: absolute;
		cursor: pointer;
		content: '';
		color: var(--txt-to-toppage);
		background: var(--bg-top-toppage);
		top: -8%;
		right: 5%;
		width: 80px;
		height: 80px;
		border: 2px solid var(--txt-to-toppage);
		border-radius: 40px;
	}
}

.position-to-toppage:hover {
	background: var(--bg-to-toppage-hover);
}

.position-to-toppage:after {
	position:absolute;
	content: '';
	top: 33px;
	left: 28px;
	width: 20px;
	height: 20px;
	border-top: 4px solid var(--txt-to-toppage);
	border-left: 4px solid var(--txt-to-toppage);
	transform: rotate(45deg);
}